Skip to content

Commit fb20072

Browse files
oandregaloandregal
committed
Global styles: prevent duplicate CSS for block style variations.
Props aaronrobertshaw, mukesh27, ramonopoly, isabel_brison, oandregal. Fixes #61443. git-svn-id: https://develop.svn.wordpress.org/trunk@58422 602fd350-edb4-49c9-b593-d223f7449a82
1 parent c00ad5a commit fb20072

3 files changed

Lines changed: 113 additions & 14 deletions

File tree

‎src/wp-includes/block-supports/block-style-variations.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,9 @@ function wp_render_block_style_variation_support_styles( $parsed_block ) {
136136
array( 'styles' ),
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
);
143144

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -750,7 +750,7 @@ public static function get_element_class_name( $element ) {
750750
* @param string $origin Optional. What source of data this object represents.
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';
756756
}
@@ -1247,7 +1247,8 @@ public function get_settings() {
12471247
* @since 5.8.0
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:
12531254
* - `variables`: only the CSS Custom Properties for presets & custom ones.
@@ -1257,9 +1258,10 @@ public function get_settings() {
12571258
* @param array $options {
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.
12651267
*/
@@ -1281,7 +1283,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
12811283
}
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

12871289
$root_style_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
@@ -2446,12 +2448,18 @@ protected static function get_setting_nodes( $theme_json, $selectors = array() )
24462448
* ]
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'] ) ) {
24572465
return $nodes;
@@ -2493,7 +2501,7 @@ protected static function get_style_nodes( $theme_json, $selectors = array() ) {
24932501
return $nodes;
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;
24992507
}
@@ -2564,12 +2572,19 @@ private static function update_separator_declarations( $declarations ) {
25642572
*
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'] ) ) {
25752590
return $nodes;
@@ -2597,7 +2612,8 @@ private static function get_block_nodes( $theme_json ) {
25972612
}
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(
26032619
'path' => array( 'styles', 'blocks', $name, 'variations', $variation ),
@@ -3280,7 +3296,8 @@ public static function remove_insecure_properties( $theme_json, $origin = 'theme
32803296
$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names, $valid_variations );
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 ) {
32863303
$input = _wp_array_get( $theme_json, $metadata['path'], array() );

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5500,4 +5500,85 @@ public function test_scope_style_node_selectors() {
55005500

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
}

0 commit comments

Comments
 (0)