WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/29/2026 09:25:28 PM (7 months ago)
Author:
jorbin
Message:

Script Loader: Preserve original CSS cascade for classic themes when hoisting late-printed styles.

This refactors wp_hoist_late_printed_styles() to strictly preserve the classic theme CSS cascade when moving styles from wp_footer to the HEAD. Previously, hoisted styles were appended in an order closer to the CSS cascade for block themes, potentially causing specificity issues for CSS selectors written for the previous cascade. This is intended to eliminate the need for sites which upgraded to 6.9 to apply a hotfix involving add_filter( 'should_load_separate_core_block_assets', '__return_false' ) to disable the optimization.

Key changes:

  • Identifies styles enqueued during enqueue_block_assets.
  • Separates core block styles from third-party block styles.
  • Inserts core block styles immediately after wp-block-library.
  • Inserts third-party block styles after classic-theme-styles.
  • Inserts global-styles after all enqueue_block_assets styles.

This ensures the following order is maintained:

  1. Core block library.
  2. Core block styles.
  3. Classic theme styles.
  4. Third-party block styles.
  5. Global styles.

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

Follow-up to [61174], [61122], [61076], [61008].

Reviewed by jorbin.
Merges [61554] to the 6.9 branch.

Props westonruter, wildworks, jorbin, peterwilsoncc, sabernhardt, audrasjb, pmbs, threadi, madhavishah01, raftaar1191, noruzzaman, ozgursar.
See #64099, #64150, #43258.
Fixes #64354.

