Changeset 58244

Timestamp:

05/30/2024 04:38:26 AM (2 years ago)

Author:

isabel_brison

Message:

Editor: Add scoping of feature level global styles selectors.

Ensures that feature-level selectors for block style variations are correctly scoped when generating a theme.json stylesheet.

Props aaronrobertshaw, audrasjb, vcanales, isabel_brison.
Fixes #61119.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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

@@ -1200 +1200 @@
                         }
                         foreach ( $style_nodes as &$node ) {
-                                $node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
+                                $node = static::scope_style_node_selectors( $options['scope'], $node );
                         }
                         unset( $node );
@@ -1824 +1824 @@
                 $result = implode( ', ', $selectors_scoped );
                 return $result;
+        }
+
+        /**
+         * Scopes the selectors for a given style node.
+         *
+         * This includes the primary selector, i.e. `$node['selector']`, as well as any custom
+         * selectors for features and subfeatures, e.g. `$node['selectors']['border']` etc.
+         *
+         * @since 6.6.0
+         *
+         * @param string $scope Selector to scope to.
+         * @param array  $node  Style node with selectors to scope.
+         * @return array Node with updated selectors.
+         */
+        protected static function scope_style_node_selectors( $scope, $node ) {
+                $node['selector'] = static::scope_selector( $scope, $node['selector'] );
+
+                if ( empty( $node['selectors'] ) ) {
+                        return $node;
+                }
+
+                foreach ( $node['selectors'] as $feature => $selector ) {
+                        if ( is_string( $selector ) ) {
+                                $node['selectors'][ $feature ] = static::scope_selector( $scope, $selector );
+                        }
+                        if ( is_array( $selector ) ) {
+                                foreach ( $selector as $subfeature => $subfeature_selector ) {
+                                        $node['selectors'][ $feature ][ $subfeature ] = static::scope_selector( $scope, $subfeature_selector );
+                                }
+                        }
+                }
+
+                return $node;
         }
 

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -5590 +5590 @@
                 );
         }
+
+        /**
+         * Tests the correct scoping of selectors for a style node.
+         *
+         * @ticket 61119
+         */
+        public function test_scope_style_node_selectors() {
+                $theme_json = new ReflectionClass( 'WP_Theme_JSON' );
+
+                $func = $theme_json->getMethod( 'scope_style_node_selectors' );
+                $func->setAccessible( true );
+
+                $node = array(
+                        'name'      => 'core/image',
+                        'path'      => array( 'styles', 'blocks', 'core/image' ),
+                        'selector'  => '.wp-block-image',
+                        'selectors' => array(
+                                'root'       => '.wp-block-image',
+                                'border'     => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder',
+                                'typography' => array(
+                                        'textDecoration' => '.wp-block-image caption',
+                                ),
+                                'filter'     => array(
+                                        'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder',
+                                ),
+                        ),
+                );
+
+                $actual   = $func->invoke( null, '.custom-scope', $node );
+                $expected = array(
+                        'name'      => 'core/image',
+                        'path'      => array( 'styles', 'blocks', 'core/image' ),
+                        'selector'  => '.custom-scope .wp-block-image',
+                        'selectors' => array(
+                                'root'       => '.custom-scope .wp-block-image',
+                                'border'     => '.custom-scope .wp-block-image img, .custom-scope .wp-block-image .wp-block-image__crop-area, .custom-scope .wp-block-image .components-placeholder',
+                                'typography' => array(
+                                        'textDecoration' => '.custom-scope .wp-block-image caption',
+                                ),
+                                'filter'     => array(
+                                        'duotone' => '.custom-scope .wp-block-image img, .custom-scope .wp-block-image .components-placeholder',
+                                ),
+                        ),
+                );
+
+                $this->assertEquals( $expected, $actual );
+        }
 }