Twenty Twenty: Update theme to add Gutenberg styles separately and on-demand

[westonruter]

I just discovered that the Twenty Twenty theme is lacking wp-block-styles support. This is surprising because both Twenty Nineteen (ref) and Twenty Twenty-One (ref) both had support as part of their initial commits, but not for the initial commit for Twenty Twenty.

The previous core themes all added support in separate tickets:

• #45038: Twenty Ten
• #45039: Twenty Eleven
• #45040: Twenty Twelve
• #45041: Twenty Thirteen
• #45042: Twenty Fourteen
• #45043: Twenty Fifteen
• #45044: Twenty Sixteen
• #45045: Twenty Seventeen

The missing wp-block-styles theme support didn't seem to have any effect on Twenty Twenty because on the frontend this only has mattered if wp_should_load_separate_core_block_assets() returns true in in which case separate stylesheets are registered for each block in register_block_type_from_metadata().

The wp-block-library-theme stylesheet also gets enqueued via wp_common_block_scripts_and_styles() when the theme supports wp-block-styles (and wp_should_load_separate_core_block_assets() returns false).

With #64099 and #64150, the lack of wp-block-styles theme support means that a theme cannot benefit from a reduction of CSS by inlining block styles on demand and having them hoisted to HEAD via the template enhancement output buffer (#43258).

[sabernhardt]

The wp-block-styles theme support is only for themes that opt in to the opinionated theme.scss block styles.
​https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#opinionated-block-styles

Twenty Twenty never added those, and it would change the way existing sites display content. I expect the extra stylesheet would also cause several new problems for anyone who has used custom colors or font sizes, because the theme did not need to override any opinionated styles.

[westonruter]

@sabernhardt Yes, I can see a styling impact with this, for example on the Sample Page the quote blocks render differently.

Diffs of the Sample Page HTML on 6.8 and trunk with and without wp-block-styles theme support: ​https://gist.github.com/westonruter/0a4b7a2d8560a3391f4e1eaf07d2dc4f

The problem is that wp-block-styles apparently is not only used as a signal for whether opinionated block styles are added. In particular, register_block_type_from_metadata() will only register block-specific stylesheets when that theme support is present:

<?php
if ( current_theme_supports( 'wp-block-styles' ) && wp_should_load_separate_core_block_assets() ) {
        $metadata['style']   = (array) $metadata['style'];
        $metadata['style'][] = "wp-block-{$block_name}-theme";
}

With #64099, classic themes are automatically opted-in to should_load_separate_core_block_assets. But without wp-block-styles then this benefit is lost for Twenty Twenty due to the above logic. When that theme support is present, however, the amount of CSS added to the Sample Page page is drastically reduced from 270KB to 136KB, almost a 50% reduction!

I want to find some way to make this work.

[sabernhardt]

No themes should need an unwanted stylesheet to reduce overall CSS. That would be a serious problem with #64099, which was just opened in the last week of 6.9-alpha.

[westonruter]

@sabernhardt I don't meant to force wp-block-library-theme to be included, but rather find a way to opt in to loading specific block styles on demand without also adding that unwanted stylesheet. The whole point is to only enqueued the styles which are wanted, and none that aren't.

[westonruter]

Well, this does the trick but it's not ideal:

src/wp-content/themes/twentytwenty/functions.php

@@ -111 +111 @@
                 )
         );
 