Location:
branches/6.9
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • branches/6.9

  • branches/6.9/tests/phpunit/tests/template.php

    r61174 r61556  
    146146                unregister_taxonomy( 'taxo' );
    147147                $this->set_permalink_structure( '' );
     148
     149                $registry = WP_Block_Type_Registry::get_instance();
     150                if ( $registry->is_registered( 'third-party/test' ) ) {
     151                        $registry->unregister( 'third-party/test' );
     152                }
    148153
    149154                parent::tear_down();
    … …  
    14761481         */
    14771482        public function data_wp_hoist_late_printed_styles(): array {
    1478                 $common_expected_head_styles = array(
     1483                $early_common_styles = array(
    14791484                        'wp-img-auto-sizes-contain-inline-css',
    14801485                        'early-css',
    14811486                        'early-inline-css',
    14821487                        '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                );
     1489
     1490                $common_late_in_head = array(
     1491                        // Styles enqueued at wp_enqueue_scripts (priority 10).
    14881492                        'normal-css',
    14891493                        'normal-inline-css',
     1494
     1495                        // Styles printed at wp_head priority 10.
    14901496                        'wp-custom-css',
     1497                );
     1498
     1499                $common_late_in_body = array(
    14911500                        'late-css',
    14921501                        'late-inline-css',
     1502                        'core-block-supports-inline-css',
     1503                );
     1504
     1505                $common_expected_head_styles = array_merge(
     1506                        $early_common_styles,
     1507                        array(
     1508                                // Core block styles enqueued by wp_common_block_scripts_and_styles(), which runs at wp_enqueue_scripts priority 10, added first.
     1509                                'wp-block-library-css', // Inline printed.
     1510                                'wp-block-separator-css', // Hoisted.
     1511
     1512                                // The wp_common_block_scripts_and_styles() function also fires enqueue_block_assets, at which wp_enqueue_classic_theme_styles() runs.
     1513                                'classic-theme-styles-css', // Printed at enqueue_block_assets.
     1514
     1515                                // Third-party block styles.
     1516                                'third-party-test-block-css', // Hoisted.
     1517
     1518                                // Other styles enqueued at enqueue_block_assets, which is fired by wp_common_block_scripts_and_styles().
     1519                                'custom-block-styles-css', // Printed at enqueue_block_assets.
     1520
     1521                                // Hoisted. Enqueued by wp_enqueue_global_styles() which runs at wp_enqueue_scripts priority 10 and wp_footer priority 1.
     1522                                'global-styles-inline-css',
     1523                        ),
     1524                        $common_late_in_head,
     1525                        $common_late_in_body
    14931526                );
    14941527
    … …  
    15061539                                'inline_size_limit' => PHP_INT_MAX,
    15071540                                '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',
     1541                                        'HEAD' => array_merge(
     1542                                                $early_common_styles,
     1543                                                array(
     1544                                                        'wp-block-library-inline-css',
     1545                                                        'wp-block-separator-inline-css',
     1546                                                        'classic-theme-styles-inline-css',
     1547                                                        'third-party-test-block-css',
     1548                                                        'custom-block-styles-css',
     1549                                                        'global-styles-inline-css',
     1550                                                ),
     1551                                                $common_late_in_head,
     1552                                                $common_late_in_body
     1553                                        ),
     1554                                        'BODY' => array(),
     1555                                ),
     1556                        ),
     1557                        'classic_theme_styles_omitted'                => array(
     1558                                'set_up'            => static function () {
     1559                                        // Note that wp_enqueue_scripts is used instead of enqueue_block_assets because it runs again at the former action.
     1560                                        add_action(
     1561                                                'wp_enqueue_scripts',
     1562                                                static function () {
     1563                                                        wp_dequeue_style( 'classic-theme-styles' );
     1564                                                },
     1565                                                100
     1566                                        );
     1567                                },
     1568                                'inline_size_limit' => PHP_INT_MAX,
     1569                                'expected_styles'   => array(
     1570                                        'HEAD' => array_merge(
     1571                                                $early_common_styles,
     1572                                                array(
     1573                                                        'wp-block-library-inline-css',
     1574                                                        'wp-block-separator-inline-css',
     1575                                                        'third-party-test-block-css',
     1576                                                        'custom-block-styles-css',
     1577                                                        'global-styles-inline-css',
     1578                                                ),
     1579                                                $common_late_in_head,
     1580                                                $common_late_in_body
     1581                                        ),
     1582                                        'BODY' => array(),
     1583                                ),
     1584                        ),
     1585                        'no_styles_at_enqueued_block_assets'          => array(
     1586                                'set_up'            => static function () {
     1587                                        add_action(
     1588                                                'wp_enqueue_scripts',
     1589                                                static function () {
     1590                                                        wp_dequeue_style( 'classic-theme-styles' );
     1591                                                        wp_dequeue_style( 'custom-block-styles' );
     1592                                                },
     1593                                                100
     1594                                        );
     1595                                },
     1596                                'inline_size_limit' => PHP_INT_MAX,
     1597                                'expected_styles'   => array(
     1598                                        'HEAD' => array_merge(
     1599                                                $early_common_styles,
     1600                                                array(
     1601                                                        'wp-block-library-inline-css',
     1602                                                        'wp-block-separator-inline-css',
     1603                                                        'third-party-test-block-css',
     1604                                                        'global-styles-inline-css',
     1605                                                ),
     1606                                                $common_late_in_head,
     1607                                                $common_late_in_body
     1608                                        ),
     1609                                        'BODY' => array(),
     1610                                ),
     1611                        ),
     1612                        'no_global_styles'                            => array(
     1613                                'set_up'            => static function () {
     1614                                        add_filter(
     1615                                                'print_styles_array',
     1616                                                static function ( $handles ) {
     1617                                                        return array_values( array_diff( $handles, array( 'global-styles' ) ) );
     1618                                                }
     1619                                        );
     1620                                },
     1621                                'inline_size_limit' => PHP_INT_MAX,
     1622                                'expected_styles'   => array(
     1623                                        'HEAD' => array_merge(
     1624                                                $early_common_styles,
     1625                                                array(
     1626                                                        'wp-block-library-inline-css',
     1627                                                        'wp-block-separator-inline-css',
     1628                                                        'classic-theme-styles-inline-css',
     1629                                                        'third-party-test-block-css',
     1630                                                        'custom-block-styles-css',
     1631                                                ),
     1632                                                $common_late_in_head,
     1633                                                $common_late_in_body
    15231634                                        ),
    15241635                                        'BODY' => array(),
    … …  
    15521663                                'inline_size_limit' => 0,
    15531664                                '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',
     1665                                        'HEAD' => array_merge(
     1666                                                $early_common_styles,
     1667                                                array(
     1668                                                        'wp-block-library-css',
     1669                                                        'classic-theme-styles-css',
     1670                                                        'third-party-test-block-css',
     1671                                                        'custom-block-styles-css',
     1672                                                        'global-styles-inline-css',
     1673                                                ),
     1674                                                $common_late_in_head
    15651675                                        ),
    1566                                         'BODY' => array(
    1567                                                 'late-css',
    1568                                                 'late-inline-css',
    1569                                                 'core-block-supports-inline-css',
    1570                                         ),
     1676                                        'BODY' => $common_late_in_body,
    15711677                                ),
    15721678                        ),
    … …  
    16151721                                'inline_size_limit' => 0,
    16161722                                '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',
     1723                                        'HEAD' => array_merge(
     1724                                                $early_common_styles,
     1725                                                array(
     1726                                                        'classic-theme-styles-css',
     1727                                                        'third-party-test-block-css',
     1728                                                        'custom-block-styles-css',
     1729                                                        'global-styles-inline-css',
     1730                                                ),
     1731                                                $common_late_in_head
    16271732                                        ),
    1628                                         'BODY' => array(
    1629                                                 'late-css',
    1630                                                 'late-inline-css',
    1631                                                 'core-block-supports-inline-css',
    1632                                         ),
     1733                                        'BODY' => $common_late_in_body,
    16331734                                ),
    16341735                        ),
    … …  
    16451746                                'inline_size_limit' => 0,
    16461747                                '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',
     1748                                        'HEAD' => array_merge(
     1749                                                $early_common_styles,
     1750                                                array(
     1751                                                        'wp-block-library-css',
     1752                                                        'wp-block-library-inline-css', // This contains the "OVERRIDDEN" text.
     1753                                                        'wp-block-separator-css',
     1754                                                        'classic-theme-styles-css',
     1755                                                        'third-party-test-block-css',
     1756                                                        'custom-block-styles-css',
     1757                                                        'global-styles-inline-css',
     1758                                                ),
     1759                                                $common_late_in_head,
     1760                                                $common_late_in_body
    16631761                                        ),
    16641762                                        'BODY' => array(),
    … …  
    16721770         *
    16731771         * @ticket 64099
     1772         * @ticket 64354
    16741773         * @covers ::wp_load_classic_theme_block_styles_on_demand
    16751774         * @covers ::wp_hoist_late_printed_styles
    … …  
    16941793                        static function () {
    16951794                                return '/* CUSTOM CSS from Customizer */';
     1795                        }
     1796                );
     1797
     1798                wp_register_style( 'third-party-test-block', 'https://example.com/third-party-test-block.css', array(), null );
     1799                register_block_type(
     1800                        'third-party/test',
     1801                        array(
     1802                                'style_handles' => array( 'third-party-test-block' ),
     1803                        )
     1804                );
     1805
     1806                /*
     1807                 * This is very old guidance about how to enqueue styles for blocks. Certain themes still enqueue block
     1808                 * styles using this action.
     1809                 */
     1810                add_action(
     1811                        'enqueue_block_assets',
     1812                        static function () {
     1813                                wp_enqueue_style( 'custom-block-styles', 'https://example.com/custom-block-styles.css', array(), null );
    16961814                        }
    16971815                );
    … …  
    17471865                $content = apply_filters(
    17481866                        'the_content',
    1749                         '<!-- wp:separator --><hr class="wp-block-separator has-alpha-channel-opacity"/><!-- /wp:separator -->'
     1867                        '<!-- wp:separator --><hr class="wp-block-separator has-alpha-channel-opacity"/><!-- /wp:separator -->' .
     1868                        '<!-- wp:third-party/test --><div>This is only a test!</div><!-- /wp:third-party/test -->'
    17501869                );
    17511870
Note: See TracChangeset for help on using the changeset viewer.