Changeset 61076

Timestamp:

10/28/2025 05:32:13 AM (7 weeks ago)

Author:

westonruter

Message:

Script Loader: Fall back to hoisting late-printed styles to end of HEAD if wp-block-library is not enqueued.

When the wp-block-library stylesheet is not enqueued, there will be no associated inline style present. This inline style normally contains the placeholder CSS comment for the HTML Tag Processor to identify the token after which the late-printed styles should be inserted. However, when the wp-block-library stylesheet is not enqueued (such as in themes which do not use blocks), or else the inline style is not printed for whatever reason, this adds a fallback to insert the late-printed styles immediately before </head>. This ensures that late-printed styles will always get hoisted.

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

Follow-up to [61008].

Props westonruter, peterwilsoncc, Soean.
See #64099, #43258.
Fixes #64150.

Location:

trunk

Files:

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

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

@@ -3594 +3594 @@
 
     /*
-     * 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 );
+     * 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 );
+    }
 
     // Add hooks which require the presence of the output buffer. Ideally the above two filters could be added here, but they run too early.
@@ -3685 +3693 @@
 
             // Loop over STYLE tags.
-            while ( $processor->next_tag( array( 'tag_name' => 'STYLE' ) ) ) {
-                // Skip to the next if this is not the inline style for the wp-block-library stylesheet (which contains the placeholder).
-                if ( 'wp-block-library-inline-css' !== $processor->get_attribute( 'id' ) ) {
-                    continue;
-                }
-
-                // If the inline style lacks the placeholder comment, then something went wrong and we need to abort.
-                $css_text = $processor->get_modifiable_text();
-                if ( ! str_contains( $css_text, $placeholder ) ) {
+            while ( $processor->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+
+                // We've encountered the inline style for the 'wp-block-library' stylesheet which probably has the placeholder comment.
+                if (
+                    ! $processor->is_tag_closer() &&
+                    'STYLE' === $processor->get_tag() &&
+                    'wp-block-library-inline-css' === $processor->get_attribute( 'id' )
+                ) {
+                    // If the inline style lacks the placeholder comment, then we have to continue until we get to </HEAD> to append the styles there.
+                    $css_text = $processor->get_modifiable_text();
+                    if ( ! str_contains( $css_text, $placeholder ) ) {
+                        continue;
+                    }
+
+                    // Remove the placeholder now that we've located the inline style.
+                    $processor->set_modifiable_text( str_replace( $placeholder, '', $css_text ) );
+                    $buffer = $processor->get_updated_html();
+
+                    // Insert the $printed_late_styles immediately after the closing inline STYLE tag. This preserves the CSS cascade.
+                    $span   = $processor->get_span();
+                    $buffer = implode(
+                        '',
+                        array(
+                            substr( $buffer, 0, $span->start + $span->length ),
+                            $printed_late_styles,
+                            substr( $buffer, $span->start + $span->length ),
+                        )
+                    );
                     break;
                 }
 
-                // Remove the placeholder now that we've located the inline style.
-                $processor->set_modifiable_text( str_replace( $placeholder, '', $css_text ) );
-                $buffer = $processor->get_updated_html();
-
-                // Insert the $printed_late_styles immediately after the closing inline STYLE tag. This preserves the CSS cascade.
-                $span   = $processor->get_span();
-                $buffer = implode(
-                    '',
-                    array(
-                        substr( $buffer, 0, $span->start + $span->length ),
-                        $printed_late_styles,
-                        substr( $buffer, $span->start + $span->length ),
-                    )
-                );
-                break;
+                // As a fallback, append the hoisted late styles to the end of the HEAD.
+                if ( $processor->is_tag_closer() && 'HEAD' === $processor->get_tag() ) {
+                    $span   = $processor->get_span();
+                    $buffer = implode(
+                        '',
+                        array(
+                            substr( $buffer, 0, $span->start ),
+                            $printed_late_styles,
+                            substr( $buffer, $span->start ),
+                        )
+                    );
+                    break;
+                }
             }
 

trunk/tests/phpunit/tests/template.php

@@ -79 +79 @@
     protected $original_wp_styles;
 
+    /**
+     * @var array|null
+     */
+    protected $original_theme_features;
+
     public function set_up() {
         parent::set_up();
@@ -111 +116 @@
         wp_scripts();
         wp_styles();
+
+        $this->original_theme_features = $GLOBALS['_wp_theme_features'];
     }
 
@@ -117 +124 @@
         $wp_scripts = $this->original_wp_scripts;
         $wp_styles  = $this->original_wp_styles;
+
+        $GLOBALS['_wp_theme_features'] = $this->original_theme_features;
 
         ini_set( 'default_mimetype', $this->original_default_mimetype );
