Patterns: Connect "Explore" to pattern directory

[jasmussen]

Issue #41379 (underway in #44028) brings a new flyout to the patterns tab of the inserter:

In #44585 this is further enhanced by zooming out the main canvas when the tab is selected, and #44501 curates the pattern categories and which are included. These incoming changes provide good context for reconsidering the "Explore" modal, which currently shows the same patterns that are shown in the main inserter, providing limited utility beyond the more convenient overview.

Inserter	Explore modal

This provides an opportunity to recast the modal to instead become an access point to the WordPress Pattern Directory. It could look like this:

• Show search and categories in the left sidebar as per usual (see also Revisiting / contextualising pattern categories, and default inclusions #44501)
• Shows "Pattern Directory" as title
• Shows filter button in the top corner to toggle between "Newest" and "Popular"

[javierarce]

This is a nice improvement, and I can imagine we could incorporate more functionalities in the future (like the responsive preview, filtering by the author, or the report link).

I see there's a red heart in your last asset, does it mean users could favorite published patterns from this interface?

[jasmussen]

Mainly it's a screenshot from the directory as it exists. I think we can have as little or as much of the existing functionality in the modal, providing a development gradient to start simple if need be.

[jameskoster]

Shows filter button in the top corner to toggle between "Newest" and "Popular"

I'm not sure I would intuit the Filter icon to be connected to this functionality. Newness and Popularity seem more like ordering mechanisms, a simple "Order by:" dropdown might work better?

Definitely not essential for v1, but it would be nice to offer a way to customise the grid (number of columns) by way of zooming.

[jasmussen]

a simple "Order by:" dropdown might work better?

We can start with that, but I think the filter icon works well enough for what it is, and balances the prominence nicely enough.

[jasmussen]

Based on the feedback, I'm moving this to the Dev category, we can work any questions like the filter button out in a PR, which is already underway.

[mtias]

Since we are combining the library explorer, I'd like to see a toggle control within the modal sidebar between "Featured | Community". Featured is bundled patterns by core, what we currently ship curated to be the most polished designed we can muster.

The wording is just an example, it could also be "Directory" or something else.

[annezazu]

In chatting with @elmastudio about this future implementation, she had some great insights to share that, when this work gets underway that touches on the feedback @javierarce shared above:

Right now it’s not possible to filter patterns from the library by author inside of WordPress (it’s only possible on the WordPress.org website). So it’s impossible to build a set of patterns working together and have a user filter them together. Instead of filter by author, it would actually even be better to have pattern sets/kits with unique names and be able to filter them. This way one author can build multiple sets. I’m thinking of a patterns design set with one name. This could work together with a theme or be used theme independent.

[annezazu]

Wanted to note that this can be deprioritized for 6.2 since we're coming too close to feature freeze to get this done in time.

[colorful-tones]

It would be super to see third-party patterns get some attention. #32696

[talldan]

It'd be good to get a double-check on whether this issue is still relevant and up to date before a dev picks it up, as some time has passed.

In particular, does the new Pattern screen change anything? There might be a desire for some parity across the modal and the screen.

[jameskoster]

I think it's still relevant, as the pattern explorer modal remains disconnected from the directory so far as I can see. But it probably needs an update, taking into account the latest patterns work.

[annezazu]

Noted as needs design :)