Inserter: Expand view to view patterns in a larger overlay.

[paaljoachim]

This issue came about as I read: https://wptavern.com/wordpress-com-drops-over-100-block-patterns-carving-a-path-the-design-community-should-follow

Viewing a lot of patterns in the small inserter panel does not work to well. It gets tiring needing to scroll one pattern at a time. Having a larger view will help the user to compare multiple patterns at once.

Here is an example from WordPress.com. (The following is a mix of Norwegian and English language.)
We see the Inserter panel.
A user needs to scroll to see one pattern at a time.

--

Going from the narrow Inserter panel to a larger overlay will make it possible to see multiple patterns at once.

I added an expand icon the user can click to open an overlay.

--

The result is more space to view patterns.

[hedgefield]

Great idea! It makes a lot of sense, also for style variations and such. First thing I would suggest is to add some kind of outline around the pattern preview image - these examples have some wild layouts with intense whitespace, makes it hard to see what belongs where. Putting some kind of outline will make it immediately clear and bring the grid feeling you're going for.

[paaljoachim]

Hey Tim!

Yeah. I see your point. I added an outline to the default state but removed it and instead added it to the hover state. Like it is seen today.

Here is a Figma prototype:
https://www.figma.com/proto/TuDKX6ckaecNARP2B8NWp4/Expand-to-view-patterns-in-a-larger-overlay-window?node-id=3%3A49&scaling=min-zoom

An animated gif.

The prototype I made is one piece of a bigger puzzle.

Next Steps on the Inserter
#21080
Which we also need to take into account.

As well as these issues that have the Inserter label.
[Feature] Inserter The main way to insert blocks using the + button in the editing interface

I have an associated issue for managing reusable blocks (can also be related to patterns).
#26408 (comment)
Bringing the import/export/editing/saving/removing of reusable blocks into the Gutenberg screen as an overlay.

Which could be like so.

1. Create an overlay that multiple block types can use. Such as reusable blocks, patterns etc.
2. Being able to manage the block types through clicking manage block. Which would give the user more control over the blocks they have available.

[skorasaurus]

+1 with this; we're starting to run into this (users having to scroll down) as well even with just a handful of block patterns.

[paaljoachim]

Adding in Justin's article from WPTavern: https://wptavern.com/proposal-to-create-an-expanded-view-or-overlay-for-the-block-patterns-inserter

[ntsekouras]

I'm closing this as the first iteration has landed here: #35773