Inserter: Display patterns in a two-column masonry grid with improved category filtering

[joanrho]

What problem does this address?

The current single column layout of pattern thumbnails in the Patterns tab of the Sidebar Inserter makes it arduous to scroll through and view many patterns at once, especially if there are many patterns within a category. The category dropdown menu requires two clicks to change the category view which feels a bit clunky and slow when browsing patterns.

What is your proposed solution?

This proposed direction displays patterns in a two-column masonry grid (to accommodate the varying heights of the designs) with category filter links so users can immediately get a sense of the breadth of categories offered and jump between category views with a single click. Here, I’m pulling example categories from WordPress.com where there are far more (~14) than in the Core Editor (~5)—both may have an extra category named after the current active Theme if there are patterns registered by that Theme.

These category filter links can be iterated on further once we’re able to offer multi-select category filtering in the future when pattern loading performance is optimized.

[jasmussen]

I took a stab at the two column setup in #28322, I think that's worth trying as a first step.

Personally I find that it's okay the thumbnails are small — it gives me a better overview of what's there, and I genuinely feel like they would have to be way bigger, in order for me to be able to judge them solely by the thumbnail. With the added drag and drop, and the inserter not closing on its own, this feels worth trying.

---

Regarding the category chips, it all comes down to the amount of patterns present. When there are only a few, the categories feel less important. But as that starts ballooning, the breadth of available options may be lost in that dropdown. In that vein expanding to a horizontal strip of categories feels like a basic step to explore, in that it allows you to flip through the available patterns in fewer clicks than were they in a dropdown.

I think there's some simplicity to be found in the chip design, perhaps fewer borders, perhaps a simpler visual treatment. But this is so little CSS that it's trivial to try and tune in a PR. I can look at that tomorrow (sans the expand/collapse functionality), it shouldn't take long and in testing it in a PR, we can decide whether the idea works in practice. If not, we will have cauterized that avenue of exploration, that's always good!

[pablohoneyhoney]

I don’t fully know if the two columns solve much at this point, as the number of patterns is not that high yet. What are we optimizing for? The point about being arduous to scroll through and view many patterns at once is more applicable to the above masonry style, as I have to scan both horizontal and vertically. I wonder what the benefit is for keyboard browsing.
The trade-offs (scanning only vertically, clarity of the pattern, the scale of the content) seem too heavy.

It could make sense in the future to consider an expanded browsing flipping though in context, it seems we have other advancements to make first.

[jasmussen]

A thing I like about this, is that both ideas are easy to build and test. I spent a few minutes today trying 2 columns, and I'll also try the horizontal exploded list of categories. In testing those PRs we can see if they pass the smell test or not, and go from there.

Joan mentions additional patterns on WP.com as inspiration for the overview. Since the 2-column change is CSS-only, we could extract that and test it there in a light-weight fashion.

[hedgefield]

This is an interesting idea to explore. I'll hold off on actual feedback until @jasmussen has the test examples to show, but one thing I was thinking about while reading this is that the patterns are really going to need borders if we do this. Most of them have white backgrounds, and on a white inserter window it becomes impossible to tell which parts belong to which pattern.

[jasmussen]

I quickly put together #28353, which is purely in a proof of concept state with no polished design. The goal is to figure out: do we like these two approaches or not? Do we like one, not the other?

Hopefully by testing these out, we can get a feel for the idea outlined in the thread.

• Test 2 columns of patterns in the inserter: Gutenberg.run, Pull request
• Test a horizontal row of categories: Gutenberg.run, Pull request

[joanrho]

Once we add more patterns to the Core Editor, the need for changes like this may be more apparent. If you'd like to test what that experience looks and feels like today, just spin up a test site on WordPress.com and browse the patterns and categories in the Sidebar Inserter. "Text" or "Images" are good examples of categories with many designs to scroll through, though the number of patterns in each (and the number of overall category types) will only increase going forward as we create more. Here's a demo gif to save you a trip.

Joen, thanks so much for quickly testing out these ideas in PRs. Both directions look and feel great to me, but I'll reply with more detailed feedback on each of those PRs.

[hedgefield]

Thanks for the tests @jasmussen, they look great, left comments in the PRs!

[paaljoachim]

I do believe that what is ended up being added can also be transferred over to the Reusable block tab, as these are a kind of pattern as well. Here is an old issue: #7608

[andrewserong]

@joanrho I've been wondering if we might want to look into adding support for displaying an icon next to pattern titles in the inserter. I've made a start at exploring how this might work in #29022 — I'm not sure if other folks think it's worthwhile pursuing, but I thought it'd be helpful to get a Draft PR going!

If we did want to add any indicators or icons next to pattern titles in a two column layout in the inserter, do you think there's a good way to make it work, or would it look too cluttered?

[richtabor]

I really like this idea, exploring patterns in the pattern library is still clunky - its definitely worth exploring this more.

[mtias]

This is no longer relevant with the latest designs.