Add test for variation styles merge order

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

@@ -1289,4 +1289,93 @@ public function test_get_resolved_theme_uris() {
 
 		$this->assertSame( $expected_data, $actual );
 	}
+
+	/**
+	 * Tests that block style variations data gets merged in the following
+	 * priority order, from highest priority to lowest.
+	 *
+	 * - `styles.blocks.blockType.variations` from theme.json
+	 * - `styles.variations` from theme.json
+	 * - variations from block style variation files under `/styles`
+	 * - variations from `WP_Block_Styles_Registry`
+	 */
+	public function test_block_style_variation_merge_order() {
+		switch_theme( 'block-theme-child-with-block-style-variations' );
+
+		/*
+		 * Register style for a block that isn't included in the block style variation's partial
+		 * theme.json's blockTypes. The name must match though so we can ensure the partial's
+		 * styles do not get applied to this block.
+		 */
+		register_block_style(
+			'core/heading',
+			array(
+				'name'  => 'block-style-variation-b',
+				'label' => 'Heading only variation',
+			)
+		);
+
+		// Register variation for a block that will be partially overridden at all levels.
+		register_block_style(
+			'core/media-text',
+			array(
+				'name'       => 'block-style-variation-a',
+				'label'      => 'Block Style Variation A',
+				'style_data' => array(
+					'color' => array(
+						'background' => 'pink',
+						'gradient'   => 'var(--custom)',
+					),
+				),
+			)
+		);
+
+		$data         = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+		$block_styles = $data['styles']['blocks'] ?? array();
+		$actual       = array_intersect_key(
+			$block_styles,
+			array_flip( array( 'core/button', 'core/media-text', 'core/heading' ) )
+		);
+		$expected     = array(
+			'core/button'     => array(
+				'variations' => array(
+					'outline' => array(
+						'color' => array(
+							'background' => 'red',
+							'text'       => 'white',
+						),
+					),
+				),
+			),
+			'core/media-text' => array(
+				'variations' => array(
+					'block-style-variation-a' => array(
+						'color'      => array(
+							'background' => 'blue',
+							'gradient'   => 'var(--custom)',
+							'text'       => 'aliceblue',
+						),
+						'typography' => array(
+							'fontSize'   => '1.5em',
+							'lineHeight' => '1.4em',
+						),
+					),
+				),
+			),
+			'core/heading'    => array(
+				'variations' => array(
+					'block-style-variation-b' => array(
+						'typography' => array(
+							'fontSize' => '3em',
+						),
+					),
+				),
+			),
+		);
+
+		unregister_block_style( 'core/heading', 'block-style-variation-b' );
+		unregister_block_style( 'core/media-text', 'block-style-variation-a' );
+
+		$this->assertSameSetsWithIndex( $expected, $actual, 'Merged variation styles do not match.' );
+	}
 }

phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json

@@ -1,4 +1,55 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/theme.json",
-	"version": 3
+	"version": 3,
+	"styles": {
+		"variations": {
+			"outline": {
+				"color": {
+					"background": "green",
+					"text": "white"
+				}
+			},
+			"block-style-variation-a": {
+				"color": {
+					"background": "darkseagreen"
+				},
+				"typography": {
+					"fontSize": "2em",
+					"lineHeight": "1.4em"
+				}
+			}
+		},
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"color": {
+							"background": "red"
+						}
+					}
+				}
+			},
+			"core/media-text": {
+				"variations": {
+					"block-style-variation-a": {
+						"color": {
+							"background": "blue"
+						},
+						"typography": {
+							"fontSize": "1.5em"
+						}
+					}
+				}
+			},
+			"core/heading": {
+				"variations": {
+					"block-style-variation-b": {
+						"typography": {
+							"fontSize": "3em"
+						}
+					}
+				}
+			}
+		}
+	}
 }