Try a block-based theme, again

[ryelle]

See #518. This uses the patterns from Showcase & Developer, along with the blocks written for those sites like Query Filters, to quickly mock up a Pattern Directory using the wporg-parent-2021 theme. This is roughly referencing this figma design, though there are no plans to add the bundle feature now. Similarly, I did not add the horizontal scroll areas (ex, "more by [author]").

In the process I also fixed the pattern creator's compat issue with Gutenberg #623.

Still left to do:

• Report button & process
• Pattern count is incorrect— showing all patterns, not just current locale
• Fix responsive spacing issue in More by Designer section
• Fix single pattern preview default height (works in Firefox, not chrome/safari)
• Favorites & My Patterns need a better flow for logged out user vs just empty state
• Update the query filters on My Patterns page (should have status, not the archive filters)
• Favorite button needs to update the count on success
• In “My patterns”, users can view drafts & private patterns, but mshots can't see those to generate the preview, so we need an alternative for the thumbnail view (can likely use <!-- wp:wporg/pattern-preview /--> directly)
• Local nav isn’t highlighting current page (probably needs a wporg-mu-plugins change)
• PHP error in Rosetta sites wp_nav_menu_objects due to using a page on front? maybe need to switch to blog to build header menu? Error in ja.w.org, in es.w.org it just returns the wrong URL for News.
• Bug: "more by this author" is showing all locales (fixed in PR, need to deploy)

Out of scope for the new theme

• ❌ Search on Favorites & My Patterns
• ❌ Search by author (if possible)

UX Questions

• Should Favorites & My Patterns have search? Right now they do but it doesn’t work, so we can remove, or fix (to search within the current “favorites” or “mine”).
• The previews are now dynamic height, but CSS masonry is not supported in stable browsers, so it's laid out in rows. Alternative CSS approaches are not great (diverging from expected keyboard behavior & visual sorting), so we can either be okay with this, or add some kind of expected aspect ratio.
• Where should the action buttons go on a pattern you own? (see last screenshot)
• Should we have some copy in the footer? I dropped some content from docs that seemed helpful, but it's definitely placeholder :) Answered below.

Screenshots

The homepage, showing 12 "featured" patterns by popularity (this doesn't work on Rosetta sites, because the English variants are more popular than the locale ones). The link at the end links off to the archive, of all patterns by most recent.

Desktop	Mobile	Rosetta

Other "grid" pages, which all use the same layout. My patterns is broken, see the "todo" notes.

Archives	Favorites	My Patterns

Desktop	Mobile	Rosetta

A pattern by the current user, with action buttons in the footer. This is not using the dropdown mostly to avoid building a new block for it, so hopefully we can continue to avoid that :)

[ndiego]

Should we have some copy in the footer? I dropped some content from docs that seemed helpful, but it's definitely placeholder :)

I like the concept of the proposed placeholders. Good information about what patterns are and a CTA for creating them. @rmartinezduque, any thoughts?

Should Favorites & My Patterns have search? Right now they do but it doesn’t work, so we can remove, or fix (to search within the current “favorites” or “mine”).

Search would be nice if it's not too difficult. As an aside, I found that is impossible to search by the pattern author. If there is any way to fix this, that would be awesome.

[rmartinezduque]

I like the concept of the proposed placeholders.

I agree! If we have some flexibility, I'd only suggest making some minor edits for readability and clarity:

What’s a pattern?
A block pattern is a collection of blocks you can insert into your site and customize with your own content. Patterns save you time when composing pages of any kind and are a great way to learn how blocks can be combined to achieve specific layouts.

Regarding the "Create a pattern" copy, I'm not entirely clear what we want to convey or communicate with the following (or, in other words, what's the benefit behind it):

Themes can reference patterns from the Directory, without loading them with the theme on every site. This helps to share block patterns from one site to the next.

Would you mind sharing some more context? Thanks!

[ryelle]

Regarding the "Create a pattern" copy, I'm not entirely clear what we want to convey or communicate with the following (or, in other words, what's the benefit behind it):

Honestly I chopped this one up from this "Submit your Block Pattern" docs article. The benefit to theme authors is that they don't need to ship the pattern code in a theme (like this in Twenty Twenty-Four), but instead could just list off some pattern names that are on the directory. So a theme author could create one "Fancy Call to Action" pattern and use it in multiple themes, without duplicating that code.

[rmartinezduque]

Thanks for clarifying, @ryelle. In that case, I'd suggest something along these lines for more clarity:

Share your patterns
Showcase your creations and make them publicly available in the Block Pattern Directory. Submitting a pattern to the directory means it can be referenced in themes and easily reused across sites—without requiring theme authors to bundle pattern code with each theme.

I also noticed that the header description could be made slightly concise by eliminating the repetition of "designed":

Add a beautiful, ready-to-go layout to any WordPress site with a simple copy/paste.

[ryelle]

Status update: I've addressed the feedback from @jasmussen in #633, and those changes have been deployed. I'm waiting on a mockup of the single pattern view & grid view (removing the masonry).

I think I'm going to move to merge this PR tomorrow - it won't change anything on production, but then we can move those remaining tasks out into individual issues.