Making WordPress.org

Opened 2 years ago

Closed 22 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 2 years 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 2 years ago.
5995.patch (6.5 KB) - added by dufresnesteven 2 years ago.

Download all attachments as: .zip

Change History (20)

#1 @kafleg
2 years ago

Isn't this is similar with this tickets,

#30
#969

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

#2 @dufresnesteven
2 years 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
2 years 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
2 years ago

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

#4 @dufresnesteven
2 years 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?

@dufresnesteven
2 years ago

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


2 years 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:


2 years 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:


2 years 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:


2 years 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:


2 years 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:


2 years 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
2 years 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
2 years 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
2 years 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>
Version 1, edited 2 years ago by uxl (previous) (next) (diff)

#14 @uxl
2 years 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
2 years 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.


23 months ago

#17 @dufresnesteven
22 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.