WordPress.org
Get WordPress

Make WordPress Core

Changeset 61174


Ignore:
Timestamp:
11/07/2025 04:27:45 AM (5 weeks ago)
Author:
westonruter
Message:

Script Loader: Improve hoisted stylesheet ordering (in classic themes) to preserve CSS cascade.

This ensures that on-demand block styles are inserted right after the wp-block-library inline style whereas other stylesheets not related to blocks are appended to the end of the HEAD. This helps ensure the expected cascade is preserved. If no wp-block-library inline style is present, then all styles get appended to the HEAD regardless.

The handling of the CSS placeholder comment added to the wp-block-library inline style is also improved. It is now inserted later to ensure the inline style is printed. Additionally, when the CSS placeholder comment is removed from the wp-block-library inline style, the entire STYLE tag is now removed if there are no styles left (aside from the sourceURL comment).

Lastly, the use of the HTML Tag Processor is significantly improved to leverage WP_HTML_Text_Replacement.

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

Follow-up to [61008].

Props westonruter, peterwilsoncc, dmsnell.
Fixes #64099.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/phpcompat.xml.dist

    r60800 r61174  
    115115    </rule>
    116116
     117    <!--
     118        Excluded while waiting for PHPCompatibility v10.
     119        See <https://github.com/PHPCompatibility/PHPCompatibility/issues/1481>.
     120    -->
     121    <rule ref="PHPCompatibility.FunctionDeclarations.NewClosure.ThisFoundInStatic">
     122        <exclude-pattern>/src/wp-includes/script-loader\.php$</exclude-pattern>
     123    </rule>
     124
    117125</ruleset>

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

    r61142 r61174  
    22652265 * Private, for use in *_footer_scripts hooks
    22662266 *
    2267  * In classic themes, when block styles are loaded on demand via {@see wp_load_classic_theme_block_styles_on_demand()},
    2268  * this function is replaced by a closure in {@see wp_hoist_late_printed_styles()} which will capture the output of
    2269  * {@see print_late_styles()} before printing footer scripts as usual. The captured late-printed styles are then hoisted
    2270  * to the HEAD by means of the template enhancement output buffer.
     2267 * In classic themes, when block styles are loaded on demand via wp_load_classic_theme_block_styles_on_demand(),
     2268 * this function is replaced by a closure in wp_hoist_late_printed_styles() which will capture the printing of
     2269 * two sets of "late" styles to be hoisted to the HEAD by means of the template enhancement output buffer:
     2270 *
     2271 * 1. Styles related to blocks are inserted right after the wp-block-library stylesheet.
     2272 * 2. All other styles are appended to the end of the HEAD.
     2273 *
     2274 * The closure calls print_footer_scripts() to print scripts in the footer as usual.
    22712275 *
    22722276 * @since 3.3.0
    … …  
    36023606
    36033607    /*
    3604      * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally,
    3605      * and so that block-specific styles will only be enqueued when they are used on the page.
    3606      * A priority of zero allows for this to be easily overridden by themes which wish to opt out.
     3608     * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally, and so
     3609     * that block-specific styles will only be enqueued when they are used on the page. A priority of zero allows for
     3610     * this to be easily overridden by themes which wish to opt out. If a site has explicitly opted out of loading
     3611     * separate block styles, then abort.
    36073612     */
    36083613    add_filter( 'should_load_separate_core_block_assets', '__return_true', 0 );
     3614    if ( ! wp_should_load_separate_core_block_assets() ) {
     3615        return;
     3616    }
    36093617
    36103618    /*
    36113619     * Also ensure that block assets are loaded on demand (although the default value is from should_load_separate_core_block_assets).
    3612      * As above, a priority of zero allows for this to be easily overridden by themes which wish to opt out.
     3620     * As above, a priority of zero allows for this to be easily overridden by themes which wish to opt out. If a site
     3621     * has explicitly opted out of loading block styles on demand, then abort.
    36133622     */
    36143623    add_filter( 'should_load_block_assets_on_demand', '__return_true', 0 );
    3615 
    3616     // If a site has explicitly opted out of loading block styles on demand via filters with priorities higher than above, then abort.
    3617     if ( ! wp_should_load_separate_core_block_assets() || ! wp_should_load_block_assets_on_demand() ) {
     3624    if ( ! wp_should_load_block_assets_on_demand() ) {
    36183625        return;
    36193626    }
    … …  
    36383645
    36393646    /*
    3640      * While normally late styles are printed, there is a filter to disable prevent this, so this makes sure they are
    3641      * printed. Note that this filter was intended to control whether to print the styles queued too late for the HTML
    3642      * head. This filter was introduced in <https://core.trac.wordpress.org/ticket/9346>. However, with the template
    3643      * enhancement output buffer, essentially no style can be enqueued too late, because an output buffer filter can
    3644      * always hoist it to the HEAD.
    3645      */
    3646     add_filter( 'print_late_styles', '__return_true', PHP_INT_MAX );
     3647     * Add a placeholder comment into the inline styles for wp-block-library, after which where the late block styles
     3648     * can be hoisted from the footer to be printed in the header by means of a filter below on the template enhancement
     3649     * output buffer. The `wp_print_styles` action is used to ensure that if the inline style gets replaced at
     3650     * `enqueue_block_assets` or `wp_enqueue_scripts` that the placeholder will be sure to be present.
     3651     */
     3652    $placeholder = sprintf( '/*%s*/', uniqid( 'wp_block_styles_on_demand_placeholder:' ) );
     3653    add_action(
     3654        'wp_print_styles',
     3655        static function () use ( $placeholder ) {
     3656            wp_add_inline_style( 'wp-block-library', $placeholder );
     3657        }
     3658    );
    36473659
    36483660    /*
    3649      * Print a placeholder comment where the late styles can be hoisted from the footer to be printed in the header
    3650      * by means of a filter below on the template enhancement output buffer.
    3651      */
    3652     $placeholder = sprintf( '/*%s*/', uniqid( 'wp_late_styles_placeholder:' ) );
    3653 
    3654     wp_add_inline_style( 'wp-block-library', $placeholder );
    3655 
    3656     // Wrap print_late_styles() with a closure that captures the late-printed styles.
    3657     $printed_late_styles = '';
    3658     $capture_late_styles = static function () use ( &$printed_late_styles ) {
     3661     * Create a substitute for `print_late_styles()` which is aware of block styles. This substitute does not print
     3662     * the styles, but it captures what would be printed for block styles and non-block styles so that they can be
     3663     * later hoisted to the HEAD in the template enhancement output buffer. This will run at `wp_print_footer_scripts`
     3664     * before `print_footer_scripts()` is called.
     3665     */
     3666    $printed_block_styles = '';
     3667    $printed_late_styles  = '';
     3668    $capture_late_styles  = static function () use ( &$printed_block_styles, &$printed_late_styles ) {
     3669        // Gather the styles related to on-demand block enqueues.
     3670        $all_block_style_handles = array();
     3671        foreach ( WP_Block_Type_Registry::get_instance()->get_all_registered() as $block_type ) {
     3672            foreach ( $block_type->style_handles as $style_handle ) {
     3673                $all_block_style_handles[] = $style_handle;
     3674            }
     3675        }
     3676        $all_block_style_handles = array_merge(
     3677            $all_block_style_handles,
     3678            array(
     3679                'global-styles',
     3680                'block-style-variation-styles',
     3681                'core-block-supports',
     3682                'core-block-supports-duotone',
     3683            )
     3684        );
     3685
     3686        /*
     3687         * First print all styles related to blocks which should inserted right after the wp-block-library stylesheet
     3688         * to preserve the CSS cascade. The logic in this `if` statement is derived from `wp_print_styles()`.
     3689         */
     3690        $enqueued_block_styles = array_values( array_intersect( $all_block_style_handles, wp_styles()->queue ) );
     3691        if ( count( $enqueued_block_styles ) > 0 ) {
     3692            ob_start();
     3693            wp_styles()->do_items( $enqueued_block_styles );
     3694            $printed_block_styles = ob_get_clean();
     3695        }
     3696
     3697        /*
     3698         * Print all remaining styles not related to blocks. This contains a subset of the logic from
     3699         * `print_late_styles()`, without admin-specific logic and the `print_late_styles` filter to control whether
     3700         * late styles are printed (since they are being hoisted anyway).
     3701         */
    36593702        ob_start();
    3660         print_late_styles();
     3703        wp_styles()->do_footer_items();
    36613704        $printed_late_styles = ob_get_clean();
    36623705    };
    36633706
    36643707    /*
    3665      * If _wp_footer_scripts() was unhooked from the wp_print_footer_scripts action, or if wp_print_footer_scripts()
    3666      * was unhooked from running at the wp_footer action, then only add a callback to wp_footer which will capture the
     3708     * If `_wp_footer_scripts()` was unhooked from the `wp_print_footer_scripts` action, or if `wp_print_footer_scripts()`
     3709     * was unhooked from running at the `wp_footer` action, then only add a callback to `wp_footer` which will capture the
    36673710     * late-printed styles.
    36683711     *
    3669      * Otherwise, in the normal case where _wp_footer_scripts() will run at the wp_print_footer_scripts action, then
    3670      * swap out _wp_footer_scripts() with an alternative which captures the printed styles (for hoisting to HEAD) before
     3712     * Otherwise, in the normal case where `_wp_footer_scripts()` will run at the `wp_print_footer_scripts` action, then
     3713     * swap out `_wp_footer_scripts()` with an alternative which captures the printed styles (for hoisting to HEAD) before
    36713714     * proceeding with printing the footer scripts.
    36723715     */
    … …  
    36903733    add_filter(
    36913734        'wp_template_enhancement_output_buffer',
    3692         function ( $buffer ) use ( $placeholder, &$printed_late_styles ) {
     3735        static function ( $buffer ) use ( $placeholder, &$printed_block_styles, &$printed_late_styles ) {
    36933736
    36943737            // Anonymous subclass of WP_HTML_Tag_Processor which exposes underlying bookmark spans.
    36953738            $processor = new class( $buffer ) extends WP_HTML_Tag_Processor {
    3696                 public function get_span(): WP_HTML_Span {
    3697                     $instance = $this; // phpcs:ignore PHPCompatibility.FunctionDeclarations.NewClosure.ThisFoundOutsideClass -- It is inside an anonymous class.
    3698                     $instance->set_bookmark( 'here' );
    3699                     return $instance->bookmarks['here'];
     3739                /**
     3740                 * Gets the span for the current token.
     3741                 *
     3742                 * @return WP_HTML_Span Current token span.
     3743                 */
     3744                private function get_span(): WP_HTML_Span {
     3745                    // Note: This call will never fail according to the usage of this class, given it is always called after ::next_tag() is true.
     3746                    $this->set_bookmark( 'here' );
     3747                    return $this->bookmarks['here'];
     3748                }
     3749
     3750                /**
     3751                 * Inserts text before the current token.
     3752                 *
     3753                 * @param string $text Text to insert.
     3754                 */
     3755                public function insert_before( string $text ) {
     3756                    $this->lexical_updates[] = new WP_HTML_Text_Replacement( $this->get_span()->start, 0, $text );
     3757                }
     3758
     3759                /**
     3760                 * Inserts text after the current token.
     3761                 *
     3762                 * @param string $text Text to insert.
     3763                 */
     3764                public function insert_after( string $text ) {
     3765                    $span = $this->get_span();
     3766
     3767                    $this->lexical_updates[] = new WP_HTML_Text_Replacement( $span->start + $span->length, 0, $text );
     3768                }
     3769
     3770                /**
     3771                 * Removes the current token.
     3772                 */
     3773                public function remove() {
     3774                    $span = $this->get_span();
     3775
     3776                    $this->lexical_updates[] = new WP_HTML_Text_Replacement( $span->start, $span->length, '' );
    37003777                }
    37013778            };
    37023779
    3703             // Loop over STYLE tags.
     3780            /*
     3781             * Insert block styles right after wp-block-library (if it is present), and then insert any remaining styles
     3782             * at </head> (or else print everything there). The placeholder CSS comment will always be added to the
     3783             * wp-block-library inline style since it gets printed at `wp_head` before the blocks are rendered.
     3784             * This means that there may not actually be any block styles to hoist from the footer to insert after this
     3785             * inline style. The placeholder CSS comment needs to be added so that the inline style gets printed, but
     3786             * if the resulting inline style is empty after the placeholder is removed, then the inline style is
     3787             * removed.
     3788             */
    37043789            while ( $processor->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
    3705 
    3706                 // We've encountered the inline style for the 'wp-block-library' stylesheet which probably has the placeholder comment.
    37073790                if (
    3708                     ! $processor->is_tag_closer() &&
    37093791                    'STYLE' === $processor->get_tag() &&
    37103792                    'wp-block-library-inline-css' === $processor->get_attribute( 'id' )
    37113793                ) {
    3712                     // If the inline style lacks the placeholder comment, then we have to continue until we get to </HEAD> to append the styles there.
    37133794                    $css_text = $processor->get_modifiable_text();
    3714                     if ( ! str_contains( $css_text, $placeholder ) ) {
    3715                         continue;
     3795
     3796                    /*
     3797                     * A placeholder CSS comment is added to the inline style in order to force an inline STYLE tag to
     3798                     * be printed. Now that we've located the inline style, the placeholder comment can be removed. If
     3799                     * there is no CSS left in the STYLE tag after removing the placeholder (aside from the sourceURL
     3800                     * comment, then remove the STYLE entirely.)
     3801                     */
     3802                    $css_text = str_replace( $placeholder, '', $css_text );
     3803                    if ( preg_match( ':^/\*# sourceURL=\S+? \*/$:', trim( $css_text ) ) ) {
     3804                        $processor->remove();
     3805                    } else {
     3806                        $processor->set_modifiable_text( $css_text );
    37163807                    }
    37173808
    3718                     // Remove the placeholder now that we've located the inline style.
    3719                     $processor->set_modifiable_text( str_replace( $placeholder, '', $css_text ) );
    3720                     $buffer = $processor->get_updated_html();
    3721 
    37223809                    // Insert the $printed_late_styles immediately after the closing inline STYLE tag. This preserves the CSS cascade.
    3723                     $span   = $processor->get_span();
    3724                     $buffer = implode(
    3725                         '',
    3726                         array(
    3727                             substr( $buffer, 0, $span->start + $span->length ),
    3728                             $printed_late_styles,
    3729                             substr( $buffer, $span->start + $span->length ),
    3730                         )
    3731                     );
    3732                     break;
    3733                 }
    3734 
    3735                 // As a fallback, append the hoisted late styles to the end of the HEAD.
    3736                 if ( $processor->is_tag_closer() && 'HEAD' === $processor->get_tag() ) {
    3737                     $span   = $processor->get_span();
    3738                     $buffer = implode(
    3739                         '',
    3740                         array(
    3741                             substr( $buffer, 0, $span->start ),
    3742                             $printed_late_styles,
    3743                             substr( $buffer, $span->start ),
    3744                         )
    3745                     );
     3810                    if ( '' !== $printed_block_styles ) {
     3811                        $processor->insert_after( $printed_block_styles );
     3812
     3813                        // Prevent printing them again at </head>.
     3814                        $printed_block_styles = '';
     3815                    }
     3816
     3817                    // If there aren't any late styles, there's no need to continue to finding </head>.
     3818                    if ( '' === $printed_late_styles ) {
     3819                        break;
     3820                    }
     3821                } elseif ( 'HEAD' === $processor->get_tag() && $processor->is_tag_closer() ) {
     3822                    $processor->insert_before( $printed_block_styles . $printed_late_styles );
    37463823                    break;
    37473824                }
    37483825            }
    37493826
    3750             return $buffer;
     3827            return $processor->get_updated_html();
    37513828        }
    37523829    );

  • trunk/tests/phpunit/tests/template.php

    r61140 r61174  
    128128        $wp_scripts                = null;
    129129        $wp_styles                 = null;
    130         wp_scripts();
    131         wp_styles();
    132 
    133         $this->original_theme_features = $GLOBALS['_wp_theme_features'];
     130
    134131        foreach ( self::RESTORED_CONFIG_OPTIONS as $option ) {
    135132            $this->original_ini_config[ $option ] = ini_get( $option );
    … …  
    142139        $wp_styles  = $this->original_wp_styles;
    143140
    144         $GLOBALS['_wp_theme_features'] = $this->original_theme_features;
    145141        foreach ( $this->original_ini_config as $option => $value ) {
    146142            ini_set( $option, $value );
    … …  
    150146        unregister_taxonomy( 'taxo' );
    151147        $this->set_permalink_structure( '' );
     148
    152149        parent::tear_down();
    153150    }
    … …  
    631628            'wp_template_enhancement_output_buffer',
    632629            static function () {
    633                 return '<html>Hey!</html>';
     630                return '<html lang="en"><head><meta charset="utf-8"></head><body>Hey!</body></html>';
    634631            }
    635632        );
    … …  
    14231420                },
    14241421                'expected_load_separate'  => false,
    1425                 'expected_on_demand'      => true,
     1422                'expected_on_demand'      => false,
    14261423                'expected_buffer_started' => false,
    14271424            ),
    … …  
    14761473     * Data provider.
    14771474     *
    1478      * @return array<string, array{set_up: Closure|null}>
     1475     * @return array<string, array{set_up: Closure|null, inline_size_limit: int,  expected_styles: array{ HEAD: string[], BODY: string[] }}>
    14791476     */
    14801477    public function data_wp_hoist_late_printed_styles(): array {
     1478        $common_expected_head_styles = array(
     1479            'wp-img-auto-sizes-contain-inline-css',
     1480            'early-css',
     1481            'early-inline-css',
     1482            'wp-emoji-styles-inline-css',
     1483            'wp-block-library-css',
     1484            'wp-block-separator-css',
     1485            'global-styles-inline-css',
     1486            'core-block-supports-inline-css',
     1487            'classic-theme-styles-css',
     1488            'normal-css',
     1489            'normal-inline-css',
     1490            'wp-custom-css',
     1491            'late-css',
     1492            'late-inline-css',
     1493        );
     1494
    14811495        return array(
    1482             'no_actions_removed'              => array(
    1483                 'set_up' => null,
    1484             ),
    1485             '_wp_footer_scripts_removed'      => array(
    1486                 'set_up' => static function () {
     1496            'standard_classic_theme_config_with_min_styles_inlined' => array(
     1497                'set_up'            => null,
     1498                'inline_size_limit' => 0,
     1499                'expected_styles'   => array(
     1500                    'HEAD' => $common_expected_head_styles,
     1501                    'BODY' => array(),
     1502                ),
     1503            ),
     1504            'standard_classic_theme_config_with_max_styles_inlined' => array(
     1505                'set_up'            => null,
     1506                'inline_size_limit' => PHP_INT_MAX,
     1507                'expected_styles'   => array(
     1508                    'HEAD' => array(
     1509                        'wp-img-auto-sizes-contain-inline-css',
     1510                        'early-css',
     1511                        'early-inline-css',
     1512                        'wp-emoji-styles-inline-css',
     1513                        'wp-block-library-inline-css',
     1514                        'wp-block-separator-inline-css',
     1515                        'global-styles-inline-css',
     1516                        'core-block-supports-inline-css',
     1517                        'classic-theme-styles-inline-css',
     1518                        'normal-css',
     1519                        'normal-inline-css',
     1520                        'wp-custom-css',
     1521                        'late-css',
     1522                        'late-inline-css',
     1523                    ),
     1524                    'BODY' => array(),
     1525                ),
     1526            ),
     1527            'standard_classic_theme_config_extra_block_library_inline_style' => array(
     1528                'set_up'            => static function () {
     1529                    add_action(
     1530                        'enqueue_block_assets',
     1531                        static function () {
     1532                            wp_add_inline_style( 'wp-block-library', '/* Extra CSS which prevents empty inline style containing placeholder from being removed. */' );
     1533                        }
     1534                    );
     1535                },
     1536                'inline_size_limit' => 0,
     1537                'expected_styles'   => array(
     1538                    'HEAD' => ( function ( $expected_styles ) {
     1539                        // Insert 'wp-block-library-inline-css' right after 'wp-block-library-css'.
     1540                        $i = array_search( 'wp-block-library-css', $expected_styles, true );
     1541                        $this->assertIsInt( $i, 'Expected wp-block-library-css to be among the styles.' );
     1542                        array_splice( $expected_styles, $i + 1, 0, 'wp-block-library-inline-css' );
     1543                        return $expected_styles;
     1544                    } )( $common_expected_head_styles ),
     1545                    'BODY' => array(),
     1546                ),
     1547            ),
     1548            'classic_theme_opt_out_separate_block_styles' => array(
     1549                'set_up'            => static function () {
     1550                    add_filter( 'should_load_separate_core_block_assets', '__return_false' );
     1551                },
     1552                'inline_size_limit' => 0,
     1553                'expected_styles'   => array(
     1554                    'HEAD' => array(
     1555                        'wp-img-auto-sizes-contain-inline-css',
     1556                        'early-css',
     1557                        'early-inline-css',
     1558                        'wp-emoji-styles-inline-css',
     1559                        'wp-block-library-css',
     1560                        'classic-theme-styles-css',
     1561                        'global-styles-inline-css',
     1562                        'normal-css',
     1563                        'normal-inline-css',
     1564                        'wp-custom-css',
     1565                    ),
     1566                    'BODY' => array(
     1567                        'late-css',
     1568                        'late-inline-css',
     1569                        'core-block-supports-inline-css',
     1570                    ),
     1571                ),
     1572            ),
     1573            '_wp_footer_scripts_removed'                  => array(
     1574                'set_up'            => static function () {
    14871575                    remove_action( 'wp_print_footer_scripts', '_wp_footer_scripts' );
    14881576                },
    1489             ),
    1490             'wp_print_footer_scripts_removed' => array(
    1491                 'set_up' => static function () {
     1577                'inline_size_limit' => 0,
     1578                'expected_styles'   => array(
     1579                    'HEAD' => $common_expected_head_styles,
     1580                    'BODY' => array(),
     1581                ),
     1582            ),
     1583            'wp_print_footer_scripts_removed'             => array(
     1584                'set_up'            => static function () {
    14921585                    remove_action( 'wp_footer', 'wp_print_footer_scripts', 20 );
    14931586                },
    1494             ),
    1495             'both_actions_removed'            => array(
    1496                 'set_up' => static function () {
     1587                'inline_size_limit' => 0,
     1588                'expected_styles'   => array(
     1589                    'HEAD' => $common_expected_head_styles,
     1590                    'BODY' => array(),
     1591                ),
     1592            ),
     1593            'both_actions_removed'                        => array(
     1594                'set_up'            => static function () {
    14971595                    remove_action( 'wp_print_footer_scripts', '_wp_footer_scripts' );
    14981596                    remove_action( 'wp_footer', 'wp_print_footer_scripts' );
    14991597                },
    1500             ),
    1501             'block_library_removed'           => array(
    1502                 'set_up' => static function () {
    1503                     wp_deregister_style( 'wp-block-library' );
    1504                 },
     1598                'inline_size_limit' => 0,
     1599                'expected_styles'   => array(
     1600                    'HEAD' => $common_expected_head_styles,
     1601                    'BODY' => array(),
     1602                ),
     1603            ),
     1604            'disable_block_library'                       => array(
     1605                'set_up'            => static function () {
     1606                    add_action(
     1607                        'enqueue_block_assets',
     1608                        function (): void {
     1609                            wp_deregister_style( 'wp-block-library' );
     1610                            wp_register_style( 'wp-block-library', '' );
     1611                        }
     1612                    );
     1613                    add_filter( 'should_load_separate_core_block_assets', '__return_false' );
     1614                },
     1615                'inline_size_limit' => 0,
     1616                'expected_styles'   => array(
     1617                    'HEAD' => array(
     1618                        'wp-img-auto-sizes-contain-inline-css',
     1619                        'early-css',
     1620                        'early-inline-css',
     1621                        'wp-emoji-styles-inline-css',
     1622                        'classic-theme-styles-css',
     1623                        'global-styles-inline-css',
     1624                        'normal-css',
     1625                        'normal-inline-css',
     1626                        'wp-custom-css',
     1627                    ),
     1628                    'BODY' => array(
     1629                        'late-css',
     1630                        'late-inline-css',
     1631                        'core-block-supports-inline-css',
     1632                    ),
     1633                ),
     1634            ),
     1635            'override_block_library_inline_style_late'    => array(
     1636                'set_up'            => static function () {
     1637                    add_action(
     1638                        'enqueue_block_assets',
     1639                        function (): void {
     1640                            // This tests what happens when the placeholder comment gets replaced unexpectedly.
     1641                            wp_styles()->registered['wp-block-library']->extra['after'] = array( '/* OVERRIDDEN! */' );
     1642                        }
     1643                    );
     1644                },
     1645                'inline_size_limit' => 0,
     1646                'expected_styles'   => array(
     1647                    'HEAD' => array(
     1648                        'wp-img-auto-sizes-contain-inline-css',
     1649                        'early-css',
     1650                        'early-inline-css',
     1651                        'wp-emoji-styles-inline-css',
     1652                        'wp-block-library-css',
     1653                        'wp-block-library-inline-css', // This contains the "OVERRIDDEN" text.
     1654                        'wp-block-separator-css',
     1655                        'global-styles-inline-css',
     1656                        'core-block-supports-inline-css',
     1657                        'classic-theme-styles-css',
     1658                        'normal-css',
     1659                        'normal-inline-css',
     1660                        'wp-custom-css',
     1661                        'late-css',
     1662                        'late-inline-css',
     1663                    ),
     1664                    'BODY' => array(),
     1665                ),
    15051666            ),
    15061667        );
    … …  
    15111672     *
    15121673     * @ticket 64099
     1674     * @covers ::wp_load_classic_theme_block_styles_on_demand
    15131675     * @covers ::wp_hoist_late_printed_styles
    15141676     *
    15151677     * @dataProvider data_wp_hoist_late_printed_styles
    15161678     */
    1517     public function test_wp_hoist_late_printed_styles( ?Closure $set_up ): void {
     1679    public function test_wp_hoist_late_printed_styles( ?Closure $set_up, int $inline_size_limit, array $expected_styles ): void {
     1680        switch_theme( 'default' );
     1681        global $wp_styles;
     1682        $wp_styles = null;
     1683
     1684        // Disable the styles_inline_size_limit in order to prevent changes from invalidating the snapshots.
     1685        add_filter(
     1686            'styles_inline_size_limit',
     1687            static function () use ( $inline_size_limit ): int {
     1688                return $inline_size_limit;
     1689            }
     1690        );
     1691
     1692        add_filter(
     1693            'wp_get_custom_css',
     1694            static function () {
     1695                return '/* CUSTOM CSS from Customizer */';
     1696            }
     1697        );
     1698
    15181699        if ( $set_up ) {
    15191700            $set_up();
    15201701        }
    15211702
    1522         switch_theme( 'default' );
    1523 
    1524         // Enqueue a style
    1525         wp_enqueue_style( 'early', 'http://example.com/style.css' );
     1703        wp_load_classic_theme_block_styles_on_demand();
     1704
     1705        // Ensure that separate core block assets get registered.
     1706        register_core_block_style_handles();
     1707        $this->assertTrue( WP_Block_Type_Registry::get_instance()->is_registered( 'core/separator' ), 'Expected the core/separator block to be registered.' );
     1708
     1709        // Ensure stylesheet files exist on the filesystem since a build may not have been done.
     1710        $this->ensure_style_asset_file_created(
     1711            'wp-block-library',
     1712            wp_should_load_separate_core_block_assets() ? 'css/dist/block-library/common.css' : 'css/dist/block-library/style.css'
     1713        );
     1714        if ( wp_should_load_separate_core_block_assets() ) {
     1715            $this->ensure_style_asset_file_created( 'wp-block-separator', 'blocks/separator/style.css' );
     1716        }
     1717        $this->assertFalse( wp_is_block_theme(), 'Test is not relevant to block themes (only classic themes).' );
     1718
     1719        // Enqueue a style early, before wp_enqueue_scripts.
     1720        wp_enqueue_style( 'early', 'https://example.com/style.css' );
    15261721        wp_add_inline_style( 'early', '/* EARLY */' );
    15271722
    1528         wp_hoist_late_printed_styles();
    1529 
    1530         // Ensure late styles are printed.
    1531         add_filter( 'print_late_styles', '__return_false', 1000 );
    1532         $this->assertTrue( apply_filters( 'print_late_styles', true ), 'Expected late style printing to be forced.' );
     1723        // Enqueue a style at the normal spot.
     1724        add_action(
     1725            'wp_enqueue_scripts',
     1726            static function () {
     1727                wp_enqueue_style( 'normal', 'https://example.com/normal.css' );
     1728                wp_add_inline_style( 'normal', '/* NORMAL */' );
     1729            }
     1730        );
     1731
     1732        // Call wp_hoist_late_printed_styles() if wp_load_classic_theme_block_styles_on_demand() queued it up.
     1733        if ( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ) ) {
     1734            wp_hoist_late_printed_styles();
     1735        }
    15331736
    15341737        // Simulate wp_head.
    … …  
    15381741
    15391742        // Enqueue a late style (after wp_head).
    1540         wp_enqueue_style( 'late', 'http://example.com/late-style.css', array(), null );
    1541         wp_add_inline_style( 'late', '/* EARLY */' );
     1743        wp_enqueue_style( 'late', 'https://example.com/late-style.css', array(), null );
     1744        wp_add_inline_style( 'late', '/* LATE */' );
     1745
     1746        // Simulate the_content().
     1747        $content = apply_filters(
     1748            'the_content',
     1749            '<!-- wp:separator --><hr class="wp-block-separator has-alpha-channel-opacity"/><!-- /wp:separator -->'
     1750        );
    15421751
    15431752        // Simulate footer scripts.
    … …  
    15451754
    15461755        // Create a simulated output buffer.
    1547         $buffer = '<html><head>' . $head_output . '</head><body><main>Content</main>' . $footer_output . '</body></html>';
     1756        $buffer = '<html lang="en"><head><meta charset="utf-8">' . $head_output . '</head><body><main>' . $content . '</main>' . $footer_output . '</body></html>';
     1757
     1758        $placeholder_regexp = '#/\*wp_block_styles_on_demand_placeholder:[a-f0-9]+\*/#';
     1759        if ( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ) ) {
     1760            $this->assertMatchesRegularExpression( $placeholder_regexp, $buffer, 'Expected the placeholder to be present in the buffer.' );
     1761        }
    15481762
    15491763        // Apply the output buffer filter.
    15501764        $filtered_buffer = apply_filters( 'wp_template_enhancement_output_buffer', $buffer );
    15511765
    1552         $this->assertStringContainsString( '</head>', $buffer, 'Expected the closing HEAD tag to be in the response.' );
    1553 
    1554         $this->assertDoesNotMatchRegularExpression( '#/\*wp_late_styles_placeholder:[a-f0-9-]+\*/#', $filtered_buffer, 'Expected the placeholder to be removed.' );
     1766        $this->assertStringContainsString( '</head>', $filtered_buffer, 'Expected the closing HEAD tag to be in the response.' );
     1767
     1768        $this->assertDoesNotMatchRegularExpression( $placeholder_regexp, $filtered_buffer, 'Expected the placeholder to be removed.' );
    15551769        $found_styles = array(
    15561770            'HEAD' => array(),
    … …  
    15701784        }
    15711785
    1572         $expected = array(
    1573             'early-css',
    1574             'early-inline-css',
    1575             'late-css',
    1576             'late-inline-css',
    1577         );
    1578         foreach ( $expected as $style_id ) {
    1579             $this->assertContains( $style_id, $found_styles['HEAD'], 'Expected stylesheet with ID to be in the HEAD.' );
    1580         }
     1786        /*
     1787         * Since new styles could appear at any time and since certain styles leak in from the global scope not being
     1788         * properly reset somewhere else in the test suite, we only check that the expected styles are at least present
     1789         * and in the same order. When new styles are introduced in core, they may be added to this array as opposed to
     1790         * updating the arrays in the data provider, if appropriate.
     1791         */
     1792        $ignored_styles = array(
     1793            'core-block-supports-duotone-inline-css',
     1794            'wp-block-library-theme-css',
     1795            'wp-block-template-skip-link-inline-css',
     1796        );
     1797
     1798        $found_subset_styles = array();
     1799        foreach ( array( 'HEAD', 'BODY' ) as $group ) {
     1800            $found_subset_styles[ $group ] = array_values( array_diff( $found_styles[ $group ], $ignored_styles ) );
     1801        }
     1802
    15811803        $this->assertSame(
    1582             $expected,
    1583             array_values( array_intersect( $found_styles['HEAD'], $expected ) ),
    1584             'Expected styles to be printed in the same order.'
    1585         );
    1586         $this->assertCount( 0, $found_styles['BODY'], 'Expected no styles to be present in the footer.' );
     1804            $expected_styles,
     1805            $found_subset_styles,
     1806            'Expected the same styles. Snapshot: ' . self::get_array_snapshot_export( $found_subset_styles )
     1807        );
     1808    }
     1809
     1810    /**
     1811     * Ensures a CSS file is on the filesystem.
     1812     *
     1813     * This is needed because unit tests may be run without a build step having been done. Something similar can be seen
     1814     * elsewhere in tests for the `wp-emoji-loader.js` script:
     1815     *
     1816     *     self::touch( ABSPATH . WPINC . '/js/wp-emoji-loader.js' );
     1817     *
     1818     * @param string $handle        Style handle.
     1819     * @param string $relative_path Relative path to the CSS file in wp-includes.
     1820     *
     1821     * @throws Exception If the supplied style handle is not registered as expected.
     1822     */
     1823    private function ensure_style_asset_file_created( string $handle, string $relative_path ) {
     1824        $dependency = wp_styles()->query( $handle );
     1825        if ( ! $dependency ) {
     1826            throw new Exception( "The stylesheet for $handle is not registered." );
     1827        }
     1828        $dependency->src = includes_url( $relative_path );
     1829        $path            = ABSPATH . WPINC . '/' . $relative_path;
     1830        if ( ! file_exists( $path ) ) {
     1831            $dir = dirname( $path );
     1832            if ( ! file_exists( $dir ) ) {
     1833                mkdir( $dir, 0777, true );
     1834            }
     1835            file_put_contents( $path, "/* CSS for $handle */" );
     1836        }
     1837        wp_style_add_data( $handle, 'path', $path );
    15871838    }
    15881839
    … …  
    15921843
    15931844        $this->assertSame( $expected, $hierarchy, $message );
     1845    }
     1846
     1847    /**
     1848     * Exports PHP array as string formatted as a snapshot for pasting into a data provider.
     1849     *
     1850     * Unfortunately, `var_export()` always includes array indices even for lists. For example:
     1851     *
     1852     *     var_export( array( 'a', 'b', 'c' ) );
     1853     *
     1854     * Results in:
     1855     *
     1856     *     array (
     1857     *       0 => 'a',
     1858     *       1 => 'b',
     1859     *       2 => 'c',
     1860     *     )
     1861     *
     1862     * This makes it unhelpful when outputting a snapshot to update a unit test. So this function strips out the indices
     1863     * to facilitate copy/pasting the snapshot from an assertion error message into the data provider. For example:
     1864     *
     1865     *      array(
     1866     *          'a',
     1867     *          'b',
     1868     *          'c',
     1869     *      )
     1870     *
     1871     *
     1872     * @param array $snapshot Snapshot.
     1873     * @return string Snapshot export.
     1874     */
     1875    private static function get_array_snapshot_export( array $snapshot ): string {
     1876        $export = var_export( $snapshot, true );
     1877        $export = preg_replace( '/\barray \($/m', 'array(', $export );
     1878        $export = preg_replace( '/^(\s+)\d+\s+=>\s+/m', '$1', $export );
     1879        $export = preg_replace( '/=> *\n +/', '=> ', $export );
     1880        $export = preg_replace( '/array\(\n\s+\)/', 'array()', $export );
     1881        return preg_replace_callback(
     1882            '/(^ +)/m',
     1883            static function ( $matches ) {
     1884                return str_repeat( "\t", strlen( $matches[0] ) / 2 );
     1885            },
     1886            $export
     1887        );
    15941888    }
    15951889
Note: See TracChangeset for help on using the changeset viewer.