Section styles: consolidate variation name (#62550)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

backport-changelog/6.6/6824.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6824
+
+* https://github.com/WordPress/gutenberg/pull/62550

lib/block-supports/block-style-variations.php

@@ -244,7 +244,7 @@ function gutenberg_resolve_block_style_variations( $variations ) {
 		 * Block style variations read in via standalone theme.json partials
 		 * need to have their name set to the kebab case version of their title.
 		 */
-		$variation_name = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
+		$variation_name = $have_named_variations ? $key : ( $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] ) );
 
 		foreach ( $supported_blocks as $block_type ) {
 			// Add block style variation data under current block type.
@@ -430,7 +430,7 @@ function gutenberg_register_block_style_variations_from_theme_json_data( $variat
 		 * Block style variations read in via standalone theme.json partials
 		 * need to have their name set to the kebab case version of their title.
 		 */
-		$variation_name  = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
+		$variation_name  = $have_named_variations ? $key : ( $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] ) );
 		$variation_label = $variation['title'] ?? $variation_name;
 
 		foreach ( $supported_blocks as $block_type ) {

lib/class-wp-theme-json-gutenberg.php

@@ -357,6 +357,7 @@ class WP_Theme_JSON_Gutenberg {
 		'styles',
 		'templateParts',
 		'title',
+		'slug',
 		'version',
 	);
 

phpunit/block-supports/block-style-variations-test.php

@@ -94,6 +94,22 @@ public function test_add_registered_block_styles_to_theme_data() {
 			),
 		);
 
+		/*
+		 * This style is to be deliberately overwritten by the theme.json partial
+		 * See `phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json`.
+		 */
+		register_block_style(
+			'core/group',
+			array(
+				'name'       => 'WithSlug',
+				'style_data' => array(
+					'color' => array(
+						'background' => 'whitesmoke',
+						'text'       => 'black',
+					),
+				),
+			)
+		);
 		register_block_style(
 			'core/group',
 			array(
@@ -106,6 +122,12 @@ public function test_add_registered_block_styles_to_theme_data() {
 		$group_styles = $theme_json['styles']['blocks']['core/group'] ?? array();
 		$expected     = array(
 			'variations' => array(
+				'WithSlug'                => array(
+					'color' => array(
+						'background' => 'aliceblue',
+						'text'       => 'midnightblue',
+					),
+				),
 				'my-variation'            => $variation_styles_data,
 
 				/*
@@ -129,6 +151,7 @@ public function test_add_registered_block_styles_to_theme_data() {
 		);
 
 		unregister_block_style( 'core/group', 'my-variation' );
+		unregister_block_style( 'core/group', 'WithSlug' );
 
 		$this->assertSameSetsWithIndex( $group_styles, $expected );
 	}

phpunit/class-wp-theme-json-resolver-test.php

@@ -1118,6 +1118,18 @@ public function data_get_style_variations() {
 							),
 						),
 					),
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns' ),
+						'version'    => 3,
+						'slug'       => 'WithSlug',
+						'title'      => 'With Slug',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'aliceblue',
+								'text'       => 'midnightblue',
+							),
+						),
+					),
 				),
 			),
 		);

phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json

@@ -0,0 +1,12 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"slug": "WithSlug",
+	"title": "With Slug",
+	"styles": {
+		"color": {
+			"background": "aliceblue",
+			"text": "midnightblue"
+		}
+	}
+}

schemas/json/theme.json

@@ -2700,6 +2700,10 @@
 			"type": "string",
 			"description": "Title of the global styles variation. If not defined, the file name will be used."
 		},
+		"slug": {
+			"type": "string",
+			"description": "Slug of the global styles variation. If not defined, the kebab-case title will be used."
+		},
 		"description": {
 			"type": "string",
 			"description": "Description of the global styles variation."