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

Timestamp:

05/09/2024 04:07:53 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: move global CSS custom properties to :root selector.

Changes the rules outputting global styles CSS custom properties to use :root instead of body, and cleans up some unused variables.

Props ramonopoly, isabel_brison.
Fixes #61135.

File:

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

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

@@ -38 +38 @@
      */
     protected static $blocks_metadata = array();
+
+    /**
+     * The CSS selector for the top-level preset settings.
+     *
+     * @since 6.6.0
+     * @var string
+     */
+    const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
 
     /**
@@ -1709 +1717 @@
      * @since 5.8.0
      * @since 5.9.0 Added the `$origins` parameter.
+     * @since 6.6.0 Added check for root CSS properties selector.
      *
      * @param array    $settings Settings to process.
@@ -1716 +1725 @@
      */
     protected static function compute_preset_classes( $settings, $selector, $origins ) {
-        if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+        if ( static::ROOT_BLOCK_SELECTOR === $selector || static::ROOT_CSS_PROPERTIES_SELECTOR === $selector ) {
             /*
              * Classes at the global level do not need any CSS prefixed,
@@ -2234 +2243 @@
         $nodes[] = array(
             'path'     => array( 'settings' ),
-            'selector' => static::ROOT_BLOCK_SELECTOR,
+            'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
         );
 
@@ -2615 +2624 @@
      *
      * @since 6.1.0
+     * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties.
      *
      * @param string $selector The root node selector.
@@ -2624 +2634 @@
         $settings         = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
         $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
-
-        /*
-        * Reset default browser margin on the root body element.
-        * This is set on the root selector **before** generating the ruleset
-        * from the `theme.json`. This is to ensure that if the `theme.json` declares
-        * `margin` in its `spacing` declaration for the `body` element then these
-        * user-generated values take precedence in the CSS cascade.
-        * @link https://github.com/WordPress/gutenberg/issues/36147.
-        */
-        $css .= 'body { margin: 0;';
 
         /*
@@ -2644 +2644 @@
             $wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
             $wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
-            $css         .= '--wp--style--global--content-size: ' . $content_size . ';';
-            $css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
-        }
-
-        $css .= ' }';
+            $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
+            $css .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
+        }
+
+        /*
+        * Reset default browser margin on the body element.
+        * This is set on the body selector **before** generating the ruleset
+        * from the `theme.json`. This is to ensure that if the `theme.json` declares
+        * `margin` in its `spacing` declaration for the `body` element then these
+        * user-generated values take precedence in the CSS cascade.
+        * @link https://github.com/WordPress/gutenberg/issues/36147.
+        */
+        $css .= 'body { margin: 0; }';
 
         if ( $use_root_padding ) {
@@ -2671 +2679 @@
         $css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
-        $block_gap_value       = isset( $this->theme_json['styles']['spacing']['blockGap'] ) ? $this->theme_json['styles']['spacing']['blockGap'] : '0.5em';
-        $has_block_gap_support = isset( $this->theme_json['settings']['spacing']['blockGap'] );
-        if ( $has_block_gap_support ) {
+        // Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
+        if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
             $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; }";
@@ -2680 +2687 @@
 
             // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-            $css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+            $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
         }
         $css .= $this->get_layout_styles( $block_metadata );