Make WordPress Core

Changeset 57547


Ignore:
Timestamp:
02/07/2024 08:51:39 AM (4 months ago)
Author:
youknowriad
Message:

Editor: Fix block style variation selector generation.

These changes fix the generation of selectors for block style variations. Previously, an incorrect CSS selector could be generated if the block's base selector used an element tag etc.

Props aaronrobertshaw, youknowriad, mukesh27.
Fixes #60453.

Location:
trunk
Files:
2 edited

Legend:

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

    r57496 r57547  
    10331033                $style_selectors = array();
    10341034                foreach ( $block_type->styles as $style ) {
    1035                     $style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
     1035                    $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
    10361036                }
    10371037                static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
     
    39263926        return $theme_json;
    39273927    }
     3928
     3929    /**
     3930     * Generates a selector for a block style variation.
     3931     *
     3932     * @since 6.5.0
     3933     *
     3934     * @param string $variation_name Name of the block style variation.
     3935     * @param string $block_selector CSS selector for the block.
     3936     * @return string Block selector with block style variation selector added to it.
     3937     */
     3938    protected static function get_block_style_variation_selector( $variation_name, $block_selector ) {
     3939        $variation_class = ".is-style-$variation_name";
     3940
     3941        if ( ! $block_selector ) {
     3942            return $variation_class;
     3943        }
     3944
     3945        $limit          = 1;
     3946        $selector_parts = explode( ',', $block_selector );
     3947        $result         = array();
     3948
     3949        foreach ( $selector_parts as $part ) {
     3950            $result[] = preg_replace_callback(
     3951                '/((?::\([^)]+\))?\s*)([^\s:]+)/',
     3952                function ( $matches ) use ( $variation_class ) {
     3953                    return $matches[1] . $matches[2] . $variation_class;
     3954                },
     3955                $part,
     3956                $limit
     3957            );
     3958        }
     3959
     3960        return implode( ',', $result );
     3961    }
    39283962}
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r57498 r57547  
    51215121        $this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json, 'Sanitized theme.json does not match' );
    51225122    }
     5123
     5124    /**
     5125     * Tests the correct application of a block style variation's selector to
     5126     * a block's selector.
     5127     *
     5128     * @ticket 60453
     5129     *
     5130     * @dataProvider data_get_block_style_variation_selector
     5131     *
     5132     * @param string $selector  CSS selector.
     5133     * @param string $expected  Expected block style variation CSS selector.
     5134     */
     5135    public function test_get_block_style_variation_selector( $selector, $expected ) {
     5136        $theme_json = new ReflectionClass( 'WP_Theme_JSON' );
     5137
     5138        $func = $theme_json->getMethod( 'get_block_style_variation_selector' );
     5139        $func->setAccessible( true );
     5140
     5141        $actual = $func->invoke( null, 'custom', $selector );
     5142
     5143        $this->assertEquals( $expected, $actual );
     5144    }
     5145
     5146    /**
     5147     * Data provider for generating block style variation selectors.
     5148     *
     5149     * @return array[]
     5150     */
     5151    public function data_get_block_style_variation_selector() {
     5152        return array(
     5153            'empty block selector'     => array(
     5154                'selector' => '',
     5155                'expected' => '.is-style-custom',
     5156            ),
     5157            'class selector'           => array(
     5158                'selector' => '.wp-block',
     5159                'expected' => '.wp-block.is-style-custom',
     5160            ),
     5161            'id selector'              => array(
     5162                'selector' => '#wp-block',
     5163                'expected' => '#wp-block.is-style-custom',
     5164            ),
     5165            'element tag selector'     => array(
     5166                'selector' => 'p',
     5167                'expected' => 'p.is-style-custom',
     5168            ),
     5169            'attribute selector'       => array(
     5170                'selector' => '[style*="color"]',
     5171                'expected' => '[style*="color"].is-style-custom',
     5172            ),
     5173            'descendant selector'      => array(
     5174                'selector' => '.wp-block .inner',
     5175                'expected' => '.wp-block.is-style-custom .inner',
     5176            ),
     5177            'comma separated selector' => array(
     5178                'selector' => '.wp-block .inner, .wp-block .alternative',
     5179                'expected' => '.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
     5180            ),
     5181            'pseudo selector'          => array(
     5182                'selector' => 'div:first-child',
     5183                'expected' => 'div.is-style-custom:first-child',
     5184            ),
     5185            ':is selector'             => array(
     5186                'selector' => '.wp-block:is(.outer .inner:first-child)',
     5187                'expected' => '.wp-block.is-style-custom:is(.outer .inner:first-child)',
     5188            ),
     5189            ':not selector'            => array(
     5190                'selector' => '.wp-block:not(.outer .inner:first-child)',
     5191                'expected' => '.wp-block.is-style-custom:not(.outer .inner:first-child)',
     5192            ),
     5193            ':has selector'            => array(
     5194                'selector' => '.wp-block:has(.outer .inner:first-child)',
     5195                'expected' => '.wp-block.is-style-custom:has(.outer .inner:first-child)',
     5196            ),
     5197            ':where selector'          => array(
     5198                'selector' => '.wp-block:where(.outer .inner:first-child)',
     5199                'expected' => '.wp-block.is-style-custom:where(.outer .inner:first-child)',
     5200            ),
     5201            'wrapping :where selector' => array(
     5202                'selector' => ':where(.outer .inner:first-child)',
     5203                'expected' => ':where(.outer.is-style-custom .inner:first-child)',
     5204            ),
     5205            'complex'                  => array(
     5206                'selector' => '.wp:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
     5207                'expected' => '.wp.is-style-custom:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp.is-style-custom:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
     5208            ),
     5209        );
     5210    }
    51235211}
Note: See TracChangeset for help on using the changeset viewer.