Editor: Retain responsive styles in block style variation partials.

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

@@ -1266,6 +1266,8 @@ protected static function do_opt_in_into_settings( &$context ) {
 	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
 	 * @since 6.3.0 Added the `$valid_variations` parameter.
 	 * @since 6.6.0 Updated schema to allow extended block style variations.
+	 * @since 7.1.1 Updated schema to allow responsive breakpoint states and pseudo-selectors
+	 *              at the top level of `styles` for block style variation partials.
 	 *
 	 * @param array $input               Structure to sanitize.
 	 * @param array $valid_block_names   List of valid block names.
@@ -1427,7 +1429,6 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 					foreach ( array_keys( $responsive_media_queries ) as $breakpoint_state ) {
 						$variation_schema[ $breakpoint_state ]             = $styles_non_top_level;
 						$variation_schema[ $breakpoint_state ]['elements'] = $schema_styles_elements;
-						$variation_schema[ $breakpoint_state ]['blocks']   = $schema_styles_blocks;
 
 						if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) {
 							foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) {
@@ -1457,6 +1458,47 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 		$schema['settings']['blocks']                     = $schema_settings_blocks;
 		$schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA );
 
+		/*
+		 * Add block style variation states to the top-level styles schema.
+		 *
+		 * Block style variations defined in a standalone JSON partial within a
+		 * theme's `styles` directory declare their styles at the root of the
+		 * `styles` object, so they are sanitized against the top-level schema.
+		 * It needs to allow the same states that are allowed for variations
+		 * declared inline in theme.json, otherwise those states are silently
+		 * removed as unknown keys.
+		 *
+		 * The `blockTypes` property is only present on block style variation
+		 * partials, so it both identifies the config as a variation and
+		 * determines which pseudo-selectors are valid for it. Regular
+		 * theme.json files are unaffected.
+		 */
+		if ( ! empty( $input['blockTypes'] ) && is_array( $input['blockTypes'] ) ) {
+			$variation_pseudo_selectors = array();
+			foreach ( $input['blockTypes'] as $variation_block_type ) {
+				if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $variation_block_type ] ) ) {
+					$variation_pseudo_selectors = array_merge(
+						$variation_pseudo_selectors,
+						static::VALID_BLOCK_PSEUDO_SELECTORS[ $variation_block_type ]
+					);
+				}
+			}
+			$variation_pseudo_selectors = array_unique( $variation_pseudo_selectors );
+
+			foreach ( array_keys( $responsive_media_queries ) as $breakpoint_state ) {
+				$schema['styles'][ $breakpoint_state ]             = $styles_non_top_level;
+				$schema['styles'][ $breakpoint_state ]['elements'] = $schema_styles_elements;
+
+				foreach ( $variation_pseudo_selectors as $pseudo_selector ) {
+					$schema['styles'][ $breakpoint_state ][ $pseudo_selector ] = $styles_non_top_level;
+				}
+			}
+
+			foreach ( $variation_pseudo_selectors as $pseudo_selector ) {
+				$schema['styles'][ $pseudo_selector ] = $styles_non_top_level;
+			}
+		}
+
 		// Remove anything that's not present in the schema.
 		foreach ( array( 'styles', 'settings' ) as $subtree ) {
 			if ( ! isset( $input[ $subtree ] ) ) {

tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-pseudo.json

@@ -0,0 +1,26 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/navigation-link" ],
+	"slug": "pseudo-variation",
+	"title": "Pseudo Variation",
+	"styles": {
+		"color": {
+			"text": "red"
+		},
+		":hover": {
+			"color": {
+				"text": "blue"
+			}
+		},
+		"@tablet": {
+			"color": {
+				"text": "green"
+			},
+			":hover": {
+				"color": {
+					"text": "purple"
+				}
+			}
+		}
+	}
+}

tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-responsive.json

@@ -0,0 +1,21 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/preformatted" ],
+	"slug": "responsive-variation",
+	"title": "Responsive Variation",
+	"styles": {
+		"typography": {
+			"fontSize": "40px"
+		},
+		"@tablet": {
+			"typography": {
+				"fontSize": "28px"
+			}
+		},
+		"@mobile": {
+			"typography": {
+				"fontSize": "16px"
+			}
+		}
+	}
+}