Making WordPress.org

Opened 18 months ago

Closed 9 months ago

#5995 closed defect (bug) (fixed)

Theme Block Pattern Demo

Reported by: courane01's profile courane01 Owned by:
Milestone: Priority: normal
Component: Theme Directory Keywords: has-patch
Cc:

Description

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?

Attachments (3)

5995.add_to_db.patch (1.9 KB) - added by dufresnesteven 11 months ago.
This patch adds a meta value, _patterns, if theme.json is detected and "get_patterns" returns patterns.
Screen Shot 2022-07-06 at 10.04.42 PM.png (508.4 KB) - added by dufresnesteven 11 months ago.
5995.patch (6.5 KB) - added by dufresnesteven 11 months ago.

Download all attachments as: .zip

Change History (20)

#1 @kafleg
18 months ago

Isn't this is similar with this tickets,

#30
#969

Last edited 18 months ago by SergeyBiryukov (previous) (diff)

#2 @dufresnesteven
15 months ago

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.

#3 @poena
11 months ago

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
11 months ago

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

#4 @dufresnesteven
11 months ago

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?

This ticket was mentioned in PR #83 on WordPress/wordpress.org by StevenDufresne.


11 months ago
#5

  • Keywords has-patch added

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

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

adamwoodnz commented on PR #83:


11 months ago
#6

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:
https://i0.wp.com/user-images.githubusercontent.com/1017872/177898301-ee39393e-7728-4654-a42f-30e259cf67c0.jpg

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 commented on PR #83:


11 months ago
#7

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 commented on PR #83:


11 months ago
#8

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

mtias commented on PR #83:


11 months ago
#9

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

StevenDufresne commented on PR #83:


11 months ago
#10

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.

#11 follow-up: @kafleg
11 months ago

@dufresnesteven

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

Patterns (5)

Something like that?

#12 in reply to: ↑ 11 @dufresnesteven
11 months ago

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.

#13 @uxl
11 months ago

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.

Last edited 11 months ago by uxl (previous) (diff)

#14 @uxl
11 months ago

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;
}

#15 @dufresnesteven
11 months ago

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


10 months ago

#17 @dufresnesteven
9 months ago

  • Resolution set to fixed
  • Status changed from new to closed

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!

Note: See TracTickets for help on using tickets.