Changeset 58241 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

05/30/2024 01:14:15 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: level global styles specificity at 0-1-0.

Adjusts the block level global styles selectors so they have a consistent specificity of 0-1-0, and adjusts base and layout global style selectors to their minimum required specificity.

Props aaronrobertshaw, isabel_brison, andrewserong, mukesh27.
Fixes #61165.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (13 diffs)

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

@@ -1261 +1261 @@
      *
      * @since 6.2.0
+     * @since 6.6.0 Enforced 0-1-0 specificity for block custom CSS selectors.
      *
      * @param string $css      The CSS to process.
@@ -1275 +1276 @@
             if ( $is_root_css ) {
                 // If the part doesn't contain braces, it applies to the root level.
-                $processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
+                $processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
             } else {
                 // If the part contains braces, it's a nested CSS rule.
@@ -1287 +1288 @@
                     ? static::scope_selector( $selector, $nested_selector )
                     : static::append_to_selector( $selector, $nested_selector );
-                $processed_css  .= $part_selector . '{' . trim( $css_value ) . '}';
-            }
+                $final_selector  = ":root :where($part_selector)";
+                $processed_css  .= $final_selector . '{' . trim( $css_value ) . '}';}
         }
         return $processed_css;
@@ -1409 +1410 @@
      * @since 6.5.1 Only output rules referencing content and wide sizes when values exist.
      * @since 6.5.3 Add types parameter to check if only base layout styles are needed.
+     * @since 6.6.0 Updated layout style specificity to be compatible with overall 0-1-0 specificity in global styles.
      *
      * @param array $block_metadata Metadata about the block to get styles for.
@@ -1435 +1437 @@
         $node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
         $layout_definitions       = wp_get_layout_definitions();
-        $layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
+        $layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\,\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
 
         /*
@@ -1510 +1512 @@
                                     );
                                 } else {
-                                    $format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
+                                    $format          = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
                                     $layout_selector = sprintf(
                                         $format,
@@ -1594 +1596 @@
 
                             $layout_selector = sprintf(
-                                '%s .%s%s',
-                                $selector,
+                                '.%s%s',
                                 $class_name,
                                 $base_style_rule['selector']
@@ -2502 +2503 @@
      * @since 6.1.0
      * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
+     *              Updated general global styles specificity to 0-1-0.
      *
      * @param array $block_metadata Metadata about the block to get styles for.
@@ -2651 +2653 @@
 
         // 2. Generate and append the rules that use the general selector.
-        $block_rules .= static::to_ruleset( $selector, $declarations );
+        $block_rules .= static::to_ruleset( ":root :where($selector)", $declarations );
 
         // 3. Generate and append the rules that use the duotone selector.
@@ -2668 +2670 @@
         // 5. Generate and append the feature level rulesets.
         foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
-            $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
+            $block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
         }
 
         // 6. Generate and append the style variation rulesets.
         foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
-            $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
+            $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
         }
 
@@ -2684 +2686 @@
      * @since 6.1.0
      * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules.
+     *              Updated specificity of body margin reset and first/last child selectors.
      *
      * @param string $selector The root node selector.
@@ -2715 +2718 @@
         * @link https://github.com/WordPress/gutenberg/issues/36147.
         */
-        $css .= 'body { margin: 0; }';
+        $css .= ':where(body) { margin: 0; }';
 
         if ( $use_root_padding ) {
@@ -2738 +2741 @@
             $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
             $css            .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
-            $css            .= ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
-            $css            .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
+            $css            .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+            $css            .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 
             // For backwards compatibility, ensure the legacy block gap CSS variable is still available.