Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block Styles: Fix block style variation selector generation #6053

Closed
wants to merge 2 commits into from
Closed

Block Styles: Fix block style variation selector generation #6053

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dbdd07
Block Styles: Fix block style variation selector generation
aaronrobertshaw Jan 29, 2024
875cd02
Fix phpdoc
youknowriad Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1032,7 +1032,7 @@ protected static function get_blocks_metadata() {
if ( ! empty( $block_type->styles ) ) {
$style_selectors = array();
foreach ( $block_type->styles as $style ) {
$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
$style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
}
static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
}
Expand Down Expand Up @@ -3925,4 +3925,39 @@ function ( $carry, $item ) {
$theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
return $theme_json;
}

/**
* Generates a selector for a block style variation.
*
* @since 6.5.0
*
* @param string $variation_name Name of the block style variation.
* @param string $block_selector CSS selector for the block.
*
* @return string Block selector with block style variation selector added to it.
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
*/
protected static function get_block_style_variation_selector( $variation_name, $block_selector ) {
$variation_class = ".is-style-$variation_name";

if ( ! $block_selector ) {
return $variation_class;
}

$limit = 1;
$selector_parts = explode( ',', $block_selector );
$result = array();

foreach ( $selector_parts as $part ) {
$result[] = preg_replace_callback(
'/((?::\([^)]+\))?\s*)([^\s:]+)/',
function ( $matches ) use ( $variation_class ) {
return $matches[1] . $matches[2] . $variation_class;
},
$part,
$limit
);
}

return implode( ',', $result );
}
}
88 changes: 88 additions & 0 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5120,4 +5120,92 @@ public function test_sanitize_indexed_arrays() {
$sanitized_theme_json = $theme_json->get_raw_data();
$this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json, 'Sanitized theme.json does not match' );
}

/**
* Tests the correct application of a block style variation's selector to
* a block's selector.
*
* @ticket 60453
*
* @dataProvider data_get_block_style_variation_selector
*
* @param string $selector CSS selector.
* @param string $expected Expected block style variation CSS selector.
*/
public function test_get_block_style_variation_selector( $selector, $expected ) {
$theme_json = new ReflectionClass( 'WP_Theme_JSON' );

$func = $theme_json->getMethod( 'get_block_style_variation_selector' );
$func->setAccessible( true );

$actual = $func->invoke( null, 'custom', $selector );

$this->assertEquals( $expected, $actual );
}

/**
* Data provider for generating block style variation selectors.
*
* @return array[]
*/
public function data_get_block_style_variation_selector() {
return array(
'empty block selector' => array(
'selector' => '',
'expected' => '.is-style-custom',
),
'class selector' => array(
'selector' => '.wp-block',
'expected' => '.wp-block.is-style-custom',
),
'id selector' => array(
'selector' => '#wp-block',
'expected' => '#wp-block.is-style-custom',
),
'element tag selector' => array(
'selector' => 'p',
'expected' => 'p.is-style-custom',
),
'attribute selector' => array(
'selector' => '[style*="color"]',
'expected' => '[style*="color"].is-style-custom',
),
'descendant selector' => array(
'selector' => '.wp-block .inner',
'expected' => '.wp-block.is-style-custom .inner',
),
'comma separated selector' => array(
'selector' => '.wp-block .inner, .wp-block .alternative',
'expected' => '.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
),
'pseudo selector' => array(
'selector' => 'div:first-child',
'expected' => 'div.is-style-custom:first-child',
),
':is selector' => array(
'selector' => '.wp-block:is(.outer .inner:first-child)',
'expected' => '.wp-block.is-style-custom:is(.outer .inner:first-child)',
),
':not selector' => array(
'selector' => '.wp-block:not(.outer .inner:first-child)',
'expected' => '.wp-block.is-style-custom:not(.outer .inner:first-child)',
),
':has selector' => array(
'selector' => '.wp-block:has(.outer .inner:first-child)',
'expected' => '.wp-block.is-style-custom:has(.outer .inner:first-child)',
),
':where selector' => array(
'selector' => '.wp-block:where(.outer .inner:first-child)',
'expected' => '.wp-block.is-style-custom:where(.outer .inner:first-child)',
),
'wrapping :where selector' => array(
'selector' => ':where(.outer .inner:first-child)',
'expected' => ':where(.outer.is-style-custom .inner:first-child)',
),
'complex' => array(
'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',
'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',
),
);
}
}
Loading