@@ -914 +923 @@
 
     /**
-     * Tests that wp_load_classic_theme_block_styles_on_demand() does not add hooks for classic themes when output buffering is blocked.
+     * Data provider.
+     *
+     * @return array<string, array{theme: string, set_up: Closure|null, expected_on_demand: bool, expected_buffer_started: bool}>
+     */
+    public function data_wp_load_classic_theme_block_styles_on_demand(): array {
+        return array(
+            'block_theme'                                => array(
+                'theme'                   => 'block-theme',
+                'set_up'                  => static function () {},
+                'expected_on_demand'      => false,
+                'expected_buffer_started' => false,
+            ),
+            '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_on_demand'      => false,
+                'expected_buffer_started' => false,
+            ),
+            'classic_theme_with_block_styles_support'    => array(
+                'theme'                   => 'default',
+                'set_up'                  => static function () {
+                    add_theme_support( 'wp-block-styles' );
+                },
+                '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,
+            ),
+        );
+    }
+
+    /**
+     * Tests that wp_load_classic_theme_block_styles_on_demand() adds the expected hooks (or not).
      *
      * @ticket 64099
+     * @ticket 64150
+     *
      * @covers ::wp_load_classic_theme_block_styles_on_demand
-     */
-    public function test_wp_load_classic_theme_block_styles_on_demand_in_classic_theme_but_output_buffering_blocked(): void {
-        add_filter( 'wp_should_output_buffer_template_for_enhancement', '__return_false' );
-        switch_theme( 'default' );
-
-        wp_load_classic_theme_block_styles_on_demand();
-
-        $this->assertFalse( has_filter( 'should_load_separate_core_block_assets' ), 'Expect should_load_separate_core_block_assets filter NOT to be added for block themes.' );
-        $this->assertFalse( has_filter( 'should_load_block_assets_on_demand', '__return_true' ), 'Expect should_load_block_assets_on_demand filter NOT to be added for block themes.' );
-        $this->assertFalse( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expect wp_template_enhancement_output_buffer_started action NOT to be added for block themes.' );
-    }
-
-    /**
-     * Tests that wp_load_classic_theme_block_styles_on_demand() adds the expected hooks for classic themes.
-     *
-     * @ticket 64099
-     * @covers ::wp_load_classic_theme_block_styles_on_demand
-     */
-    public function test_wp_load_classic_theme_block_styles_on_demand_in_classic_theme(): void {
-        switch_theme( 'default' );
-
+     *
+     * @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 ) {
         $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' );
         $this->assertFalse( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expected wp_template_enhancement_output_buffer_started action to be added for classic themes.' );
 
+        switch_theme( $theme );
+        if ( $set_up ) {
+            $set_up();
+        }
+
         wp_load_classic_theme_block_styles_on_demand();
 
-        $this->assertTrue( wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() filters to return true' );
-        $this->assertTrue( wp_should_load_block_assets_on_demand(), 'Expected wp_should_load_block_assets_on_demand() to return true' );
-        $this->assertNotFalse( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expected wp_template_enhancement_output_buffer_started action to be added for classic themes.' );
+        $this->assertSame( $expected_on_demand, 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.' );
     }
 
@@ -953 +992 @@
      * Data provider.
      *
-     * @return array<string, array{set_up?: Closure}>
+     * @return array<string, array{set_up: Closure|null}>
      */
     public function data_wp_hoist_late_printed_styles(): array {
@@ -976 +1015 @@
                 },
             ),
+            'block_library_removed'           => array(
+                'set_up' => static function () {
+                    wp_deregister_style( 'wp-block-library' );
+                },
+            ),
         );
     }
@@ -1007 +1051 @@
         $head_output = get_echo( 'wp_head' );
 
-        $placeholder_pattern = '#/\*wp_late_styles_placeholder:[a-f0-9-]+\*/#';
-
-        $this->assertMatchesRegularExpression( $placeholder_pattern, $head_output, 'Expected the placeholder to be present' );
         $this->assertStringContainsString( 'early', $head_output, 'Expected the early-enqueued stylesheet to be present.' );
 
@@ -1025 +1066 @@
         $filtered_buffer = apply_filters( 'wp_template_enhancement_output_buffer', $buffer );
 
-        $this->assertDoesNotMatchRegularExpression( $placeholder_pattern, $filtered_buffer, 'Expected the placeholder to be removed.' );
+        $this->assertStringContainsString( '</head>', $buffer, 'Expected the closing HEAD tag to be in the response.' );
+
+        $this->assertDoesNotMatchRegularExpression( '#/\*wp_late_styles_placeholder:[a-f0-9-]+\*/#', $filtered_buffer, 'Expected the placeholder to be removed.' );
         $found_styles = array(
             'HEAD' => array(),