diff --git a/wp-includes/class-wp-duotone.php b/wp-includes/class-wp-duotone.php index 40e9f7548b..e8b7735457 100644 --- a/wp-includes/class-wp-duotone.php +++ b/wp-includes/class-wp-duotone.php @@ -809,12 +809,13 @@ class WP_Duotone { * @internal * * @since 6.3.0 + * @since 6.6.0 Replaced body selector with `WP_Theme_JSON::ROOT_CSS_PROPERTIES_SELECTOR`. * * @param array $sources The duotone presets. * @return string The CSS for global styles. */ private static function get_global_styles_presets( $sources ) { - $css = 'body{'; + $css = WP_Theme_JSON::ROOT_CSS_PROPERTIES_SELECTOR . '{'; foreach ( $sources as $filter_id => $filter_data ) { $slug = $filter_data['slug']; $colors = $filter_data['colors']; diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 39e3581c18..e039fdbb9a 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -38,6 +38,14 @@ class WP_Theme_JSON { */ 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'; + /** * The CSS selector for the top-level styles. * @@ -1708,6 +1716,7 @@ class WP_Theme_JSON { * * @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. * @param string $selector Selector wrapping the classes. @@ -1715,7 +1724,7 @@ class WP_Theme_JSON { * @return string The result of processing the presets. */ 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, * and we don't want to increase its specificity. @@ -2233,7 +2242,7 @@ class WP_Theme_JSON { // Top-level. $nodes[] = array( 'path' => array( 'settings' ), - 'selector' => static::ROOT_BLOCK_SELECTOR, + 'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR, ); // Calculate paths for blocks. @@ -2614,6 +2623,7 @@ class WP_Theme_JSON { * Outputs the CSS for layout rules on the root. * * @since 6.1.0 + * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties. * * @param string $selector The root node selector. * @param array $block_metadata The metadata for the root block. @@ -2624,16 +2634,6 @@ class WP_Theme_JSON { $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;'; - /* * If there are content and wide widths in theme.json, output them * as custom properties on the body element so all blocks can use them. @@ -2643,11 +2643,19 @@ class WP_Theme_JSON { $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial'; $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 .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';'; + $css .= '--wp--style--global--wide-size: ' . $wide_size . '; }'; } - $css .= ' }'; + /* + * 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 ) { // Top and bottom padding are applied to the outer block container. @@ -2670,16 +2678,15 @@ class WP_Theme_JSON { $css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; $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; }"; $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; }'; // 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 ); diff --git a/wp-includes/version.php b/wp-includes/version.php index 909a67ffd2..638c33e2f2 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-alpha-58122'; +$wp_version = '6.6-alpha-58123'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.