Changeset 61122

Timestamp:

11/04/2025 07:53:24 AM (4 weeks 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.' );