Improve widget discovery and recognition

[Clorith]

Currently the new widget screen focuses heavily on blocks, partially gating widgets.

The default block inserter appears to have been used, on my site this gives me 6 options:

• Paragraph
• Image
• Heading
• Gallery
• List
• Quote

None of these are widgets, they are all blocks (which is well and nice that blocks can be used in widget areas, but "where are my widgets").

To find a widget from the most prominent of the three block insertion methods, you need to know what the widget is called and search for it (there's also no indication of the item you finding being a widget).

If you want to discover widgets, you need to open the global inserter and scroll to the widget section where you are presented with names, and rather generic icons. In the legacy screen (which I'll call it now), you had a description with each widget, to know what it did, alongside its name.

Expected behavior
Widgets would ideally be the first rate children when looking at the block inserts from a widget screen, and some means of identifying a widget in the inserter to distinguish between general blocks, for use everywhere, and a widget limited to this screen alone.

Screenshots

As seen in the screenshot, no widgets come up when I go to add one.

In this screenshot the search widget was searched up, now that it's showing like a block, I was half expecting to find it in the regular block editor as well, so there's a disconnect here that needs to be made more obvious.

Editor version (please complete the following information):

• WordPress version: 5.6-alpha
• Gutenberg 9.1.1

[draganescu]

A related problem described in an #25800 comment

[paaljoachim]

We discussed this issue during a design feedback session. Bottom line as I saw it is that it would be helpful to have a bit more focus on widgets in a widget screen. Even though this screen now can use blocks as widgets.

I will think about this issue some more.

[joyously]

I think I made these same points in my comments on the Call for Testing post.
Widgets and blocks are different and should be treated differently, unless you are going to make blocks behave like widgets, such as calling all the same filters, so a plugin like Dynamic Widgets can correctly show them on only some pages like it does with widgets.
My theme filters the widgets, so I can add UI for styling each one. That should still work with whatever blocks you add...

[paaljoachim]

Will something like this help for the widget screen?

Having the Widget preselected (default) in the inline inserter screen. So that widgets are seen, but the user can select another option in the drop down.

EDIT (changed to the newest design)

NB. I am making some alternatives. Exploring a possible drop down location.
I made an issue for the Gutenberg editor and the Widget Screen in relation to adding the drop down to the inline inserter.
#26130 (comment)

[paaljoachim]

I have now also made a prototype located here:
https://www.figma.com/proto/CKBzHGzQ6g9CcliwemEiBg/Inline-Inserter-w-drop-down-Widget-screen?node-id=1%3A2&scaling=min-zoom

[mapk]

Looks like a recent problem was introduced which removed all Inserter categories: #26329

If we include block previews from the Widget Screen Inserter panel the same way it works in the post editor, then I think this would help a lot.

Example of Post Editor block Previews

But other than that, searching for "widget" should show any widget-like block in Core AND all your 3rd party widgets on your site.

[joyously]

searching for "widget" should show any widget-like block in Core AND all your 3rd party widgets on your site.

And does that mean "widget" in whatever language you are using?

[mapk]

And does that mean "widget" in whatever language you are using?

Of course this should include any sort of i18n that is expected.

[noisysocks]

But other than that, searching for "widget" should show any widget-like block in Core AND all your 3rd party widgets on your site.

This is probably best done by setting keywords in all of the Legacy Widget block variations created by packages/block-library/src/legacy-widget/transforms.js.

[noisysocks]

I tested this and searching for "widget" correctly shows all widget blocks including Legacy Widget variations.

It would help if we showed block previews in the inserter, as @mapk mentions above. I've created an issue for that here: #38268

The goal is to consolidate the various content editing interfaces so that the same content can be inserted anywhere in your site. I don't think the inserter in the widgets editor should look any different to the inserter in other contexts including the post editor and site editor.