Inserter: Adds CTA and external link to block inserter flow

[mburridge]

What?

Following a search, if no registered blocks are found AND no matching block is found in the plugin directory, this prompts the user with the suggestion to create a block and a link to the docs.

Why?

This makes the user aware of the open source nature of WordPress and alerts them to the possibility that they can create and contribute a new block with the functionality that they desire.

How?

Adds additional textual content to DownloadableBlocksNoResults component in no-results.js.

Testing Instructions

1. Create a new post
2. Search for a block that is not registered or available in the plugin directory ("nothing" worked for us)
3. Verify that the new text and link appears
4. Confirm that this does not appear in the quick inserter

Screenshots or screencast

This PR is intended to open a conversation regarding the best text to display here and regarding what links are best to point to. Please let us know what suggestions and ideas you may have to make this messaging better. Thanks.

(Thanks to @ryanwelcher for help with this)

[bph]

I luv' this! Thank you @mburridge and @ryanwelcher for tackling this!

[DaisyOlsen]

I did some playing with the search process and wonder if this could use a bit of refinement in order to not clutter the experience for those that aren't in a position to create blocks(Editor, Author, Contributor) - I believe that the no results message will display for all users, not only admins or, more specifically, those that can install plugins.

When I search as an admin on my local environment I first see a message related to the search of the block directory and then, if nothing matches there the "No Matches Found" text and icon are displayed.

If I search for something that does have a match in the plugin directory AND I have the role to install plugins then I get something like this:

Ideally we'll cover both the no results message and also the "No results available from your installed blocks." message when there is a match in the block directory that is not already installed locally.

[bph]

I wished we could also have a record of the search items, so we can see what people find missing. but that might be a tad too intrusive....

[mburridge]

I believe that the no results message will display for all users

@DaisyOlsen that's correct, the message will display for all users. We did consider whether to restrict it to roles that can install plugins, but wanted to create an MVP in order to initiate discussions such as this.

Why do you think it shouldn't display to all users? Even users who don't have permission to install plugins could see the message and then suggest to their admins the possibility to create a block that does what they want. They may even have the development skills to create a block, but not the right to install plugins.

Those not interested could just note the 'No results found' message and ignore the rest.

If there's a case for not displaying the message to user roles that don't have admin rights then it's certainly something we could implement. We already experimented a little with this, but then went for the MVP option for this PR.

[annezazu]

Might be good to get some design input. If you drop it into #design in Make Slack or add a design feedback label, I bet that might cause some folks to check it out!

[mburridge]

Good call @annezazu, labels added.

[mtias]

I like the spirit of the idea, but I think this might be a bit too prominent presented this way.

[javierarce]

We show tips at the bottom of the column… maybe that could be the right placement for this (not necessarily using the same design):

Note
Edited later to add the external link indicator.

[mtias]

That'd work! If it's an external link we should indicate it so.

[ryanwelcher]

👍 Love this approach!

[mtias]

Another consideration is that this should be easy to disable — maybe connected to the block directory checks. If block directory is disabled, we should not render the notice. Plenty of sites would not want their users to get confused by this call.

[mburridge]

I've wrapped the message in a block-editor-inserter__tips class, which separates it out from the 'No results found' message and makes it look like the other tips that get displayed. I haven't been able to get it to display at the bottom of the inserter panel. Anyone have any ideas?

[mburridge]

Another consideration is that this should be easy to disable — maybe connected to the block directory checks. If block directory is disabled, we should not render the notice. Plenty of sites would not want their users to get confused by this call.

@mtias The text is displayed by the DownloadableBlocksNoResults() function in no-results.js. As far as I can determine this only runs after a check for downloadable blocks.

[mburridge]

I've just tested and if the block directory is disabled using this snippet:

add_action( 'admin_init', function() {
   remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
} );

then the notice is not displayed.

[mburridge]

With this latest commit the message now looks like this:

I don't think it's possible to get it to display at the bottom of the inserter without adding CSS to higher level components that could have broader ramifications.

That said, there's now a separator and stylistic differences to distinguish it as separate from the 'No results found' message above.

Thanks to @ryanwelcher who helped make this better than it would otherwise have been.

[juanmaguitar]

@mtias as you've provided feedback previously here, can you review the latest changes on this PR?
From my side, this PR is good to go but I'd prefer to have your OK too before merging it.