Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kjellr opened this issue Jan 26, 2022 · 14 comments
Closed

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

kjellr opened this issue Jan 26, 2022 · 14 comments
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI [Status] Needs Design

Comments

@kjellr
Copy link
Collaborator

kjellr commented Jan 26, 2022

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
Copy link

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:
Filtering patterns

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
Copy link

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
Copy link

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
Copy link
Contributor

ryelle commented Feb 16, 2022

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

@ntsekouras
Copy link

@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
Copy link

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

@ndiego
Copy link
Member

ndiego commented Feb 17, 2022

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
Copy link

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:

Before, able to sort by newest and most favorited

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

After, able to also subfilter

@kjellr
Copy link
Collaborator Author

kjellr commented Feb 25, 2022

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

@jasmussen
Copy link

Sounds good.

Screenshot 2022-02-28 at 08 46 16

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:
Screenshot 2022-02-28 at 08 47 54

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
Copy link
Collaborator Author

kjellr commented Apr 13, 2022

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
Copy link
Collaborator

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

@ryelle
Copy link
Contributor

ryelle commented Nov 22, 2022

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 ryelle added this to the Update Categories & Nav milestone Nov 22, 2022
@ryelle ryelle added the [Component] Theme The frontend of the pattern directory, pattern lists UI label Nov 22, 2022
@adamwoodnz adamwoodnz self-assigned this Nov 29, 2022
@ryelle ryelle changed the title Figure out a way to categorize and show "site building" block patterns Add filter options for "site building" patterns and new categories Jan 3, 2023
ryelle added a commit that referenced this issue Jan 6, 2023
Fetch all categories, then filter out just the categories we want to show.

This is a workaround until there is a design for #395, so that we can create the new categories in the backend without bleeding over into the frontend nav.

See #190.
@adamwoodnz adamwoodnz removed their assignment May 31, 2023
@ryelle
Copy link
Contributor

ryelle commented Jun 5, 2023

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

@ryelle ryelle closed this as not planned Won't fix, can't repro, duplicate, stale Jun 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI [Status] Needs Design
Projects
None yet
Development

No branches or pull requests

7 participants