Adding a Block category drop down to the inline inserter.

[paaljoachim]

Is your feature request related to a problem? Please describe.
The inline inserter:

Only shows the 6 currently used blocks. One needs to click the Browse all button to open the top left inserter panel to see all the options.

Describe the solution you'd like
My suggestion creates a dropdown of category options.

Shows the current option preselected.

One is able to choose another option in the drop down.

Describe alternatives you've considered
Clicking Browse all to open the full Inserter panel.

Related to Adding a Block category drop down in the Inserter Blocks panel.
#26028

[paaljoachim]

Here is a suggestion in relation to having widget preselected in the Inline inserter in the widget screen.
Having the Widgets as default instead of the currently used blocks brings Widgets to the forefront.

Open:

Closed:

[paaljoachim]

Another suggestion. With focus on the Widget screen.

[SchneiderSam]

The 2nd suggestion looks muuuuuuuch better

[mapk]

This feels like adding a lot of UI to solve an edge case scenario. But please correct me if I'm wrong. I agree that the sibling inserter is limiting, but I believe that's the intent. It's meant to be something minimal. When the user wants more, they open up the Inserter panel.

That being said, I've seen several bits of feedback that wish the Inserter panel would remain open when adding blocks/widgets, but due to accessibility requests and keyboard interactions, we treat that panel as a modal, so when focus moves away from it, it closes.

And while I realize that's challenging when trying to add block after block or widget after widget. I also realize that these widget areas are more about displaying certain things (ie. latest posts, latest comments, etc) rather than writing content. But I still think that between the Inserter panel, mini-inserter, and quick-inserter / that's probably enough to get done what needs doing.

[paaljoachim]

You are mentioning many good points, Mark! I have been hesitant in exploring but had a feeling that I might be onto something so I continued.

Check out the prototype.

https://www.figma.com/proto/CKBzHGzQ6g9CcliwemEiBg/Inline-Inserter-w-drop-down-Widget-screen?node-id=1%3A2&scaling=min-zoom

Screenshots:

Here is a gif of how it works.

An advantage with the approach is that one can understand which widget/block section one is seeing. Today it is at the default most used/recently used, but that is not clear for the user.

[bph]

@mapk I understand the reasoning behind why the left bar Inserter needs to close when focus changes. Would there be a way to add a 'stay open' property to the modal, users can switch on and off? Default is "off".

As for the Sibling inserter, it's rather arbitrary what is shown in it. All the examples in this issue. Show blocks that are familiar from the post edit screen. What happens on the Widget screen is that it's filled arbitrarily with Widgets that may or may not be important to the user.

I mentioned in another issue that the left bar Inserter doesn't seem to display any categories for the user to narrow down the view. Both screens right now a quite cumbersome to use.

[mapk]

I understand the reasoning behind why the left bar Inserter needs to close when focus changes. Would there be a way to add a 'stay open' property to the modal, users can switch on and off? Default is "off".

I think that's totally possible! Maybe it resides as a setting in the new "Preferences" section?

[mapk]

Thanks for these mockups, @paaljoachim! I still hold that the Sibling Inserter here is too small to introduce more UI. It should function as a quick insertion point. Something that can help solve this, which I commented here, is that searching "widget" should reveal any Core widget-like blocks AND 3rd party widgets installed. By improving the search, we can improve this experience. The "Browse all" is more for browsing then which works much better in the larger Inserter panel.

[paaljoachim]

I hear ya, @mapk :-)

For the sake of clarity and for a better inline inserter to be much more efficient. I also added what my design mockup would look like in the Gutenberg layout.

Prototype:
https://www.figma.com/proto/CKBzHGzQ6g9CcliwemEiBg/Inline-Inserter-w-drop-down-Widget-screen?node-id=64%3A141&scaling=min-zoom

[paaljoachim]

We had a long and really good discussion of this issue during the joint accessibility and design Open Office/meeting.
Here is a link: https://wordpress.slack.com/archives/C02S78ZAL/p1603811546082700

[mapk]

I'm not sure what resulted from that conversation, but I tend to agree that the search is the strongest feature in this small inserter. @paaljoachim I really appreciate your explorations and they helped us talk it through, however, I'm going to close this in favor of the existing UI that is both simple and searchable.