Skip to content

Commit 25850a6

Browse files
talldantalldan
committed
Editor: Use @ symbol prefix for responsive style states.
Prefix responsive style state keys with `@` to avoid clashes with other style properties. Props talldanwp, isabel_brison. Fixes #65503. git-svn-id: https://develop.svn.wordpress.org/trunk@62559 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 87a5738 commit 25850a6

4 files changed

Lines changed: 35 additions & 35 deletions

File tree

‎src/wp-includes/block-supports/states.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*
55
* Generates scoped CSS for per-instance state styles declared in block attributes,
66
* including pseudo-states (e.g., `style[':hover']`) and responsive states
7-
* (e.g., `style['mobile']` and `style['mobile'][':hover']`).
7+
* (e.g., `style['@mobile']` and `style['@mobile'][':hover']`).
88
*
99
* @package WordPress
1010
* @since 7.1.0

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -653,8 +653,8 @@ class WP_Theme_JSON {
653653
* @var array
654654
*/
655655
const RESPONSIVE_BREAKPOINTS = array(
656-
'mobile' => '@media (width <= 480px)',
657-
'tablet' => '@media (480px < width <= 782px)',
656+
'@mobile' => '@media (width <= 480px)',
657+
'@tablet' => '@media (480px < width <= 782px)',
658658
);
659659

660660
/**
@@ -1072,7 +1072,7 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
10721072
* e.g.
10731073
* - top level elements: `$schema['styles']['elements']['link'][':hover']`.
10741074
* - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
1075-
* - block responsive elements: `$schema['styles']['blocks']['core/button']['tablet']['elements']['link'][':hover']`.
1075+
* - block responsive elements: `$schema['styles']['blocks']['core/button']['@tablet']['elements']['link'][':hover']`.
10761076
*/
10771077
foreach ( $valid_element_names as $element ) {
10781078
$schema_styles_elements[ $element ] = $styles_non_top_level;

‎tests/phpunit/tests/block-supports/states.php‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -940,7 +940,7 @@ public function test_responsive_root_state_generates_media_query_scoped_css() {
940940
'blockName' => 'test/responsive-root-state',
941941
'attrs' => array(
942942
'style' => array(
943-
'mobile' => array(
943+
'@mobile' => array(
944944
'color' => array(
945945
'text' => '#ff0000',
946946
),
@@ -979,7 +979,7 @@ public function test_responsive_element_color_generates_media_query_scoped_css()
979979
'blockName' => 'core/group',
980980
'attrs' => array(
981981
'style' => array(
982-
'mobile' => array(
982+
'@mobile' => array(
983983
'elements' => array(
984984
'link' => array(
985985
'color' => array(
@@ -1025,7 +1025,7 @@ public function test_responsive_pseudo_state_generates_media_query_scoped_css()
10251025
'blockName' => 'core/button',
10261026
'attrs' => array(
10271027
'style' => array(
1028-
'mobile' => array(
1028+
'@mobile' => array(
10291029
':hover' => array(
10301030
'color' => array(
10311031
'background' => '#ff00d0',
@@ -1091,7 +1091,7 @@ public function test_responsive_block_gap_state_generates_layout_spacing_css() {
10911091
'type' => 'default',
10921092
),
10931093
'style' => array(
1094-
'mobile' => array(
1094+
'@mobile' => array(
10951095
'spacing' => array(
10961096
'blockGap' => '12px',
10971097
),
@@ -1156,7 +1156,7 @@ public function test_responsive_block_gap_state_uses_active_layout_type() {
11561156
'type' => 'flex',
11571157
),
11581158
'style' => array(
1159-
'mobile' => array(
1159+
'@mobile' => array(
11601160
'spacing' => array(
11611161
'blockGap' => '12px',
11621162
),
@@ -1210,7 +1210,7 @@ public function test_responsive_layout_state_generates_grid_layout_css() {
12101210
'type' => 'grid',
12111211
),
12121212
'style' => array(
1213-
'mobile' => array(
1213+
'@mobile' => array(
12141214
'layout' => array(
12151215
'minimumColumnWidth' => '8rem',
12161216
),
@@ -1260,7 +1260,7 @@ public function test_responsive_layout_state_generates_grid_column_count_css() {
12601260
'type' => 'grid',
12611261
),
12621262
'style' => array(
1263-
'mobile' => array(
1263+
'@mobile' => array(
12641264
'layout' => array(
12651265
'columnCount' => 3,
12661266
),
@@ -1317,7 +1317,7 @@ public function test_responsive_layout_state_generates_distinct_container_classe
13171317
array(
13181318
'attrs' => array(
13191319
'style' => array(
1320-
'mobile' => array(
1320+
'@mobile' => array(
13211321
'layout' => array(
13221322
'columnCount' => 3,
13231323
),
@@ -1331,7 +1331,7 @@ public function test_responsive_layout_state_generates_distinct_container_classe
13311331
array(
13321332
'attrs' => array(
13331333
'style' => array(
1334-
'mobile' => array(
1334+
'@mobile' => array(
13351335
'layout' => array(
13361336
'columnCount' => 4,
13371337
),
@@ -1403,7 +1403,7 @@ public function test_responsive_layout_state_generates_grid_columns_and_gap_css(
14031403
'type' => 'grid',
14041404
),
14051405
'style' => array(
1406-
'mobile' => array(
1406+
'@mobile' => array(
14071407
'layout' => array(
14081408
'columnCount' => 3,
14091409
),
@@ -1469,7 +1469,7 @@ public function test_responsive_grid_block_gap_state_only_outputs_changed_layout
14691469
'minimumColumnWidth' => '12rem',
14701470
),
14711471
'style' => array(
1472-
'tablet' => array(
1472+
'@tablet' => array(
14731473
'spacing' => array(
14741474
'blockGap' => '12px',
14751475
),
@@ -1518,7 +1518,7 @@ public function test_responsive_child_layout_state_generates_grid_span_css() {
15181518
'innerContent' => array( '<p>Some text.</p>' ),
15191519
'attrs' => array(
15201520
'style' => array(
1521-
'mobile' => array(
1521+
'@mobile' => array(
15221522
'layout' => array(
15231523
'columnSpan' => '2',
15241524
),
@@ -1581,7 +1581,7 @@ public function test_responsive_layout_state_targets_inner_wrapper_for_wrapper_b
15811581
'type' => 'grid',
15821582
),
15831583
'style' => array(
1584-
'mobile' => array(
1584+
'@mobile' => array(
15851585
'layout' => array(
15861586
'columnCount' => 3,
15871587
),

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -957,7 +957,7 @@ public function test_get_styles_for_block_responsive_feature_selector_not_duplic
957957
'styles' => array(
958958
'blocks' => array(
959959
'test/responsive-feature' => array(
960-
'mobile' => array(
960+
'@mobile' => array(
961961
'color' => array(
962962
'text' => 'red',
963963
),
@@ -979,7 +979,7 @@ public function test_get_styles_for_block_responsive_feature_selector_not_duplic
979979

980980
$mobile_metadata = array(
981981
'name' => 'test/responsive-feature',
982-
'path' => array( 'styles', 'blocks', 'test/responsive-feature', 'mobile' ),
982+
'path' => array( 'styles', 'blocks', 'test/responsive-feature', '@mobile' ),
983983
'selector' => '.wp-block-test-responsive-feature',
984984
'selectors' => array(
985985
'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
10201020
'spacing' => array(
10211021
'blockGap' => '5rem',
10221022
),
1023-
'mobile' => array(
1023+
'@mobile' => array(
10241024
'spacing' => array(
10251025
'blockGap' => '2rem',
10261026
),
@@ -1040,7 +1040,7 @@ public function test_get_styles_for_block_outputs_responsive_block_gap_after_def
10401040

10411041
$mobile_metadata = array(
10421042
'name' => 'core/group',
1043-
'path' => array( 'styles', 'blocks', 'core/group', 'mobile' ),
1043+
'path' => array( 'styles', 'blocks', 'core/group', '@mobile' ),
10441044
'selector' => '.wp-block-group',
10451045
'css' => '.wp-block-group',
10461046
'media_query' => '@media (width <= 480px)',
@@ -1080,7 +1080,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese
10801080
),
10811081
),
10821082
),
1083-
'mobile' => array(
1083+
'@mobile' => array(
10841084
'elements' => array(
10851085
'link' => array(
10861086
'color' => array(
@@ -1109,7 +1109,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese
11091109
);
11101110

11111111
$mobile_link_node = array(
1112-
'path' => array( 'styles', 'blocks', 'core/group', 'mobile', 'elements', 'link' ),
1112+
'path' => array( 'styles', 'blocks', 'core/group', '@mobile', 'elements', 'link' ),
11131113
'selector' => $link_selector,
11141114
'media_query' => '@media (width <= 480px)',
11151115
);
@@ -1120,7 +1120,7 @@ public function test_get_styles_for_block_responsive_element_pseudo_styles_prese
11201120
);
11211121

11221122
$mobile_hover_node = array(
1123-
'path' => array( 'styles', 'blocks', 'core/group', 'mobile', 'elements', 'link' ),
1123+
'path' => array( 'styles', 'blocks', 'core/group', '@mobile', 'elements', 'link' ),
11241124
'selector' => $link_selector . ':hover',
11251125
'media_query' => '@media (width <= 480px)',
11261126
);
@@ -1174,7 +1174,7 @@ public function test_get_styles_for_block_with_style_variations_and_responsive_b
11741174
'spacing' => array(
11751175
'blockGap' => '5rem',
11761176
),
1177-
'mobile' => array(
1177+
'@mobile' => array(
11781178
'spacing' => array(
11791179
'blockGap' => '2rem',
11801180
),
@@ -1230,7 +1230,7 @@ public function test_get_styles_for_block_outputs_tablet_responsive_styles_only(
12301230
'styles' => array(
12311231
'blocks' => array(
12321232
'test/tablet-only' => array(
1233-
'tablet' => array(
1233+
'@tablet' => array(
12341234
'color' => array(
12351235
'text' => 'purple',
12361236
),
@@ -1243,7 +1243,7 @@ public function test_get_styles_for_block_outputs_tablet_responsive_styles_only(
12431243

12441244
$tablet_metadata = array(
12451245
'name' => 'test/tablet-only',
1246-
'path' => array( 'styles', 'blocks', 'test/tablet-only', 'tablet' ),
1246+
'path' => array( 'styles', 'blocks', 'test/tablet-only', '@tablet' ),
12471247
'selector' => '.wp-block-test-tablet-only',
12481248
'media_query' => '@media (480px < width <= 782px)',
12491249
);
@@ -3196,15 +3196,15 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme
31963196
'core/group' => array(
31973197
'elements' => array(
31983198
'link' => array(
3199-
'color' => array(
3199+
'color' => array(
32003200
'text' => 'var:preset|color|dark-gray',
32013201
),
3202-
'mobile' => array(
3202+
'@mobile' => array(
32033203
'color' => array(
32043204
'text' => 'var:preset|color|dark-pink',
32053205
),
32063206
),
3207-
'tablet' => array(
3207+
'@tablet' => array(
32083208
'color' => array(
32093209
'text' => 'var:preset|color|dark-red',
32103210
),
@@ -3224,15 +3224,15 @@ public function test_remove_insecure_properties_preserves_responsive_block_eleme
32243224
'core/group' => array(
32253225
'elements' => array(
32263226
'link' => array(
3227-
'color' => array(
3227+
'color' => array(
32283228
'text' => 'var(--wp--preset--color--dark-gray)',
32293229
),
3230-
'mobile' => array(
3230+
'@mobile' => array(
32313231
'color' => array(
32323232
'text' => 'var(--wp--preset--color--dark-pink)',
32333233
),
32343234
),
3235-
'tablet' => array(
3235+
'@tablet' => array(
32363236
'color' => array(
32373237
'text' => 'var(--wp--preset--color--dark-red)',
32383238
),
@@ -3259,7 +3259,7 @@ public function test_remove_insecure_properties_preserves_responsive_elements_wi
32593259
'styles' => array(
32603260
'blocks' => array(
32613261
'core/group' => array(
3262-
'mobile' => array(
3262+
'@mobile' => array(
32633263
'elements' => array(
32643264
'link' => array(
32653265
'color' => array(
@@ -3279,7 +3279,7 @@ public function test_remove_insecure_properties_preserves_responsive_elements_wi
32793279
'styles' => array(
32803280
'blocks' => array(
32813281
'core/group' => array(
3282-
'mobile' => array(
3282+
'@mobile' => array(
32833283
'elements' => array(
32843284
'link' => array(
32853285
'color' => array(

0 commit comments

Comments
 (0)