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

Timestamp:

05/09/2024 04:07:53 AM (2 years 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 );