Try "Add Pattern" UI for zoom out quick inserter

[richtabor]

Visually, let's explore using "Add Pattern" as the control, rather than the + (which should be more connective to block insertion). It's worth exploring this variant here, to not induce confusion with the block inserter (the +).

This is the design side of https://github.com/WordPress/gutenberg/issues/59738.

Visual

[cbravobernal]

If you don't mind, I'd like to work on this feature for the March 24th Contributor table at WordCamp Torrelodones 2024.

Edit: We couldn't make it, so anybody feel free to work on this.

[richtabor]

Sure thing @c4rl0sbr4v0 :)

[draganescu]

Two questions @richtabor:

• When should this button show? When hovering the edges, similar to the in between inserter? Or when hovering a pattern?
• How should this be accessible via the keyboard? Can you think of any way?

[MaggieCabrera]

Two questions @richtabor:

* When should this button show? When hovering the edges, similar to the in between inserter? Or when hovering a pattern?

* How should this be accessible via the keyboard? Can you think of any way?

Isn't it the same inserter that we have but with text instead of the plus?

[richtabor]

When should this button show? When hovering the edges, similar to the in between inserter? Or when hovering a pattern?

I was thinking it's be interesting proximity based, like hovering over the bottom half of a pattern would show the inserter under it, same for the top half.

And/or:

Show the before/after inserters on the selected pattern, now that we can confidently select whole sections at a time.

It may be that both feel nice, where selection always shows the inserters, but you can also see inserters as you're scrolling down the page (not all the time).

[draganescu]

Isn't it the same inserter that we have but with text instead of the plus?

I think this should directly open the pattern panel of the inserter and no quick suggestions.

now that we can confidently select whole sections at a time.

@richtabor the thing is in the screenshot above the new add pattern inserter shows when the sidebar with patterns is already open and the user is in zoom out mode. What happens after click? Do we want this special inserter in normal mode? What happens to the other inserter then?

[MaggieCabrera]

@richtabor the thing is in the screenshot above the new add pattern inserter shows when the sidebar with patterns is already open and the user is in zoom out mode. What happens after click? Do we want this special inserter in normal mode? What happens to the other inserter then?

From what I understand, we want to modify the inserter when this condition applies, right? This should be a quick inserter

[MaggieCabrera]

Isn't it the same inserter that we have but with text instead of the plus?

I think this should directly open the pattern panel of the inserter and no quick suggestions.

now that we can confidently select whole sections at a time.

@richtabor the thing is in the screenshot above the new add pattern inserter shows when the sidebar with patterns is already open and the user is in zoom out mode. What happens after click? Do we want this special inserter in normal mode? What happens to the other inserter then?

I made the visual changes in https://github.com/WordPress/gutenberg/pull/61316 but the inserter seems to not be working at all for me on trunk (it closes zoom out mode and then does nothing). How do we want it to behave on click @richtabor ?

[richtabor]

but the inserter seems to not be working at all for me on trunk

Don't mind my crazy test page, but I'm able to get the current quick inserter to render, populating with patterns, and insert a selected pattern: