Changeset 61122

Timestamp:

11/04/2025 07:53:24 AM (10 months ago)

Author:

westonruter

Message:

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.

Location:

trunk

Files:

• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/template.php (modified) (3 diffs)

trunk/src/wp-includes/script-loader.php

@@ -3578 +3578 @@
  *
  * @since 6.9.0
+ *
+ * @see _add_default_theme_supports()
  */
 function wp_load_classic_theme_block_styles_on_demand() {
+        // This is not relevant to block themes, as they are opted in to loading separate styles on demand via _add_default_theme_supports().
         if ( wp_is_block_theme() ) {
                 return;
@@ -3591 +3594 @@
         add_filter( 'wp_should_output_buffer_template_for_enhancement', '__return_true', 0 );
 
+        // If a site has opted out of the template enhancement output buffer, then bail.
         if ( ! wp_should_output_buffer_template_for_enhancement() ) {
                 return;
         }
 
+        // The following two filters are added by default for block themes in _add_default_theme_supports().
+
         /*
-         * If the theme supports block styles, add filters to ensure they are loaded separately and on demand. Without this,
-         * if a theme does not want or support block styles, then enabling these filters can result in undesired separate
-         * block-specific styles being enqueued, though a theme may also be trying to nullify the wp-block-library
-         * stylesheet.
-         */
-        if ( current_theme_supports( 'wp-block-styles' ) ) {
-                /*
-                 * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally,
-                 * and so that block-specific styles will only be enqueued when they are used on the page.
-                 */
-                add_filter( 'should_load_separate_core_block_assets', '__return_true', 0 );
-
-                // Also ensure that block assets are loaded on demand (although the default value is from should_load_separate_core_block_assets).
-                add_filter( 'should_load_block_assets_on_demand', '__return_true', 0 );
+         * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally,
+         * and so that block-specific styles will only be enqueued when they are used on the page.
+         * A priority of zero allows for this to be easily overridden by themes which wish to opt out.
+         */
+        add_filter( 'should_load_separate_core_block_assets', '__return_true', 0 );
+
+        /*
+         * Also ensure that block assets are loaded on demand (although the default value is from should_load_separate_core_block_assets).
+         * As above, a priority of zero allows for this to be easily overridden by themes which wish to opt out.
+         */
+        add_filter( 'should_load_block_assets_on_demand', '__return_true', 0 );
+
+        // If a site has explicitly opted out of loading block styles on demand via filters with priorities higher than above, then abort.
+        if ( ! wp_should_load_separate_core_block_assets() || ! wp_should_load_block_assets_on_demand() ) {
+                return;
         }
 

trunk/tests/phpunit/tests/template.php

@@ -1394 +1394 @@
         public function data_wp_load_classic_theme_block_styles_on_demand(): array {
                 return array(
-                        'block_theme'                                => array(
+                        'block_theme'                              => array(
                                 'theme'                   => 'block-theme',
                                 'set_up'                  => static function () {},
-                                'expected_on_demand'      => false,
+                                'expected_load_separate'  => true,
+                                'expected_on_demand'      => true,
                                 'expected_buffer_started' => false,
                         ),
-                        'classic_theme_with_output_buffer_blocked'   => array(
+                        'classic_theme_with_output_buffer_blocked' => array(
                                 'theme'                   => 'default',
                                 'set_up'                  => static function () {
                                         add_filter( 'wp_should_output_buffer_template_for_enhancement', '__return_false' );
                                 },
+                                'expected_load_separate'  => false,
                                 'expected_on_demand'      => false,
                                 'expected_buffer_started' => false,
                         ),
-                        'classic_theme_with_block_styles_support'    => array(
+                        'classic_theme_with_should_load_separate_core_block_assets_opt_out' => array(
                                 'theme'                   => 'default',
                                 'set_up'                  => static function () {
-                                        add_theme_support( 'wp-block-styles' );
-                                },
+                                        add_filter( 'should_load_separate_core_block_assets', '__return_false' );
+                                },
+                                'expected_load_separate'  => false,
+                                'expected_on_demand'      => true,
+                                'expected_buffer_started' => false,
+                        ),
+                        'classic_theme_with_should_load_block_assets_on_demand_out_out' => array(
+                                'theme'                   => 'default',
+                                'set_up'                  => static function () {
+                                        add_filter( 'should_load_block_assets_on_demand', '__return_false' );
+                                },
+                                'expected_load_separate'  => true,
+                                'expected_on_demand'      => false,
+                                'expected_buffer_started' => false,
+                        ),
+                        'classic_theme_without_any_opt_out'        => array(
+                                'theme'                   => 'default',
+                                'set_up'                  => static function () {},
+                                'expected_load_separate'  => true,
                                 'expected_on_demand'      => true,
                                 'expected_buffer_started' => true,
                         ),
-                        'classic_theme_without_block_styles_support' => array(
-                                'theme'                   => 'default',
-                                'set_up'                  => static function () {
-                                        remove_theme_support( 'wp-block-styles' );
-                                },
-                                'expected_on_demand'      => false,
-                                'expected_buffer_started' => true,
-                        ),
                 );
         }
@@ -1437 +1448 @@
          * @dataProvider data_wp_load_classic_theme_block_styles_on_demand
          */
-        public function test_wp_load_classic_theme_block_styles_on_demand( string $theme, ?Closure $set_up, bool $expected_on_demand, bool $expected_buffer_started ) {
+        public function test_wp_load_classic_theme_block_styles_on_demand( string $theme, ?Closure $set_up, bool $expected_load_separate, bool $expected_on_demand, bool $expected_buffer_started ) {
                 $this->assertFalse( wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() to return false initially.' );
                 $this->assertFalse( wp_should_load_block_assets_on_demand(), 'Expected wp_should_load_block_assets_on_demand() to return true' );
@@ -1448 +1459 @@
 
                 wp_load_classic_theme_block_styles_on_demand();
-
-                $this->assertSame( $expected_on_demand, wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() return value.' );
+                _add_default_theme_supports();
+
+                $this->assertSame( $expected_load_separate, wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() return value.' );
                 $this->assertSame( $expected_on_demand, wp_should_load_block_assets_on_demand(), 'Expected wp_should_load_block_assets_on_demand() return value.' );
                 $this->assertSame( $expected_buffer_started, (bool) has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expected wp_template_enhancement_output_buffer_started action added status.' );