Try: Show pattern categories as a row of horizontal buttons #28353
Conversation
jasmussen
added
[Feature] Inserter
|
Size Change: -34 B (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
|
Obviously biased here, but I dig it! 😆 I love being able to jump between category views with a single click.
In my initial mockup/prototype on my original Issue, I tried out a white text on black/dark grey background similar to how we treat the block icons in the "List view" in the Editor (or the "Settings" icon in the topbar). Does this make sense to everyone? In the future, once we're able to offer multi-select, we can consider if that treatment continues to work or if we'd like to explore a different treatment (perhaps adding checkmark icons like how we do with selected items in the "More menu").
Although I do love the idea of an "All" category that allows for casual browsing and exploration, my main concern about this is that pattern loading performance would be a big issue once the Core Pattern Library grows in size. Instead, what about a "Featured" category that displays a combination of the most popular patterns along with a few new ones?
The ButtonGroup LGTM, but I'll defer to anyone else who is more familiar with Core components to make an opinionated recommendation there. As for the visual treatment, I proposed a direction in my original Issue, but I'm totally open to other thoughts if it can be improved further to better align with Gutenberg styles.
Only if the need arises—either due to character length or number of visible categories. It's fortunate that at the time of this PR, our limited set of five categories kinda perfectly fits in the width of the Sidebar Inserter! I'd personally prefer to plan for the not-too-distant future when we have way more patterns and categories to wrangle and plan to have the expanding menu. IMO, the top row of visible categories should be the most popular/frequently used ones so they're easier to access. |
I think it could work. I also think this is something we can fiddle with in the PR, see what feels right. I always tend to want to try and remove borders when I can, there might be a more minimal approach we can find. |
|
This looks good! I think we can leave off an "All" button as it's so easy to switch between the categories now. Indeed we could add multi-select later, that feels like a nicer way to do it. For the selected state I'd invert the colors (white text on dark color), and if there are more categories than fit on one line I'd say just add a second line. Thumbs up from me! |
|
This seems like a similar problem for browsing block groupings. It'd be helpful to see how this UI would work for the Blocks tab; Can we find a UI that works for both tabs? |
That'd be nice, but I think there's a challenge related to how patterns are thumbnails, making them heavier to load. For the same reason we (probably) can's show an "All patterns" filter, we probably can't show all patterns in groups like the blocks tab. And inversely, showing only one category of blocks at a time with filter chips at the top would not show the range very well. Even if we added an "all blocks" chip by default, it would remove all categorization. |
|
This looks very interesting! It makes the categories easier to see. The only thing I worry about is having 10-12 categories and how to handle all the buttons. Having two rows with buttons might work nicely as well. As @shaunandrews mentioned it would be nice to also add this feature for the Blocks. |
I don't see why that'd be true. We can list "All" blocks, and still include the section headings. And, while it seems we can't show "All" patterns, I think some sort of default group (like "Most Recent" or "Newest") would be better than defaulting to the first category. Here's how these categories could look on Blocks and Patterns:
I was curious how it'd look with 20+ categories:
At a certain point, I imagine we'd want to hide more categories behind a "Show all..." button. |
|
It feels overwhelming to see those chips on the blocks page. Theoretically we could find some reduction in the visuals, maybe text-only links and overflow handling. But even then I'd think the chips would just add noise to the blocks tab. I don't think it's problematic to have only those chips on the patterns tab, the contents of that tab are vastly different anyway and need (for technical reasons, even), a different implementation. |
|
I agree that the blocks tab content is different than the patterns tab and that having too many of these category buttons visible may add too much noise to the page, but If users have many plugins installed that have their own sets of blocks, these category buttons may actually improve browsing across categories instead of scrolling down a long list past the Core set of blocks (Text, Media, Design, Widgets, Embeds). For example: here's a side-by-side look at the current experience (long scroll) vs proposed category buttons experience looks like if a user has three plugins with their own sets of blocks (Atomic Blocks, Genesis Blocks, CoBlocks):
In my mock, I've also included a "Featured" category that could possibly include a mix of some of the top blocks from each plugin as well as top blocks from the Core set of blocks so they're easier within reach. Thoughts? |
For many, there are more blocks than patterns. If we have a way to filter patterns, then I'd also expect a way to filter blocks. As @joanrho mentions, the block categories can be super helpful if you have plugins installed that add categories, like CoBlocks. |
To an extent, that's the list of categories, and the search function. There's a technical reason to why things are the way they are, currently: we can easily show every block in a long list, but we cannot show every pattern in a long list (performance). For the time being, that is what has informed both tab designs: the belief that showing a tall vertical list of blocks in expanded categories helps show the breadth of blocks available, and through search you can find the one you need. While that particular design is, as all things are, open to being revisited, please do keep in mind the performance reason why we can't do the same for patterns. And inversely, I don't think we should "dumb down" the blocks list due to performance limitations on the patterns tab. |
|
This one has drifted enough that it would be easier to recreate from scratch, which I will happily do if it comes up again. For now, closing it. |
Takes a stab at the second half of #28312.
Note: incomplete, work in progress. I did not spend much time on this PR, it's mostly a proof of concept to test out the validity of the idea. And that idea is: by showing a horizontal list of categories instead of a dropdown, it's immediately more visible the breadth of content available as patterns:
The hope is that by letting you all try this PR out, we can evaluate whether to take the next step or not. And those next steps would include:
But it's not worth spending time on that until we decide whether this accomplishes the goal or not. So your feedback is welcome!
You can test this PR on Gutenberg.run: http://gutenberg.run/28353