WordPress.org
Get WordPress

Make WordPress Core

Changeset 58422


Ignore:
Timestamp:
06/17/2024 09:42:57 AM (2 years ago)
Author:
oandregal
Message:

Global styles: prevent duplicate CSS for block style variations.

Props aaronrobertshaw, mukesh27, ramonopoly, isabel_brison, oandregal.
Fixes #61443.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-supports/block-style-variations.php

    r58413 r58422  
    137137                array( 'custom' ),
    138138                array(
    139                         'skip_root_layout_styles' => true,
    140                         'scope'                   => ".$class_name",
     139                        'include_block_style_variations' => true,
     140                        'skip_root_layout_styles'        => true,
     141                        'scope'                          => ".$class_name",
    141142                )
    142143        );

  • trunk/src/wp-includes/class-wp-theme-json.php

    r58421 r58422  
    751751         *                           One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
    752752         */
    753         public function __construct( $theme_json = array( 'version' => WP_Theme_JSON::LATEST_SCHEMA ), $origin = 'theme' ) {
     753        public function __construct( $theme_json = array( 'version' => self::LATEST_SCHEMA ), $origin = 'theme' ) {
    754754                if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
    755755                        $origin = 'theme';
    … …  
    12481248         * @since 5.9.0 Removed the `$type` parameter, added the `$types` and `$origins` parameters.
    12491249         * @since 6.3.0 Add fallback layout styles for Post Template when block gap support isn't available.
    1250          * @since 6.6.0 Added `skip_root_layout_styles` option to omit layout styles if desired.
     1250         * @since 6.6.0 Added boolean `skip_root_layout_styles` and `include_block_style_variations` options
     1251         *              to control styles output as desired.
    12511252         *
    12521253         * @param string[] $types   Types of styles to load. Will load all by default. It accepts:
    … …  
    12581259         *     Optional. An array of options for now used for internal purposes only (may change without notice).
    12591260         *
    1260          *     @type string $scope                   Makes sure all style are scoped to a given selector
    1261          *     @type string $root_selector           Overwrites and forces a given selector to be used on the root node
    1262          *     @type bool   $skip_root_layout_styles Omits root layout styles from the generated stylesheet. Default false.
     1261         *     @type string $scope                           Makes sure all style are scoped to a given selector
     1262         *     @type string $root_selector                   Overwrites and forces a given selector to be used on the root node
     1263         *     @type bool   $skip_root_layout_styles         Omits root layout styles from the generated stylesheet. Default false.
     1264         *     @type bool   $include_block_style_variations  Includes styles for block style variations in the generated stylesheet. Default false.
    12631265         * }
    12641266         * @return string The resulting stylesheet.
    … …  
    12821284
    12831285                $blocks_metadata = static::get_blocks_metadata();
    1284                 $style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
     1286                $style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata, $options );
    12851287                $setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
    12861288
    … …  
    24472449         *
    24482450         * @since 5.8.0
     2451         * @since 6.6.0 Added options array for modifying generated nodes.
    24492452         *
    24502453         * @param array $theme_json The tree to extract style nodes from.
    24512454         * @param array $selectors  List of selectors per block.
     2455         * @param array $options {
     2456         *     Optional. An array of options for now used for internal purposes only (may change without notice).
     2457         *
     2458         *     @type bool $include_block_style_variations Includes style nodes for block style variations. Default false.
     2459         * }
    24522460         * @return array An array of style nodes metadata.
    24532461         */
    2454         protected static function get_style_nodes( $theme_json, $selectors = array() ) {
     2462        protected static function get_style_nodes( $theme_json, $selectors = array(), $options = array() ) {
    24552463                $nodes = array();
    24562464                if ( ! isset( $theme_json['styles'] ) ) {
    … …  
    24942502                }
    24952503
    2496                 $block_nodes = static::get_block_nodes( $theme_json );
     2504                $block_nodes = static::get_block_nodes( $theme_json, $selectors, $options );
    24972505                foreach ( $block_nodes as $block_node ) {
    24982506                        $nodes[] = $block_node;
    … …  
    25652573         * @since 6.1.0
    25662574         * @since 6.3.0 Refactored and stabilized selectors API.
     2575         * @since 6.6.0 Added optional selectors and options for generating block nodes.
    25672576         *
    25682577         * @param array $theme_json The theme.json converted to an array.
     2578         * @param array $selectors  Optional list of selectors per block.
     2579         * @param array $options {
     2580         *     Optional. An array of options for now used for internal purposes only (may change without notice).
     2581         *
     2582         *     @type bool   $include_block_style_variations  Includes nodes for block style variations. Default false.
     2583         * }
    25692584         * @return array The block nodes in theme.json.
    25702585         */
    2571         private static function get_block_nodes( $theme_json ) {
    2572                 $selectors = static::get_blocks_metadata();
     2586        private static function get_block_nodes( $theme_json, $selectors = array(), $options = array() ) {
     2587                $selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
    25732588                $nodes     = array();
    25742589                if ( ! isset( $theme_json['styles'] ) ) {
    … …  
    25982613
    25992614                        $variation_selectors = array();
    2600                         if ( isset( $node['variations'] ) ) {
     2615                        $include_variations  = $options['include_block_style_variations'] ?? false;
     2616                        if ( $include_variations && isset( $node['variations'] ) ) {
    26012617                                foreach ( $node['variations'] as $variation => $node ) {
    26022618                                        $variation_selectors[] = array(
    … …  
    32813297
    32823298                $blocks_metadata = static::get_blocks_metadata();
    3283                 $style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
     3299                $style_options   = array( 'include_block_style_variations' => true ); // Allow variations data.
     3300                $style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options );
    32843301
    32853302                foreach ( $style_nodes as $metadata ) {

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r58378 r58422  
    55015501                $this->assertEquals( $expected, $actual );
    55025502        }
     5503
     5504        /**
     5505         * Block style variations styles aren't generated by default. This test covers
     5506         * the `get_block_nodes` does not include variations by default, preventing
     5507         * the inclusion of their styles.
     5508         *
     5509         * @ticket 61443
     5510         */
     5511        public function test_opt_out_of_block_style_variations_by_default() {
     5512                $theme_json = new ReflectionClass( 'WP_Theme_JSON' );
     5513
     5514                $func = $theme_json->getMethod( 'get_block_nodes' );
     5515                $func->setAccessible( true );
     5516
     5517                $theme_json = array(
     5518                        'version' => WP_Theme_JSON::LATEST_SCHEMA,
     5519                        'styles'  => array(
     5520                                'blocks' => array(
     5521                                        'core/button' => array(
     5522                                                'variations' => array(
     5523                                                        'outline' => array(
     5524                                                                'color' => array(
     5525                                                                        'background' => 'red',
     5526                                                                ),
     5527                                                        ),
     5528                                                ),
     5529                                        ),
     5530                                ),
     5531                        ),
     5532                );
     5533                $selectors  = array();
     5534
     5535                $block_nodes       = $func->invoke( null, $theme_json, $selectors );
     5536                $button_variations = $block_nodes[0]['variations'] ?? array();
     5537
     5538                $this->assertEquals( array(), $button_variations );
     5539        }
     5540
     5541        /**
     5542         * Block style variations styles aren't generated by default. This test ensures
     5543         * variations are included by `get_block_nodes` when requested.
     5544         *
     5545         * @ticket 61443
     5546         */
     5547        public function test_opt_in_to_block_style_variations() {
     5548                $theme_json = new ReflectionClass( 'WP_Theme_JSON' );
     5549
     5550                $func = $theme_json->getMethod( 'get_block_nodes' );
     5551                $func->setAccessible( true );
     5552
     5553                $theme_json = array(
     5554                        'version' => WP_Theme_JSON::LATEST_SCHEMA,
     5555                        'styles'  => array(
     5556                                'blocks' => array(
     5557                                        'core/button' => array(
     5558                                                'variations' => array(
     5559                                                        'outline' => array(
     5560                                                                'color' => array(
     5561                                                                        'background' => 'red',
     5562                                                                ),
     5563                                                        ),
     5564                                                ),
     5565                                        ),
     5566                                ),
     5567                        ),
     5568                );
     5569                $selectors  = array();
     5570                $options    = array( 'include_block_style_variations' => true );
     5571
     5572                $block_nodes       = $func->invoke( null, $theme_json, $selectors, $options );
     5573                $button_variations = $block_nodes[0]['variations'] ?? array();
     5574
     5575                $expected = array(
     5576                        array(
     5577                                'path'     => array( 'styles', 'blocks', 'core/button', 'variations', 'outline' ),
     5578                                'selector' => '.wp-block-button.is-style-outline .wp-block-button__link',
     5579                        ),
     5580                );
     5581
     5582                $this->assertEquals( $expected, $button_variations );
     5583        }
    55035584}
Note: See TracChangeset for help on using the changeset viewer.