Pattern Inserter: Next

[mtias]

Previously https://github.com/WordPress/gutenberg/issues/21080#issuecomment-605161443

---

With the focus on "building with patterns" and the expansion of the pattern directory there's a need to refine some flows around the discovery and insertion of patterns. The main things to accommodate are the growing sets of categories and provenance (theme, directory, eventually user); the drag and drop experience when building top level sections; quick browsing between categories; the ability to save, import, and manage.

One proposal from @SaxonF can be a good starting point to make improvements to these area.

To highlight the tasks that could be started:

• [x] Split pane design with clear category browsing.
• [x] Use of category descriptors in the preview panel.
• [ ] The introduction of a manage library that could accommodate both patterns and reusable blocks. (See also #34352 and the operational overlap between these concepts.) I would also consider font management as part of a design library now there is basic support for webfonts.
• [ ] Block shortcuts in top bar: https://github.com/WordPress/gutenberg/issues/45722

There's also a few other ideas that can be separated, like the re-addition of a most used / quick blocks as a top row. This is something we can introduce in the main inserter as well. It's also time we make it configurable so you can set 1-4 blocks customized for quick access.

I think this iteration should be focused on patterns and exclude the presence of a "blocks" category. We can try it in the zoomed out view being introduced for the site editor.

See also: #44496

---

This issue was updated Sep. 28.

Initial explorations


[pablohoneyhoney]

Exciting path! I like the scalability of this model. It's also a good example to explore in motion, and define how the second panel transitions between patterns smoothly as well as how they are dropped and rendered in the canvas.

A few granular notes on the above mock, to address when/where relevant:

• The verbal context should perhaps avoid referring to you, and rather be more encompassing of many types of users (builders, admins, owners, editors). Like: Introduce the page or project with image and text. instead of Introduce yourself or your business. Or Manage the library instead of Manage your library.
• I'm not sure what's the right proportion, but it'd be good to define a bit more tightly the width relationship between the two panels.
• I think we are using custom scales and styles for certain components on the left panel, like the category list, selected/hover state height, and the greay area of the block icons. Same with the Search bar. And generally align further with examples like Global Styles as possible.
• The pattern category title and subtext could potentially be more aligned with the search field, and the patterns previews having less padding in the second panel, perhaps patterns being larger. I like how visual it is but I guess we'd want to keep pattern titles?
• Generally the radii feel a bit too rounded in relation to other editor cases (ie: toolbar), and conversely, it could be neat to try some radius in the site canvas itself (the black site are that now is squared).

[SaxonF]

Inserter @pablohoneyhoney I've updated to utilise existing editor styles, including sidebar spacing of 16px. A couple of small exceptions is a softer border colour, a background colour for menu item hover states, and lighter chevron on menu items. Patterns sidebar could also just be white rather than slightly opaque grey.

https://user-images.githubusercontent.com/1072756/171351475-0c83717f-d7a9-4264-9e3e-de4127b2af71.mp4

Favourites There is future potential to make favourites editable via drag interactions

Library I just wanted to expand on the idea of the library as well. Your library represents everything you have available to you to craft your site and content. It would contain all block "types", possibly even templates, and allow people to build out and style the lego blocks of their site in isolation. It would live in the same space as the current templates page, eventually next to global styles, navigation etc. I know what's shown here uses light background instead of dark which is worth discussing.

There is room to simplify the mental model surrounding blocks, so the idea of reusable blocks would go away and just become a property of blocks/patterns (maybe all library items are synced by default). It should also differentiate between user created vs others e.g. via sections.

It has the potential to draw in new segments who are more systems focused (e.g. designers, enterprise etc).

You can read some earlier thoughts here.

https://user-images.githubusercontent.com/1072756/171385078-3c473b75-75d3-4edd-9ef3-1609892b171b.mp4

https://user-images.githubusercontent.com/1072756/171351486-fe06bcb3-bbd0-4ae8-a55b-3e4dafcd82e4.mp4

[pablohoneyhoney]

Nice!

The library itself could be a separate effort and issue all together. It also opens up a lot of other discussions and changing mental models (like the current synced blocks navigation and management versus being a property, which is interesting).

Re: the pattern inserter itself, I think we lost a bit of focus on the pattern insertion, instead of blocks' (which could remain as is for now). I also appreciated the clarity of the three panels distinguishing them via bg color (white for category listing, grey for pattern stacks, and site color for the canvas).

[SaxonF]

The library itself could be a separate effort and issue all together.

I'd be happy to setup a dedicated issue for this. There are a few separate threads like this and this that are worth pulling together.

the pattern inserter itself, I think we lost a bit of focus on the pattern insertion, instead of blocks

Any thoughts on how to do this without fragmenting the block inserter? I feel pretty strongly that we need to be designing in a way that minimises adding additional complexity to an already complex system/mental model/interface. For this reason I would hesitate to design a pattern insertion experience that differs from blocks, so I'd propose we make changes to the inserter as a whole.

The combination of generic canvas zoom settings, parent element selection on patterns, patterns absorbing child block settings, and removing tabs in the inserter as shown here feels like a great first start point for putting more emphasis on patterns without adding a dedicated mode. A lot of these changes have benefits beyond just patterns as well.

[SaxonF]

Not sold on this approach but you could split patterns out into their own panel so it becomes more of a "quickly access your library" type experience. I still prefer the single inserter approach above though, especially when considering search.

[jameskoster]

I think that's essentially how it would work in the mean time, if this feature were introduced as a part of the zoomed out view:

https://user-images.githubusercontent.com/846565/172613128-bea1ba36-43b0-462f-85af-bab3f1167e52.mp4

[SaxonF]

I think it's important block and pattern insertion works the same regardless of how the canvas is presented, at least in core. Zoom to me is really just a zoom setting as opposed to a separate view. Eg I may want to insert blocks while zoomed out or insert patterns while zoomed in.

[jameskoster]

Oh I agree. I was just highlighting that we can potentially try this (in the plugin) in that 'view' since it lends itself to working with patterns already.

[paaljoachim]

I am been thinking even broader. Making a new Media Library where the above is integrated along with media. One would be able to go to the Media library and import/export patterns, template, images etc. Going to any post/page/template to open a kind of Media Library modal with tabs where one could go between various things to add.

Here is a what if rough sketch: https://youtu.be/NJt_94eAERY

[jasmussen]

The work here is inspiring! In the hope that we might be able to take some smaller steps towards this, I tried a couple of remixes to Saxon's design, which feature varying degrees of changes. Potentially one of these might be simpler to implement as a starting point, on to better things.

First, the same general mockup but using mostly unchanged components:

Secondly, an option that moves the quick shortcuts out of the inserter, and in place of the top left toolbar buttons. You could imagine they expand out and cover the list undo/redo/list view buttons as the inserter close icons spin open:

Thirdly, an option that keeps the existing tab separation, but still with the new categorization:

The key most important bits remain the split pane design with clear category browsing, as well as the category descriptors in the preview panel.

[jameskoster]

Nice work Joen. I like your first concept because therein blocks and patterns feel like they're on equal footing, which could be important as patterns become more prevalent in different editing flows. It's hard to picture how using the accordions in this context would feel though. Maybe the pattern section should also be collapsible so that you can concentrate on blocks alone? It might be good to prototype.

I do think the tabs could work as well, if we wanted to pursue a more iterative approach.

One minor point on the quick shortcuts: the grey backgrounds could make them look disabled. Do we have icon buttons with this styling elsewhere?

Any thoughts on how these conjoined panels would work on mobile?

[jasmussen]

Definitely seeking an iterative approach here, just to see if any of the wonderful ideas can be extracted to land sooner. Even something like this which keeps the inserter exactly as it is, but adds the split-view & categorized panel could be a starting point:

In saying that, I'm also not discounting any of your feedback on collabsible etc. — just: if we hustle, can we make the patterns tab contents happen for 6.1?

One minor point on the quick shortcuts: the grey backgrounds could make them look disabled. Do we have icon buttons with this styling elsewhere?

Good point. I think, and inspired by Saxon's instincts, that there's value in differentiating them somehow as "block shortcuts". This is another style we could explore:

It's a bit more bordered, which adds noise, but it does match the style of buttons we have for "Manage library", and the style switchers in the inspector.

Or maybe the animation that makes these appear (sliding in from the left behind the rotating Inserter → X icon) is sufficient to bring attention to that area changing, making it possible to work as just icon buttons?

[mtias]

I like this one:

I wouldn't want to touch how block are presented as that adds a lot more trouble. There's value in bringing the display and browsing improvements to the pattern section first.

The row of block shortcuts in the header is a nice thing to try because it can make quickly adding common items faster yet not intrusive. We need to figure out how we handle focus since right now we move to search first. That might still make the most sense for keyboard nav, with shortcuts being more of a secondary affordance.

[jasmussen]

To those subscribed, this issue has been updated with the mockups to implement.

[kohheepeace]

First of all, sorry if this has already been discussed or requested. Just a request for this issue 👍

1: Hover is better than Select

I think it is better to “hover” each section than to “select” it in order to look for design inspiration.

Ref: https://shuffle.dev demo page

2: Avoid reloading same pattern multiple times.
Is it possible to avoid re-loading a pattern that has already been loaded?

[Just an idea to solve]

• Redux store for patterns

[kevin940726]

Is this now implemented in https://github.com/WordPress/gutenberg/pull/44028? Should we close this now, or is there anything else left to implement?

[jameskoster]

I think we can close. If anyone disagrees feel free to reopen 😁

[samiff]

Hi there 👋

In #44028 it looks like the pattern item title was visually hidden:

https://github.com/WordPress/gutenberg/blob/25aa4b41d46d8a8ab9650e79d787a9d09f0dceb3/packages/block-editor/src/components/inserter/style.scss#L314-L316

While that may work well for patterns with a lot of visual variation between them, I'm finding it a step back for patterns that are less visually striking. For example, text based patterns that look very similar to each other are a chore to locate now.

And for third-party pattern additions, I also wonder if it makes it harder in referencing those patterns for users without relying on search (e.g., Navigate to Patterns > Business Templates > ??? )

[annezazu]

@samiff -- mind opening a new issue about this and sharing a few examples? Feel free to @ me in it and I can make sure to get the right labels on it.

[mtias]

@jameskoster I'd still like to try the shortcuts in the main header when the inserter is open for text, image, etc.

[mtias]

We can still keep this close, it's a minor thing!

[jameskoster]

Okay I'll open a separate issue.