Theme Block Pattern Demo

[courane01]

It would be delightful when browsing themes in the directory to get a sense of all block patterns that come with a theme. Can this be improved via the theme demo interface?

[kafleg]

Isn't this is similar with this tickets,

#30
#969

[dufresnesteven]

Are there any themes that you know of that would be a good example of what should be surfaced?

In the plugin directory, we do surface blocks based on the presence of block.json files I beleive.

[poena]

There are several ways for a theme to add patterns.

Twenty Twenty-Two for example has a large amount of patterns and registers them using
​https://developer.wordpress.org/reference/functions/register_block_pattern/

Pattern files can also be placed inside a patterns folder.

Maybe as a first step it could be limited to patterns from the pattern directory, since these patterns can be linked to and previewed already.

Themes lists these patterns in theme.json, using this format:
​https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#patterns
​https://themes.trac.wordpress.org/browser/jace/1.0.6/theme.json#L576

[dufresnesteven]

This patch adds a meta value, _patterns, if theme.json is detected and "get_patterns" returns patterns.

[dufresnesteven]

I have uploaded a 2 patches:

In 5995.add_to_db.patch​, I've added code that will save a meta value called _patterns which is an array of patterns taken from a theme.json file. @poena suggested, these are patterns that are currently hosted in the pattern directory.

In 5995.patch​ I've added a more robust solution where the patterns are then added to theme-single.php and the accompanying JS code and displayed. I decided to put very little effort into the design seeing that the theme directory itself is subject to potentially significant changes in the new wordpress.org redesign project that appears to be taking shape. I also think taking a minimal strategy at first is best until we build out more sophisticated ways to identify patterns in themes.

The outcome of 5995.patch​ looks like:

What do ya'll think?

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 implement or experience.

# 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)

### 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)
  • Store result as repopackage meta data
• Cron Job
  • I don't think any exist yet
• 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")

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.

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.

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

Note that themes can auto-register patterns by placing them in a /patterns folder with the appropriate headers: ​https://github.com/WordPress/gutenberg/pull/36751

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 is 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.

[kafleg]

@dufresnesteven

Can we display the number of patterns used in that theme as well?

Patterns (5)

Something like that?

[dufresnesteven]

Replying to kafleg:

@dufresnesteven

Can we display the number of patterns used in that theme as well?

Patterns (5)

Something like that?

Yep, that would be a nice improvement.

[uxl]

This is awesome!

There seems to be an issue with full width and wide patterns are restricted to the narrower default content size, and so do not go wider than this.

Possibly because of the additional divs wrapping the pattern content:

<div id="wporg-pattern-preview">
  <div>
    pattern content here, if full/wide then is restricted due to the two wrapper elements
  </div>
</div>

This is only on the full page wp-themes.com preview. The repository preview thumbnail list looks good.

[uxl]

Something like this would be a quick fix, but I'm not sure where to report this for the wp-themes.com theme preview.

#wporg-pattern-preview,
#wporg-pattern-preview > div {
  max-width: none;
}

[dufresnesteven]

Hi @uxl!

Thanks commenting! Yeah I am looking into that, and a few other quirks with theme styles not loading.

Ideally, we don't apply any resetting styles but max-width: unset is probably the best approach in the short term as it probably works for more themes than the current constrained layout.

[dufresnesteven]

I'm going to close this since we now have the ability to see patterns that are bundled with themes. If there is any follow-up, we can open a ticket with a more specific action item.

Thanks!