From c001fbe714de6ee6d4424e147d27f8a99d2581b7 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 22 Jun 2026 13:27:27 +0800 Subject: [PATCH 1/2] Use `@` symbol prefix for responsive style states --- src/wp-includes/block-supports/states.php | 2 +- src/wp-includes/class-wp-theme-json.php | 6 ++-- tests/phpunit/tests/block-supports/states.php | 26 +++++++-------- tests/phpunit/tests/theme/wpThemeJson.php | 32 +++++++++---------- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/wp-includes/block-supports/states.php b/src/wp-includes/block-supports/states.php index 82f6b43a9b2a6..3a64b410dbdc7 100644 --- a/src/wp-includes/block-supports/states.php +++ b/src/wp-includes/block-supports/states.php @@ -4,7 +4,7 @@ * * Generates scoped CSS for per-instance state styles declared in block attributes, * including pseudo-states (e.g., `style[':hover']`) and responsive states - * (e.g., `style['mobile']` and `style['mobile'][':hover']`). + * (e.g., `style['@mobile']` and `style['@mobile'][':hover']`). * * @package WordPress * @since 7.1.0 diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index d464e19ec879c..26faf057459ef 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -653,8 +653,8 @@ class WP_Theme_JSON { * @var array */ const RESPONSIVE_BREAKPOINTS = array( - 'mobile' => '@media (width <= 480px)', - 'tablet' => '@media (480px < width <= 782px)', + '@mobile' => '@media (width <= 480px)', + '@tablet' => '@media (480px < width <= 782px)', ); /** @@ -1072,7 +1072,7 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n * e.g. * - top level elements: `$schema['styles']['elements']['link'][':hover']`. * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`. - * - block responsive elements: `$schema['styles']['blocks']['core/button']['tablet']['elements']['link'][':hover']`. + * - block responsive elements: `$schema['styles']['blocks']['core/button']['@tablet']['elements']['link'][':hover']`. */ foreach ( $valid_element_names as $element ) { $schema_styles_elements[ $element ] = $styles_non_top_level; diff --git a/tests/phpunit/tests/block-supports/states.php b/tests/phpunit/tests/block-supports/states.php index 122c1c3ea5fcf..7ee87cf938084 100644 --- a/tests/phpunit/tests/block-supports/states.php +++ b/tests/phpunit/tests/block-supports/states.php @@ -940,7 +940,7 @@ public function test_responsive_root_state_generates_media_query_scoped_css() { 'blockName' => 'test/responsive-root-state', 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( 'color' => array( 'text' => '#ff0000', ), @@ -979,7 +979,7 @@ public function test_responsive_element_color_generates_media_query_scoped_css() 'blockName' => 'core/group', 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( 'elements' => array( 'link' => array( 'color' => array( @@ -1025,7 +1025,7 @@ public function test_responsive_pseudo_state_generates_media_query_scoped_css() 'blockName' => 'core/button', 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( ':hover' => array( 'color' => array( 'background' => '#ff00d0', @@ -1091,7 +1091,7 @@ public function test_responsive_block_gap_state_generates_layout_spacing_css() { 'type' => 'default', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'spacing' => array( 'blockGap' => '12px', ), @@ -1156,7 +1156,7 @@ public function test_responsive_block_gap_state_uses_active_layout_type() { 'type' => 'flex', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'spacing' => array( 'blockGap' => '12px', ), @@ -1210,7 +1210,7 @@ public function test_responsive_layout_state_generates_grid_layout_css() { 'type' => 'grid', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'minimumColumnWidth' => '8rem', ), @@ -1260,7 +1260,7 @@ public function test_responsive_layout_state_generates_grid_column_count_css() { 'type' => 'grid', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnCount' => 3, ), @@ -1317,7 +1317,7 @@ public function test_responsive_layout_state_generates_distinct_container_classe array( 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnCount' => 3, ), @@ -1331,7 +1331,7 @@ public function test_responsive_layout_state_generates_distinct_container_classe array( 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnCount' => 4, ), @@ -1403,7 +1403,7 @@ public function test_responsive_layout_state_generates_grid_columns_and_gap_css( 'type' => 'grid', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnCount' => 3, ), @@ -1469,7 +1469,7 @@ public function test_responsive_grid_block_gap_state_only_outputs_changed_layout 'minimumColumnWidth' => '12rem', ), 'style' => array( - 'tablet' => array( + '@tablet' => array( 'spacing' => array( 'blockGap' => '12px', ), @@ -1518,7 +1518,7 @@ public function test_responsive_child_layout_state_generates_grid_span_css() { 'innerContent' => array( '

Some text.

' ), 'attrs' => array( 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnSpan' => '2', ), @@ -1581,7 +1581,7 @@ public function test_responsive_layout_state_targets_inner_wrapper_for_wrapper_b 'type' => 'grid', ), 'style' => array( - 'mobile' => array( + '@mobile' => array( 'layout' => array( 'columnCount' => 3, ), diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 7eda511e1d9ec..84382e872bf7b 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -957,7 +957,7 @@ public function test_get_styles_for_block_responsive_feature_selector_not_duplic 'styles' => array( 'blocks' => array( 'test/responsive-feature' => array( - 'mobile' => array( + '@mobile' => array( 'color' => array( 'text' => 'red', ), @@ -979,7 +979,7 @@ public function test_get_styles_for_block_responsive_feature_selector_not_duplic $mobile_metadata = array( 'name' => 'test/responsive-feature', - 'path' => array( 'styles', 'blocks', 'test/responsive-feature', 'mobile' ), + 'path' => array( 'styles', 'blocks', 'test/responsive-feature', '@mobile' ), 'selector' => '.wp-block-test-responsive-feature', 'selectors' => array( 'color' => '.wp-block-test-responsive-feature .color-target', @@ -1020,7 +1020,7 @@ public function test_get_styles_for_block_outputs_responsive_block_gap_after_def 'spacing' => array( 'blockGap' => '5rem', ), - 'mobile' => array( + '@mobile' => array( 'spacing' => array( 'blockGap' => '2rem', ), @@ -1040,7 +1040,7 @@ public function test_get_styles_for_block_outputs_responsive_block_gap_after_def $mobile_metadata = array( 'name' => 'core/group', - 'path' => array( 'styles', 'blocks', 'core/group', 'mobile' ), + 'path' => array( 'styles', 'blocks', 'core/group', '@mobile' ), 'selector' => '.wp-block-group', 'css' => '.wp-block-group', 'media_query' => '@media (width <= 480px)', @@ -1080,7 +1080,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese ), ), ), - 'mobile' => array( + '@mobile' => array( 'elements' => array( 'link' => array( 'color' => array( @@ -1109,7 +1109,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese ); $mobile_link_node = array( - 'path' => array( 'styles', 'blocks', 'core/group', 'mobile', 'elements', 'link' ), + 'path' => array( 'styles', 'blocks', 'core/group', '@mobile', 'elements', 'link' ), 'selector' => $link_selector, 'media_query' => '@media (width <= 480px)', ); @@ -1120,7 +1120,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese ); $mobile_hover_node = array( - 'path' => array( 'styles', 'blocks', 'core/group', 'mobile', 'elements', 'link' ), + 'path' => array( 'styles', 'blocks', 'core/group', '@mobile', 'elements', 'link' ), 'selector' => $link_selector . ':hover', 'media_query' => '@media (width <= 480px)', ); @@ -1174,7 +1174,7 @@ public function test_get_styles_for_block_with_style_variations_and_responsive_b 'spacing' => array( 'blockGap' => '5rem', ), - 'mobile' => array( + '@mobile' => array( 'spacing' => array( 'blockGap' => '2rem', ), @@ -1230,7 +1230,7 @@ public function test_get_styles_for_block_outputs_tablet_responsive_styles_only( 'styles' => array( 'blocks' => array( 'test/tablet-only' => array( - 'tablet' => array( + '@tablet' => array( 'color' => array( 'text' => 'purple', ), @@ -1243,7 +1243,7 @@ public function test_get_styles_for_block_outputs_tablet_responsive_styles_only( $tablet_metadata = array( 'name' => 'test/tablet-only', - 'path' => array( 'styles', 'blocks', 'test/tablet-only', 'tablet' ), + 'path' => array( 'styles', 'blocks', 'test/tablet-only', '@tablet' ), 'selector' => '.wp-block-test-tablet-only', 'media_query' => '@media (480px < width <= 782px)', ); @@ -3199,12 +3199,12 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme 'color' => array( 'text' => 'var:preset|color|dark-gray', ), - 'mobile' => array( + '@mobile' => array( 'color' => array( 'text' => 'var:preset|color|dark-pink', ), ), - 'tablet' => array( + '@tablet' => array( 'color' => array( 'text' => 'var:preset|color|dark-red', ), @@ -3227,12 +3227,12 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme 'color' => array( 'text' => 'var(--wp--preset--color--dark-gray)', ), - 'mobile' => array( + '@mobile' => array( 'color' => array( 'text' => 'var(--wp--preset--color--dark-pink)', ), ), - 'tablet' => array( + '@tablet' => array( 'color' => array( 'text' => 'var(--wp--preset--color--dark-red)', ), @@ -3259,7 +3259,7 @@ public function test_remove_insecure_properties_preserves_responsive_elements_wi 'styles' => array( 'blocks' => array( 'core/group' => array( - 'mobile' => array( + '@mobile' => array( 'elements' => array( 'link' => array( 'color' => array( @@ -3279,7 +3279,7 @@ public function test_remove_insecure_properties_preserves_responsive_elements_wi 'styles' => array( 'blocks' => array( 'core/group' => array( - 'mobile' => array( + '@mobile' => array( 'elements' => array( 'link' => array( 'color' => array( From d07dbcf1e4ed62f7b95708a1f39db884bb3dcc5f Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 22 Jun 2026 13:45:20 +0800 Subject: [PATCH 2/2] fix linting alignment --- tests/phpunit/tests/theme/wpThemeJson.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 84382e872bf7b..4421e214a57e2 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -3196,7 +3196,7 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme 'core/group' => array( 'elements' => array( 'link' => array( - 'color' => array( + 'color' => array( 'text' => 'var:preset|color|dark-gray', ), '@mobile' => array( @@ -3224,7 +3224,7 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme 'core/group' => array( 'elements' => array( 'link' => array( - 'color' => array( + 'color' => array( 'text' => 'var(--wp--preset--color--dark-gray)', ), '@mobile' => array(