Blocks: Contextual tips tied to specific search queries

[davemart-in]

Problem

Folks who are new to WordPress and Gutenberg start off with a very rudimentary mental model of how WordPress works. Once they are in Gutenberg, it's easy to see how they might assume that all customization of their site can be done within the editor. When people search for terms like:

• CSS
• theme
• plugin
• header
• colors

Not only do we show zero results, but we currently do nothing to point them in the right direction.

Proposed Solution

Let's use the tips system (which already exists in the inserter and can be made searchable) to contextually suggest alternative sections of WordPress when specific keywords are entered into the block inserter.

Preview

Here's a preview of what that might look like:

Proposed keyword/copy

• CSS - You can visit the <a href="/customize.php?autofocus[section]=custom_css" target="_blank">the Customizer</a> to edit the CSS on your site.
• theme - You can visit the <a href="/themes.php" target="_blank">theme directory</a> to select a different design for your site.
• plugin - You can visit the <a href="/plugin-install.php" target="_blank">plugin directory</a> to install additional plugins.
• header - You can visit the <a href="/customize.php?autofocus[section]=title_tagline" target="_blank">the Customizer</a> to edit your logo and site title.
• colors - You can visit the <a href="/customize.php?autofocus[section]=colors" target="_blank">the Customizer</a> to edit the colors on your site.

Alternatives Considered

1) Using tips in their current location

I started off by attempting to use tips within their current location, but it felt off. The white space feels a tad excessive.

2. Replace "no results" with tip

The next thing I tried was simply replacing the "No blocks found." text with the tip. I believe this text provides valuable context though, so I moved the tip to the bottom (as seen in the proposed solution above)

[mtias]

I like this. A good start would be to compile a list of possible tips, then we can decide if they show only when searching or if they become part of the rotating set.

[mapk]

We've also got a list of block-specific tips that we've yet to incorporate into the build.

Related: #16595

[shaunandrews]

Nice. Worth connecting this to #19836 which updates the way the tip is displayed. That said, I like that the tip replaces the "no results" label — it seems more obvious and helpful.

[davemart-in]

A good start would be to compile a list of possible tips, then we can decide if they show only when searching or if they become part of the rotating set.

Here are the first few that I outlined above:

• CSS - You can visit the the Customizer to edit the CSS on your site.
• theme - You can visit the theme directory to select a different design for your site.
• plugin - You can visit the plugin directory to install additional plugins.
• header - You can visit the the Customizer to edit your logo and site title.
• colors - You can visit the the Customizer to edit the colors on your site.

If anyone else has additional ideas, please share them.

[paaljoachim]

This is what it looks like right now when I write css in the block panel inserter.

I do like the topics suggested for giving additional information.

[paaljoachim]

This PR is merged to WordPress.com and should also be copied over to wp.org and Gutenberg.
Automattic/wp-calypso#42038

@retrofox