WordPress.org
Get WordPress

Make WordPress Core

Changeset 55172


Ignore:
Timestamp:
02/01/2023 01:41:16 PM (4 years ago)
Author:
hellofromTonya
Message:

Editor: Add support for editing block style variations in global styles.

To allow editing of block style variations in global styles, this changeset adds the following for server side support:

  • building of block style schema into WP_Theme_JSON::sanitize().
  • appending of style variation selectors to block metadata in WP_Theme_JSON::get_blocks_metadata().
  • building of selectors and variations for nodes in WP_Theme_JSON::get_block_nodes().

Tests for happy and unhappy paths are included.

Reference:

Follow-up to [54118], [50973], [50959].

Props isabel_brison,
Fixes #57583.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r55142 r55172  
    666666                $schema_settings_blocks = array();
    667667                foreach ( $valid_block_names as $block ) {
    668                         $schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
    669                         $schema_styles_blocks[ $block ]             = $styles_non_top_level;
    670                         $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
     668                        // Build the schema for each block style variation.
     669                        $style_variation_names = array();
     670                        if (
     671                                ! empty( $input['styles']['blocks'][ $block ]['variations'] ) &&
     672                                is_array( $input['styles']['blocks'][ $block ]['variations'] )
     673                        ) {
     674                                $style_variation_names = array_keys( $input['styles']['blocks'][ $block ]['variations'] );
     675                        }
     676
     677                        $schema_styles_variations = array();
     678                        if ( ! empty( $style_variation_names ) ) {
     679                                $schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level );
     680                        }
     681
     682                        $schema_settings_blocks[ $block ]             = static::VALID_SETTINGS;
     683                        $schema_styles_blocks[ $block ]               = $styles_non_top_level;
     684                        $schema_styles_blocks[ $block ]['elements']   = $schema_styles_elements;
     685                        $schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
    671686                }
    672687
    … …  
    814829                                }
    815830                                static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
     831                        }
     832                        // If the block has style variations, append their selectors to the block metadata.
     833                        if ( ! empty( $block_type->styles ) ) {
     834                                $style_selectors = array();
     835                                foreach ( $block_type->styles as $style ) {
     836                                        // The style variation classname is duplicated in the selector to ensure that it overrides core block styles.
     837                                        $style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'] . '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
     838                                }
     839                                static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
    816840                        }
    817841                }
    … …  
    20402064                        }
    20412065
     2066                        $variation_selectors = array();
     2067                        if ( isset( $node['variations'] ) ) {
     2068                                foreach ( $node['variations'] as $variation => $node ) {
     2069                                        $variation_selectors[] = array(
     2070                                                'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
     2071                                                'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
     2072                                        );
     2073                                }
     2074                        }
     2075
    20422076                        $nodes[] = array(
    2043                                 'name'     => $name,
    2044                                 'path'     => array( 'styles', 'blocks', $name ),
    2045                                 'selector' => $selector,
    2046                                 'duotone'  => $duotone_selector,
    2047                                 'features' => $feature_selectors,
     2077                                'name'       => $name,
     2078                                'path'       => array( 'styles', 'blocks', $name ),
     2079                                'selector'   => $selector,
     2080                                'duotone'    => $duotone_selector,
     2081                                'features'   => $feature_selectors,
     2082                                'variations' => $variation_selectors,
    20482083                        );
    20492084
    … …  
    21252160                }
    21262161
     2162                // If there are style variations, generate the declarations for them, including any feature selectors the block may have.
     2163                $style_variation_declarations = array();
     2164                if ( ! empty( $block_metadata['variations'] ) ) {
     2165                        foreach ( $block_metadata['variations'] as $style_variation ) {
     2166                                $style_variation_node     = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
     2167                                $style_variation_selector = $style_variation['selector'];
     2168
     2169                                // If the block has feature selectors, generate the declarations for them within the current style variation.
     2170                                if ( ! empty( $block_metadata['features'] ) ) {
     2171                                        $clean_style_variation_selector = trim( $style_variation_selector );
     2172                                        foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
     2173                                                if ( empty( $style_variation_node[ $feature_name ] ) ) {
     2174                                                        continue;
     2175                                                }
     2176                                                // Prepend the variation selector to the feature selector.
     2177                                                $split_feature_selectors    = explode( ',', $feature_selector );
     2178                                                $feature_selectors          = array_map(
     2179                                                        static function( $split_feature_selector ) use ( $clean_style_variation_selector ) {
     2180                                                                return $clean_style_variation_selector . trim( $split_feature_selector );
     2181                                                        },
     2182                                                        $split_feature_selectors
     2183                                                );
     2184                                                $combined_feature_selectors = implode( ',', $feature_selectors );
     2185
     2186                                                // Compute declarations for the feature.
     2187                                                $new_feature_declarations = static::compute_style_properties( array( $feature_name => $style_variation_node[ $feature_name ] ), $settings, null, $this->theme_json );
     2188
     2189                                                /*
     2190                                                 * Merge new declarations with any that already exist for
     2191                                                 * the feature selector. This may occur when multiple block
     2192                                                 * support features use the same custom selector.
     2193                                                 */
     2194                                                if ( isset( $style_variation_declarations[ $combined_feature_selectors ] ) ) {
     2195                                                        $style_variation_declarations[ $combined_feature_selectors ] = array_merge( $style_variation_declarations[ $combined_feature_selectors ], $new_feature_declarations );
     2196                                                } else {
     2197                                                        $style_variation_declarations[ $combined_feature_selectors ] = $new_feature_declarations;
     2198                                                }
     2199                                                /*
     2200                                                 * Remove the feature from the variation's node now the
     2201                                                 * styles will be included under the feature level selector.
     2202                                                 */
     2203                                                unset( $style_variation_node[ $feature_name ] );
     2204                                        }
     2205                                }
     2206                                // Compute declarations for remaining styles not covered by feature level selectors.
     2207                                $style_variation_declarations[ $style_variation_selector ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
     2208                        }
     2209                }
    21272210                /*
    21282211                 * Get a reference to element name from path.
    … …  
    22132296                foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
    22142297                        $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
     2298                }
     2299
     2300                // 6. Generate and append the style variation rulesets.
     2301                foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
     2302                        $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
    22152303                }
    22162304

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

    r55146 r55172  
    35973597
    35983598        /**
     3599         * @ticket 57583
     3600         *
     3601         * @dataProvider data_sanitize_for_block_with_style_variations
     3602         *
     3603         * @param array $theme_json_variations Theme.json variations to test.
     3604         * @param array $expected_sanitized    Expected results after sanitizing.
     3605         */
     3606        public function test_sanitize_for_block_with_style_variations( $theme_json_variations, $expected_sanitized ) {
     3607                $theme_json = new WP_Theme_JSON(
     3608                        array(
     3609                                'version' => 2,
     3610                                'styles'  => array(
     3611                                        'blocks' => array(
     3612                                                'core/quote' => $theme_json_variations,
     3613                                        ),
     3614                                ),
     3615                        )
     3616                );
     3617
     3618                // Validate structure is sanitized.
     3619                $sanitized_theme_json = $theme_json->get_raw_data();
     3620                $this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
     3621                $this->assertArrayHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json does not have an "styles" key' );
     3622                $this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json['styles'], 'Sanitized theme.json styles does not match' );
     3623        }
     3624
     3625        /**
     3626         * Data provider.
     3627         *
     3628         * @return array
     3629         */
     3630        public function data_sanitize_for_block_with_style_variations() {
     3631                return array(
     3632                        '1 variation with 1 invalid property'   => array(
     3633                                'theme_json_variations' => array(
     3634                                        'variations' => array(
     3635                                                'plain' => array(
     3636                                                        'color' => array(
     3637                                                                'background' => 'hotpink',
     3638                                                        ),
     3639                                                ),
     3640                                        ),
     3641                                ),
     3642                                'expected_sanitized'    => array(
     3643                                        'blocks' => array(
     3644                                                'core/quote' => array(
     3645                                                        'variations' => array(
     3646                                                                'plain' => array(
     3647                                                                        'color' => array(
     3648                                                                                'background' => 'hotpink',
     3649                                                                        ),
     3650                                                                ),
     3651                                                        ),
     3652                                                ),
     3653                                        ),
     3654                                ),
     3655                        ),
     3656                        '1 variation with 2 invalid properties' => array(
     3657                                'theme_json_variations' => array(
     3658                                        'variations' => array(
     3659                                                'plain' => array(
     3660                                                        'color'            => array(
     3661                                                                'background' => 'hotpink',
     3662                                                        ),
     3663                                                        'invalidProperty1' => 'value1',
     3664                                                        'invalidProperty2' => 'value2',
     3665                                                ),
     3666                                        ),
     3667                                ),
     3668                                'expected_sanitized'    => array(
     3669                                        'blocks' => array(
     3670                                                'core/quote' => array(
     3671                                                        'variations' => array(
     3672                                                                'plain' => array(
     3673                                                                        'color' => array(
     3674                                                                                'background' => 'hotpink',
     3675                                                                        ),
     3676                                                                ),
     3677                                                        ),
     3678                                                ),
     3679                                        ),
     3680                                ),
     3681                        ),
     3682                        '2 variations with 1 invalid property'  => array(
     3683                                'theme_json_variations' => array(
     3684                                        'variations' => array(
     3685                                                'plain' => array(
     3686                                                        'color'            => array(
     3687                                                                'background' => 'hotpink',
     3688                                                        ),
     3689                                                        'invalidProperty1' => 'value1',
     3690                                                ),
     3691                                                'basic' => array(
     3692                                                        'color' => array(
     3693                                                                'background' => '#ffffff',
     3694                                                                'text'       => '#000000',
     3695                                                        ),
     3696                                                        'foo'   => 'bar',
     3697                                                ),
     3698                                        ),
     3699                                ),
     3700                                'expected_sanitized'    => array(
     3701                                        'blocks' => array(
     3702                                                'core/quote' => array(
     3703                                                        'variations' => array(
     3704                                                                'plain' => array(
     3705                                                                        'color' => array(
     3706                                                                                'background' => 'hotpink',
     3707                                                                        ),
     3708                                                                ),
     3709                                                                'basic' => array(
     3710                                                                        'color' => array(
     3711                                                                                'background' => '#ffffff',
     3712                                                                                'text'       => '#000000',
     3713                                                                        ),
     3714                                                                ),
     3715                                                        ),
     3716                                                ),
     3717                                        ),
     3718                                ),
     3719                        ),
     3720                );
     3721        }
     3722
     3723        /**
     3724         * @ticket 57583
     3725         *
     3726         * @dataProvider data_sanitize_with_invalid_style_variation
     3727         *
     3728         * @param array $theme_json_variations The theme.json variations to test.
     3729         */
     3730        public function test_sanitize_with_invalid_style_variation( $theme_json_variations ) {
     3731                $theme_json = new WP_Theme_JSON(
     3732                        array(
     3733                                'version' => 2,
     3734                                'styles'  => array(
     3735                                        'blocks' => array(
     3736                                                'core/quote' => $theme_json_variations,
     3737                                        ),
     3738                                ),
     3739                        )
     3740                );
     3741
     3742                // Validate structure is sanitized.
     3743                $sanitized_theme_json = $theme_json->get_raw_data();
     3744                $this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
     3745                $this->assertArrayNotHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json should not have a "styles" key' );
     3746
     3747        }
     3748
     3749        /**
     3750         * Data provider.
     3751         *
     3752         * @return array
     3753         */
     3754        public function data_sanitize_with_invalid_style_variation() {
     3755                return array(
     3756                        'empty string variation' => array(
     3757                                array(
     3758                                        'variations' => '',
     3759                                ),
     3760                        ),
     3761                        'boolean variation'      => array(
     3762                                array(
     3763                                        'variations' => false,
     3764                                ),
     3765                        ),
     3766                );
     3767        }
     3768
     3769        /**
     3770         * @ticket 57583
     3771         *
     3772         * @dataProvider data_get_styles_for_block_with_style_variations
     3773         *
     3774         * @param array  $theme_json_variations Theme.json variations to test.
     3775         * @param string $metadata_variations   Style variations to test.
     3776         * @param string $expected              Expected results for styling.
     3777         */
     3778        public function test_get_styles_for_block_with_style_variations( $theme_json_variations, $metadata_variations, $expected ) {
     3779                $theme_json = new WP_Theme_JSON(
     3780                        array(
     3781                                'version' => 2,
     3782                                'styles'  => array(
     3783                                        'blocks' => array(
     3784                                                'core/quote' => $theme_json_variations,
     3785                                        ),
     3786                                ),
     3787                        )
     3788                );
     3789
     3790                // Validate styles are generated properly.
     3791                $metadata      = array(
     3792                        'path'       => array( 'styles', 'blocks', 'core/quote' ),
     3793                        'selector'   => '.wp-block-quote',
     3794                        'variations' => $metadata_variations,
     3795                );
     3796                $actual_styles = $theme_json->get_styles_for_block( $metadata );
     3797                $this->assertSame( $expected, $actual_styles );
     3798        }
     3799
     3800        /**
     3801         * Data provider.
     3802         *
     3803         * @return array
     3804         */
     3805        public function data_get_styles_for_block_with_style_variations() {
     3806                $plain = array(
     3807                        'metadata' => array(
     3808                                'path'     => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ),
     3809                                'selector' => '.is-style-plain.is-style-plain.wp-block-quote',
     3810                        ),
     3811                        'styles'   => '.is-style-plain.is-style-plain.wp-block-quote{background-color: hotpink;}',
     3812                );
     3813                $basic = array(
     3814                        'metadata' => array(
     3815                                'path'     => array( 'styles', 'blocks', 'core/quote', 'variations', 'basic' ),
     3816                                'selector' => '.is-style-basic.is-style-basic.wp-block-quote',
     3817                        ),
     3818                        'styles'   => '.is-style-basic.is-style-basic.wp-block-quote{background-color: #ffffff;color: #000000;}',
     3819                );
     3820
     3821                return array(
     3822                        '1 variation with 1 invalid property'   => array(
     3823                                'theme_json_variations' => array(
     3824                                        'variations' => array(
     3825                                                'plain' => array(
     3826                                                        'color' => array(
     3827                                                                'background' => 'hotpink',
     3828                                                        ),
     3829                                                ),
     3830                                        ),
     3831                                ),
     3832                                'metadata_variation'    => array( $plain['metadata'] ),
     3833                                'expected'              => $plain['styles'],
     3834                        ),
     3835                        '1 variation with 2 invalid properties' => array(
     3836                                'theme_json_variations' => array(
     3837                                        'variations' => array(
     3838                                                'plain' => array(
     3839                                                        'color'            => array(
     3840                                                                'background' => 'hotpink',
     3841                                                        ),
     3842                                                        'invalidProperty1' => 'value1',
     3843                                                        'invalidProperty2' => 'value2',
     3844                                                ),
     3845                                        ),
     3846                                ),
     3847                                'metadata_variation'    => array( $plain['metadata'] ),
     3848                                'expected'              => $plain['styles'],
     3849                        ),
     3850                        '2 variations with 1 invalid property'  => array(
     3851                                'theme_json_variations' => array(
     3852                                        'variations' => array(
     3853                                                'plain' => array(
     3854                                                        'color'            => array(
     3855                                                                'background' => 'hotpink',
     3856                                                        ),
     3857                                                        'invalidProperty1' => 'value1',
     3858                                                ),
     3859                                                'basic' => array(
     3860                                                        'color' => array(
     3861                                                                'background' => '#ffffff',
     3862                                                                'text'       => '#000000',
     3863                                                        ),
     3864                                                        'foo'   => 'bar',
     3865                                                ),
     3866                                        ),
     3867                                ),
     3868                                'metadata_variation'    => array( $plain['metadata'], $basic['metadata'] ),
     3869                                'expected_styles'       => $plain['styles'] . $basic['styles'],
     3870                        ),
     3871                        '2 variations with multiple invalid properties' => array(
     3872                                'theme_json_variations' => array(
     3873                                        'variations' => array(
     3874                                                'plain' => array(
     3875                                                        'color'            => array(
     3876                                                                'background' => 'hotpink',
     3877                                                        ),
     3878                                                        'invalidProperty1' => 'value1',
     3879                                                        'invalidProperty2' => 'value2',
     3880                                                ),
     3881                                                'basic' => array(
     3882                                                        'foo'   => 'foo',
     3883                                                        'color' => array(
     3884                                                                'background' => '#ffffff',
     3885                                                                'text'       => '#000000',
     3886                                                        ),
     3887                                                        'bar'   => 'bar',
     3888                                                        'baz'   => 'baz',
     3889                                                ),
     3890                                        ),
     3891                                ),
     3892                                'metadata_variation'    => array( $plain['metadata'], $basic['metadata'] ),
     3893                                'expected_styles'       => $plain['styles'] . $basic['styles'],
     3894                        ),
     3895                );
     3896        }
     3897
     3898        /**
    35993899         * @ticket 56611
    36003900         */
Note: See TracChangeset for help on using the changeset viewer.