Add select for filtering the pattern directory

[richtabor]

Consolidating next steps for #395 and #542. Let's add a select control for filtering pattern results at a high level.

This will introduce "Curated" and "Community" top-level filters, where "Curated" patterns are hand-picked to be surfaced front-and-center on the Patterns Directory, and eventually within the Pattern Explorer via WordPress/gutenberg#44611.

Tasks

• Add a filtering select with the options "Curated" and "Community" above the pattern categories.
• Move the sort select beside the new filter.
• Remove context bar in lieu of simpler pattern count to the right of the filters.
• Set "Curated" as the default value.
• Improve design metrics re the visuals below (could be a follow-up)

Visuals

[richtabor]

Note that the existing "Featured" category is not the same thing as this new "Curated" filter. Curated patterns should be available via the Pattern Explorer—but not necessarily within the "Featured" category.

@ryelle detailed the conditions how this currently works via a featured tag (I suppose the tag itself is a bit misleading).

[richtabor]

I think we can close #542 and #395 in favor of this implementation issue.

[ryelle]

(I suppose the tag itself is a bit misleading)

The whole this is confusing 😣 So a few questions to try to clear up some of that… "Curated patterns should be available via the Pattern Explorer" — is that different from the patterns that are by-default loaded in core? With this question, I'm trying to decide if we actually need the new featured keyword, or if we can stick with labeling everything core.

What is the purpose of the Featured category after this change, is it just a subset of curated patterns?

Remove context bar in lieu of simpler pattern count to the right of the filters.

We'll want to fix this issue #581 to make sure wayfinding works without the context bar.

This will also loose the nested context, for example when filtering inside an author:

I'm not saying this to say we need to keep the context bar, just wanted to flag that change.

[new dropdowns]

Confirming the options under the dropdowns:

• [hidden label text— what should this be called?]
  • Curated
  • Community
• [hidden label: Order by]
  • Newest
  • Popular

[richtabor]

Curated patterns should be available via the Pattern Explorer" — is that different from the patterns that are by-default loaded in core?

Ah, sorry — these are the same thing.

[hidden label text— what should this be called?]

I think "Filter by" would work fine here.

[richtabor]

I'm trying to decide if we actually need the new featured keyword, or if we can stick with labeling everything core.

Perhaps it's not needed? All curated patterns should be available inside WordPress. Eventually community patterns will as well, once there's a filter within the Pattern Explorer to select between curated and community.

[StevenDufresne]

Re: Removing the context bar

Just confirming is the pattern count on the right the pattern count of the active context (dropdowns + tab)? Assuming so, it kind of works on desktop but feels a bit separated from the final context, the tab. I'm also curious as to what that would look like on mobile. Thoughts?

[richtabor]

I'm also curious as to what that would look like on mobile.

I was thinking they'd scale fine like this:

Current	Proposed

*Edited with proper layout.

[ryelle]

I was thinking they'd scale fine like this:

The filters & "Browse categories" bar would probably need to switch positions on mobile, since the filters are above the categories on larger screens, the order should match on both screen sizes (so that it matches source order for keyboard/switch nav).

The current view has the sort after because it's technically after the menu.

I think that would still be fine, just wanted to note it.

[richtabor]

The filters & "Browse categories" bar would probably need to switch positions on mobile,

Ah yes, that's right, like this:

[jasmussen]

I'm looking forward to curation of the directory!

Just to connect some dots with some explorations I've had separately, I tried to put the curated dropdown on a single row next to the categories, like so:

It's not a strong opinion keeping them there, vs. having two dropdowns. But I feel it's a bit tighter, and manages their prominence; I personally don't expect they are dropdowns I'll be interacting with a lot.

[ryelle]

@jasmussen Does your design also remove the context bar ("223 Gallery patterns.", "3 patterns by Wes Theron.", etc)?

There's already a small bug(?) on mid-sized screens, from about 870px wide down to when the menu collapses (782px) - introducing the Wireframe category made the menu wrap:

Adding another item to this row causes the wrap to start at 960px now.

The row could wrap like this, or we could avoid the problem with @richtabor's solution.

So there's some more implementation considerations… otherwise I don't have a strong opinion on either.

I've tagged this issue as needs design feedback, just to mark that it's not ready to be implemented until a design direction is finalized.

[jasmussen]

Does your design also remove the context bar ("223 Gallery patterns.", "3 patterns by Wes Theron.", etc)?

That's this context bar, correct?

I think we can probably do better in a redesign, but for now the mockups I shared here are purely about the category bar and dropdowns, and don't touch any notices or otherwise. So they can stay as they are for now.

There's already a small bug(?) on mid-sized screens, from about 870px wide down to when the menu collapses (782px) - introducing the Wireframe category made the menu wrap:

I guess Rich's design works better there. I'm happy to go with that so we unblock it and get this moving. CC: @fcoveram

[fcoveram]

I'd go with something even more simple that doesn't hide the "Community" category. Here is a mockup

This can be reused in Themes and Plugins when we need to highlight other high-level categories, like Commercial Themes.

[ryelle]

That's #580 (comment), correct?

I think we can probably do better in a redesign, but for now the mockups I shared here are purely about the category bar and dropdowns, and don't touch any notices or otherwise. So they can stay as they are for now.

Yeah, that's right, and that's what I was thinking too (not touching the context bar until the redesign).

I'd go with something even more simple that doesn't hide the "Community" category. Here is a mockup

This also works for me, though it doesn't have the side-effect of fixing that menu wrapping bug :)

[richtabor]

Let's move forward with @jasmussen's mockup; it's the lowest effort.

[jasmussen]

Sounds good to me. I like Francisco's mockup, however we know we'll want to revisit this entire site in a refresh, so there's no reason to block this work from happening now.