+        /*
+         * As of 6.9, classic themes default to loading block styles on demand by hosting them from the footer to the head.
+         * Block styles are only registered separately for each block in register_block_type_from_metadata() when the theme
+         * also supports 'wp-block-styles'. Nevertheless, this also hase the effect of enqueueing the block theme styles.
+         * Since Twenty Twenty never adopted these block theme styles, any such styles need to be excluded from being
+         * printed.
+         */
+        if ( version_compare( $GLOBALS['wp_version'], '6.9-beta2', '>=' ) ) {
+                add_theme_support( 'wp-block-styles' );
+
+                add_filter(
+                        'print_styles_array',
+                        static function ( $handles ) {
+                                // This undoes <https://github.com/WordPress/wordpress-develop/blob/781fb28d4773147edb17b0fd7eefa52671b5daa6/src/wp-includes/script-loader.php#L2480>.
+                                $handles = array_diff(
+                                        $handles,
+                                        array( 'wp-block-library-theme' )
+                                );
+
+                                // This undoes <https://github.com/WordPress/wordpress-develop/blob/781fb28d4773147edb17b0fd7eefa52671b5daa6/src/wp-includes/blocks.php#L511>.
+                                return array_filter(
+                                        $handles,
+                                        static function ( $handle ) {
+                                                return ! preg_match( '/^wp-block-.+?-theme$/', $handle );
+                                        }
+                                );
+                        }
+                );
+        }
+
         // Add support for full and wide align images.
         add_theme_support( 'align-wide' );

It would be preferable to decouple wp-block-styles theme support from wp_should_load_separate_core_block_assets().

This is not a serious proposal for core merge, but it is a POC that shows the desired outcome: a dramatic reduction (50%) in the amount of CSS added to a page (e.g. Sample Page) in Twenty Twenty.

Trac ticket: https://core.trac.wordpress.org/ticket/64166

[westonruter]

A better alternative which I haven't fully fleshed out yet:

src/wp-includes/blocks.php

@@ -506 +506 @@
                 if ( ! isset( $metadata['style'] ) ) {
                         $metadata['style'] = "wp-block-$block_name";
                 }
-                if ( current_theme_supports( 'wp-block-styles' ) && wp_should_load_separate_core_block_assets() ) {
-                        $metadata['style']   = (array) $metadata['style'];
-                        $metadata['style'][] = "wp-block-{$block_name}-theme";
+                if ( wp_should_load_separate_core_block_assets() ) {
+                        $metadata['style'] = (array) $metadata['style'];
+                        if ( current_theme_supports( 'wp-block-styles' ) ) {
+                                $metadata['style'][] = "wp-block-{$block_name}-theme";
+                        }
                 }
                 if ( ! isset( $metadata['editorStyle'] ) ) {
                         $metadata['editorStyle'] = "wp-block-{$block_name}-editor";

With #64150, however, Twenty Twenty would also need to explicitly opt-in to with:

<?php
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
add_filter( 'should_load_block_assets_on_demand', '__return_true' );

Since as of r61076, wp_load_classic_theme_block_styles_on_demand() only does that when the theme supports wp-block-styles.

Ultimately, the scope for this ticket is no longer about adding wp-block-styles theme support to Twenty Twenty, but rather about ensuring that themes which don't explicitly opt-in to wp-block-styles are still able to benefit from styles being loaded separately and on-demand.

[westonruter]

I see this is also an issue with the Astra theme and any other that doesn't add the wp-block-styles theme support.

[westonruter]

Replying to westonruter:

A better alternative which I haven't fully fleshed out yet:

I'm mistaken here. I misread the logic in register_block_type_from_metadata(). Separate block styles are being registered even when the theme doesn't support wp-block-styles. It's just that the block theme style is only getting registered as well when current_theme_supports( 'wp-block-styles' ) && wp_should_load_separate_core_block_assets().

[westonruter]

See 64099#comment:30.

[westonruter]

In 61122:

Script Loader: Load block styles on demand in classic themes even when wp-block-styles support is absent.

This reverts part of [61076] which made wp-block-styles theme support a precondition for opting in to should_load_separate_core_block_assets and should_load_block_assets_on_demand. This meant that the Twenty Twenty theme (and other themes without this support declared) would not benefit from on-demand block style loading. Nevertheless, even though such themes were not getting block styles loaded on demand, the wp_load_classic_theme_block_styles_on_demand() function was proceeding to opt in to the output buffer for hoisting late-printed styles, even though it was unlikely there would then be any. This meant the template enhancement output buffer was being opened for no reason.

Enabling on-demand block style loading is measured to improve FCP and LCP in Twenty Twenty, for example a ~13% improvement over a Fast 4G connection when loading the Sample Page.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10457

Follow-up to [61008], [61076], [60936].

Props westonruter.
See #64099, #64150, #64166, #43258.