Make WordPress Core

Changeset 62559


Ignore:
Timestamp:
06/25/2026 10:03:54 AM (2 months ago)
Author:
talldanwp
Message:

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.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/states.php

    r62514 r62559  
    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
  • trunk/src/wp-includes/class-wp-theme-json.php

    r62493 r62559  
    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
     
    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 ) {
  • trunk/tests/phpunit/tests/block-supports/states.php

    r62514 r62559  
    941941                        'attrs'     => array(
    942942                                'style' => array(
    943                                         'mobile' => array(
     943                                        '@mobile' => array(
    944944                                                'color' => array(
    945945                                                        'text' => '#ff0000',
     
    980980                        'attrs'     => array(
    981981                                'style' => array(
    982                                         'mobile' => array(
     982                                        '@mobile' => array(
    983983                                                'elements' => array(
    984984                                                        'link' => array(
     
    10261026                        'attrs'     => array(
    10271027                                'style' => array(
    1028                                         'mobile' => array(
     1028                                        '@mobile' => array(
    10291029                                                ':hover' => array(
    10301030                                                        'color' => array(
     
    10921092                                        ),
    10931093                                        'style'  => array(
    1094                                                 'mobile' => array(
     1094                                                '@mobile' => array(
    10951095                                                        'spacing' => array(
    10961096                                                                'blockGap' => '12px',
     
    11571157                                        ),
    11581158                                        'style'  => array(
    1159                                                 'mobile' => array(
     1159                                                '@mobile' => array(
    11601160                                                        'spacing' => array(
    11611161                                                                'blockGap' => '12px',
     
    12111211                                ),
    12121212                                'style'  => array(
    1213                                         'mobile' => array(
     1213                                        '@mobile' => array(
    12141214                                                'layout' => array(
    12151215                                                        'minimumColumnWidth' => '8rem',
     
    12611261                                ),
    12621262                                'style'  => array(
    1263                                         'mobile' => array(
     1263                                        '@mobile' => array(
    12641264                                                'layout' => array(
    12651265                                                        'columnCount' => 3,
     
    13181318                                'attrs' => array(
    13191319                                        'style' => array(
    1320                                                 'mobile' => array(
     1320                                                '@mobile' => array(
    13211321                                                        'layout' => array(
    13221322                                                                'columnCount' => 3,
     
    13321332                                'attrs' => array(
    13331333                                        'style' => array(
    1334                                                 'mobile' => array(
     1334                                                '@mobile' => array(
    13351335                                                        'layout' => array(
    13361336                                                                'columnCount' => 4,
     
    14041404                                        ),
    14051405                                        'style'  => array(
    1406                                                 'mobile' => array(
     1406                                                '@mobile' => array(
    14071407                                                        'layout'  => array(
    14081408                                                                'columnCount' => 3,
     
    14701470                                        ),
    14711471                                        'style'  => array(
    1472                                                 'tablet' => array(
     1472                                                '@tablet' => array(
    14731473                                                        'spacing' => array(
    14741474                                                                'blockGap' => '12px',
     
    15191519                        'attrs'        => array(
    15201520                                'style' => array(
    1521                                         'mobile' => array(
     1521                                        '@mobile' => array(
    15221522                                                'layout' => array(
    15231523                                                        'columnSpan' => '2',
     
    15821582                                ),
    15831583                                'style'  => array(
    1584                                         'mobile' => array(
     1584                                        '@mobile' => array(
    15851585                                                'layout' => array(
    15861586                                                        'columnCount' => 3,
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r62444 r62559  
    958958                                        'blocks' => array(
    959959                                                'test/responsive-feature' => array(
    960                                                         'mobile' => array(
     960                                                        '@mobile' => array(
    961961                                                                'color' => array(
    962962                                                                        'text' => 'red',
     
    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(
     
    10211021                                                                'blockGap' => '5rem',
    10221022                                                        ),
    1023                                                         'mobile' => array(
     1023                                                        '@mobile' => array(
    10241024                                                                'spacing' => array(
    10251025                                                                        'blockGap' => '2rem',
     
    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',
     
    10811081                                                                ),
    10821082                                                        ),
    1083                                                         'mobile'   => array(
     1083                                                        '@mobile'  => array(
    10841084                                                                'elements' => array(
    10851085                                                                        'link' => array(
     
    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)',
     
    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)',
     
    11751175                                                                                'blockGap' => '5rem',
    11761176                                                                        ),
    1177                                                                         'mobile' => array(
     1177                                                                        '@mobile' => array(
    11781178                                                                                'spacing' => array(
    11791179                                                                                        'blockGap' => '2rem',
     
    12311231                                        'blocks' => array(
    12321232                                                'test/tablet-only' => array(
    1233                                                         'tablet' => array(
     1233                                                        '@tablet' => array(
    12341234                                                                'color' => array(
    12351235                                                                        'text' => 'purple',
     
    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)',
     
    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',
     
    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)',
     
    32603260                                        'blocks' => array(
    32613261                                                'core/group' => array(
    3262                                                         'mobile' => array(
     3262                                                        '@mobile' => array(
    32633263                                                                'elements' => array(
    32643264                                                                        'link' => array(
     
    32803280                                'blocks' => array(
    32813281                                        'core/group' => array(
    3282                                                 'mobile' => array(
     3282                                                '@mobile' => array(
    32833283                                                        'elements' => array(
    32843284                                                                'link' => array(
Note: See TracChangeset for help on using the changeset viewer.