Add filter options for "site building" patterns and new categories

[kjellr]

Related to #190.

With 5.9's release, we should begin seeing more and more "Site Building" patterns like Headers, Footers, and Query blocks. Especially as themes gain the ability to host patterns in the directory and reference them in their themes (WordPress/gutenberg#35364)

In Gutenberg, these will likely be pulled in contextually depending on the section of the site the user is editing. For example, if they're editing their header, Gutenberg can pull in featured header patterns from the directory. (WordPress/gutenberg#36697, WordPress/gutenberg#28739).

In the front-end Pattern directory, the purpose and appearance of these blocks is very different from the more general patterns in the directory. It'll be a bit awkward to show them interspersed amongst each other in the general "All" feed. We should consider figuring out a way to separate these out, so that folks can browse just Site Building patterns, or just General patterns.

[jasmussen]

As a very basic effort to make our canvas not be empty, here's a quick doodle to help me better understand the needs here. Essentially, it's a filter button added to the Pattern Explorer modal:

I'm not too happy with the discoverability of this, or even the placement. But hopefully now the canvas isn't empty, the illustration might inspire conversation. Let me know and I'll be happy to follow up!

[ntsekouras]

Thanks for the mock up @jasmussen!

Currently we don't show all pattens but patterns of a specific category or the results of a search term. In addition there has been discussions in various places whether patterns should be categorized by their source (theme, plugins, block directory). The categorization is even more convoluted since themes can also register patterns from the pattern directory.

So I think the main question is how we can keep this consistent. Now we only categorize by patterns' category property, but it starts to feel like we need something like tags with a possible implementation of badges (? 🤔 ).

[jasmussen]

So I think the main question is how we can keep this consistent. Now we only categorize by patterns' category property, but it starts to feel like we need something like tags with a possible implementation of badges (? 🤔 ).

The filter dropdown was that attempt at offering ways to filter to just those from TwentyTwentyTwo or otherwise, so if you chose the "TwentyTwentyTwo" filter, any Headers on the left would be just those from that theme.

We could also do it the other way around, make the filter a subset of the category, would that be preferred? Correct me if I'm wrong but in my understanding there's also a performance concern with rendering too many patterns, or can a "Load more patterns" combined with a good sort order help that?

It might also be good to look at what Openverse does for searching and filtering.

[ryelle]

@jasmussen @ntsekouras Did you meant to post this on a gutenberg issue? You're in the pattern directory repo right now.

[ntsekouras]

@jasmussen @ntsekouras Did you meant to post this on a gutenberg issue? You're in the pattern directory repo right now.

I know but I just shared some thoughts that are still relevant for pattern directory 😄

[jasmussen]

Same 😅 — the discussion might lean Gutenbergy (apologies), but I figured there was a little overlap in both directions.

[ndiego]

This is also a little Gutenbergy, but I think categories themselves can be expanded upon. For example if a custom pattern category is registered by a theme, there could be a 'type' => 'twentytwentytwo' parameter. Similarly core WordPress categories could get 'type' => 'core'. With these parameters in place, we can then do interesting things in the Pattern Explorer to segment patterns and pattern categories in a more user friendly way. 🤔

For this PR in particular, we already have a definition for "theme blocks". Perhaps a simple filter for patterns that include theme blocks?

[jasmussen]

Coming back to this one, and particularly this part:

In the front-end Pattern directory, the purpose and appearance of these blocks is very different from the more general patterns in the directory. It'll be a bit awkward to show them interspersed amongst each other in the general "All" feed. We should consider figuring out a way to separate these out, so that folks can browse just Site Building patterns, or just General patterns.

There's a sorting mechanism on the patterns page at the moment, which simply allows you to sort by recency or amount of favorites:

I wonder if we couldn't extend that filter dropdown, like so:

[kjellr]

That seems like a cool solution to start with. I think we might as well add an "All" option under "Type" too.

[jasmussen]

Sounds good.

A small note on the mockups, the style of the submenu I've taken from the block editor as it seems like a scalable enough design. But if there's an existing custom popover design that is easier to implement, the pixels don't have to be perfect.

Similarly with the icon, I've added it to the block library Figma but it's not yet in the npm package:

But if a label is quicker and simpler to implement, that seems fine for a start. Here's the SVG:

<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17.5h4V16h-4v1.5ZM6 6v1.5h12V6H6Zm2 6.5h8V11H8v1.5Z" fill="#1E1E1E"/></svg>

[kjellr]

Now that the pattern directory is open to submissions anyway, does anyone oppose us just adding some of the Twenty Twenty-Two (or Twenty Twenty-Two-inspired) header/footer patterns in now? We can create a new "site building" category or something, and then follow up with this filter functionality later.

[beafialho]

I think it would be ok to start adding new header and footer patterns as they can be really helpful site building patterns.

[ryelle]

In WordPress/gutenberg#44501, there are now two lists of categories which distinguish between site building & universal patterns. Now we need a design for viewing these in the Pattern Directory.

@jasmussen made this browser mockup as a starting point, where the Universal & Site Building buttons would swap out the two lists of categories for filtering. I imagine this isn't meant to be a ready-to-implement design, so I'm leaving this issue "needs design."

[ryelle]

Closing in favor of #580, which has a new UI & more discussion.