Editing Toolkit / Patterns: Support skipping registering patterns with a requires-align-wide tag

[andrewserong]

This PR is designed to skip registering patterns that require full width support, when the site's currently active theme doesn't support full width. It will help avoid the issues described in #47565 and #46215.

Changes proposed in this Pull Request

• When registering block patterns via the API, parse the pattern's tags, and for any tags beginning with requires-, use the remainder of the tag to look up theme features. If the theme does not support the feature, then skip registering the pattern.
• For example, we should skip registering patterns with the tag requires-align-wide on themes that don't support align-wide.

Screenshots

In a theme that supports align-wide we should still see the images-2 pattern under the Gallery category in the inserter:

The following screenshot is from a test site using the Maywood theme, which has support for align-wide:

In a theme that does not support align-wide we should not be able to see the images-2 pattern under the Gallery category in the inserter.

The following screenshot is from a test site using the Hemingway Rewritten theme, which does not have support for align-wide. Note that in the screenshot I'm highlighting the pattern below the one in the above screenshot, showing that it no longer appears:

Testing instructions

• Before we can test this, the tag needs to be added to the appropriate patterns. I'll add the tag once we have consensus on the approach. The approach is described in more detail in Patterns Toolkit: should we hide certain patterns if theme features aren't available #47565 — Update: I have added the requires-align-wide tag to the main pattern from the original issue (images-2).

How to test

1. In apps/editing-toolkit run yarn dev --sync to sync to your sandbox
2. In your sandbox's 0-sandbox.php file add the following to ensure you're using fresh results from the patterns API that include the appropriate tags:

define( 'WP_DISABLE_PATTERN_CACHE', true );

3. With your test site sandboxed, and using a theme with align-wide support (e.g. any of the suggested themes / Varia child themes such as Maywood), go to edit a post or page, click the inserter and in the Patterns tab, under the Gallery category you should see the pattern with the title "Images" and the text within the pattern will include "5am, the beach". It should look like the top-most screenshot in this PR.

4. Switch your theme to one that does not support align-wide (e.g. Hemingway Rewritten) and open up a post. In the inserter, under the Gallery category, you should not be able to see the pattern in question ("Images")

Fixes #47565

[matticbot]

Test live: https://calypso.live/?branch=fix/hide-patterns-requiring-full-width-alignment

[matticbot]

Caution: This PR affects files in the Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D53001-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing the Editing Toolkit Plugin for more info: PCYsg-ly5-p2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[ramonjd]

Question: if we're expecting a specific tag anyway, might a future optimization be (assuming they'll be more of such theme exceptions) something like requires_{ $feature }, and then

	private function can_register_pattern( $pattern ) {
        foreach( $pattern['tags'] as $tag ) {
            $exploded_tag = explode( 'requires_', $tag );
            if ( $exploded_tag[1] ) {
                return false !== get_theme_support( $exploded_tag[1] )
            }
        }
		return true;
	}

Very willing to be accused of over-thinking things! :D

[andrewserong]

@ramonjd I actually quite like that. I'll have a play with it now, because it seems fairly safe and will also future proof it for any similar situations (the issue can be resolved by adding / removing tags, rather than requiring further code changes). Initially I thought it'd be better to cache the get_theme_support feature rather than call it on every pattern (since we'll have > 100 patterns), but from looking at how get_theme_support is implemented, it's an associative array lookup rather than looping over anything, so seems like it shouldn't be too expensive.

It just means we'd use the tag requires-align-wide instead of requires_align_wide so that we're hyphenating correctly.

[ramonjd]

Initially I thought it'd be better to cache the get_theme_support feature rather than call it on every pattern (since we'll have > 100 patterns),

Ah yeah, good point. That totally escaped me.

Anyway, it's just an idea seeing as we're expecting a specific string regardless.

Sorry if I threw an implementation pepper into the soup!

[andrewserong]

No, no, it's a good idea, thank you! Better to spend a little bit longer getting it right now, so that we can save some time further down the track 😀

[andrewserong]

Thanks for the feedback @ramonjd! I've updated this to use the simplified approach you suggested that also supports arbitrary features based on the tag's slug. I went with preg_split instead of explode so that we can match on the beginning of the slug.

I've also updated the patterns to use a requires-align-wide tag for the main problematic pattern, so this PR can now be tested, so it is now ready for a review 😀

[ramonjd]

Nice job! Works according to test instructions

Maywood
Pattern is full-width

Hemingway Rewritten
Pattern does not appear in the Patterns Inserter