Blocks: Contextual tips tied to specific search queries

davemart-in commented 4 years ago

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:

tip

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

tip-link-3

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

tip-link-2

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 commented 4 years ago

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 commented 4 years ago

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

shaunandrews commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

Screen Shot 2021-02-02 at 17 11 54

I do like the topics suggested for giving additional information.

paaljoachim commented 3 years ago

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

@retrofox

WordPress / gutenberg