Show patterns in theme directory.

[StevenDufresne]

I've opened up this PR as a place for discussion on https://meta.trac.wordpress.org/ticket/5995. While this PR comes with code updates, it's purely experimental and not necessarily the best implementation or experience. I would have preferred to use an issue but they are closed for this repository and having the discussion in trac feels a bit limiting.

Assumption

It would be helpful for users to be able to preview patterns that are bundled with themes in the theme directory.

Details

How can we detect patterns?

Static code analysis

• Search for:
  • register_block_pattern (JS, PHP)
  • theme.json (Link)
  • /patterns (Link)

Dynamic analysis (with running environment)

• JS: wp.data.select('core').getBlockPatterns() (Link)
• PHP: WP_Block_Patterns_Registry::get_all_registered() (Link)

When can we detect patterns?

• Theme Upload
  • class-wporg-themes-upload.php (Static) (Link)
  • Get Results from Theme Review Action (Dynamic) (Link)
• Cron Job
  • I don't think any exist yet

... store results in meta for repopackage...

• Dynamically on page load
  • This would only work for the Theme Preview since it has a running environment when the user interacts with it.

Where could we show patterns?

Theme Directory

• Directory View (Link)
• Single Theme View (Link)
• Theme Preview (Link -> Click "Preview Button")

Ideas

The theme directory is likely to undergo a redesign in the next year or so. If we want to get something up before that completes, which probably makes sense, we should aim to make the most minimal changes.

Directory View

We could add Icons to the theme tile to denote that a theme bundles patterns.

A	B

Single Theme View

We can add a section below the tags. It could be a list of the pattern names or could also use pattern directory previewer. If so, It would have to have some sort pagination control experience since some themes bundle 10+ patterns.

Theme Preview

What if we give a navigation item that users can click that loads a dynamically generated page with all the patterns? I've added blocks to the menu just as an example.

[adamwoodnz]

For the Single Theme view, even simpler than using a pattern preview could be having a carousel of patterns, with each pattern using something like a pattern grid item:

I'm not sure if having all the functionality of the preview is necessary here (drag to resize, etc.), although I guess that could be disabled.

[adamwoodnz]

I think all these ideas have merit. If we were to have a Patterns view from the Theme Preview page that could probably use a pattern grid too.

[adamwoodnz]

On theme upload seems the most efficient, as long as that lifecycle runs every time a theme is changed.

[mtias]

Note that themes can auto-register patterns by placing them in a /patterns folder with the appropriate headers: WordPress/gutenberg#36751

[StevenDufresne]

For the Single Theme view, even simpler than using a pattern preview could be having a carousel of patterns, with each pattern using something like a pattern grid item: [...]

I'm not sure if having all the functionality of the preview is necessary here (drag to resize, etc.), although I guess that could be disabled.

Just noting, we don't have screenshots of patterns yet, and the image you shared uses the underlying control of the pattern preview control, without the controls.

On theme upload seems the most efficient, as long as that lifecycle runs every time a theme is changed.

Yep, new uploads and updates to themes are centralized.