Repository navigation
Pattern Inserter: Next #41379
Description
Previously #21080 (comment)
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:
- Split pane design with clear category browsing.
- Use of category descriptors in the preview panel.
- The introduction of a manage library that could accommodate both patterns and reusable blocks. (See also Proposal to rename "reusable blocks" to "synced blocks" #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: Display block shortcuts in Top Bar when Inserter is open #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
Activity
pablohoneyhoney commentedon May 27, 2022
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:
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.
SaxonF commentedon Jun 1, 2022
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.
sidebar-editor.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.
library-waterfall.mp4
library.mp4
pablohoneyhoney commentedon Jun 3, 2022
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 commentedon Jun 6, 2022
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.
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 commentedon Jun 8, 2022
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 commentedon Jun 8, 2022
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:
zoomed-out.mp4
SaxonF commentedon Jun 8, 2022
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 commentedon Jun 8, 2022
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 commentedon Jul 17, 2022
jasmussen commentedon Aug 17, 2022
jameskoster commentedon Aug 18, 2022
jasmussen commentedon Aug 18, 2022
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?
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?
3 remaining items
jasmussen commentedon Sep 28, 2022
To those subscribed, this issue has been updated with the mockups to implement.
kohheepeace commentedon Oct 5, 2022
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]
kevin940726 commentedon Oct 24, 2022
Is this now implemented in #44028? Should we close this now, or is there anything else left to implement?
jameskoster commentedon Oct 24, 2022
I think we can close. If anyone disagrees feel free to reopen 😁
samiff commentedon Nov 7, 2022
Hi there 👋
In #44028 it looks like the pattern item title was visually hidden:
gutenberg/packages/block-editor/src/components/inserter/style.scss
Lines 314 to 316 in 25aa4b4
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 commentedon Nov 7, 2022
@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 commentedon Nov 10, 2022
@jameskoster I'd still like to try the shortcuts in the main header when the inserter is open for text, image, etc.
mtias commentedon Nov 10, 2022
We can still keep this close, it's a minor thing!
jameskoster commentedon Nov 11, 2022
Okay I'll open a separate issue.