Skip to content

Use @ symbol prefix for responsive style states #12253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
talldan wants to merge 2 commits into
base: trunk
Choose a base branch
from
+35 −35
Open

Use @ symbol prefix for responsive style states #12253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c001fbe
Use `@` symbol prefix for responsive style states
talldan Jun 22, 2026
d07dbcf
fix linting alignment
talldan Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/wp-includes/block-supports/states.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
);

/**
Expand Down Expand Up @@ -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;
Expand Down
26 changes: 13 additions & 13 deletions tests/phpunit/tests/block-supports/states.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
),
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
),
Expand Down Expand Up @@ -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',
),
Expand Down Expand Up @@ -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',
),
Expand Down Expand Up @@ -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,
),
Expand Down Expand Up @@ -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,
),
Expand All @@ -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,
),
Expand Down Expand Up @@ -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,
),
Expand Down Expand Up @@ -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',
),
Expand Down Expand Up @@ -1518,7 +1518,7 @@ public function test_responsive_child_layout_state_generates_grid_span_css() {
'innerContent' => array( '<p>Some text.</p>' ),
'attrs' => array(
'style' => array(
'mobile' => array(
'@mobile' => array(
'layout' => array(
'columnSpan' => '2',
),
Expand Down Expand Up @@ -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,
),
Expand Down
36 changes: 18 additions & 18 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
),
Expand All @@ -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',
Expand Down Expand Up @@ -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',
),
Expand All @@ -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)',
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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)',
);
Expand All @@ -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)',
);
Expand Down Expand Up @@ -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',
),
Expand Down Expand Up @@ -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',
),
Expand All @@ -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)',
);
Expand Down Expand Up @@ -3196,15 +3196,15 @@ 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(
'@mobile' => array(
'color' => array(
'text' => 'var:preset|color|dark-pink',
),
),
'tablet' => array(
'@tablet' => array(
'color' => array(
'text' => 'var:preset|color|dark-red',
),
Expand All @@ -3224,15 +3224,15 @@ 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(
'@mobile' => array(
'color' => array(
'text' => 'var(--wp--preset--color--dark-pink)',
),
),
'tablet' => array(
'@tablet' => array(
'color' => array(
'text' => 'var(--wp--preset--color--dark-red)',
),
Expand All @@ -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(
Expand All @@ -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(
Expand Down
Loading