From e3f4aa35d8a18afbaa599b15663ea73df9a60b7f Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Thu, 30 May 2024 01:16:07 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@58241 git-svn-id: http://core.svn.wordpress.org/trunk@57704 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/layout.php | 21 ++++++++++--------- wp-includes/class-wp-theme-json.php | 29 +++++++++++++++------------ wp-includes/version.php | 2 +- 3 files changed, 29 insertions(+), 23 deletions(-) diff --git a/wp-includes/block-supports/layout.php b/wp-includes/block-supports/layout.php index 9df5137e89..23d687ca1e 100644 --- a/wp-includes/block-supports/layout.php +++ b/wp-includes/block-supports/layout.php @@ -14,6 +14,7 @@ * also be updated. * * @since 6.3.0 + * @since 6.6.0 Updated specificity for compatibility with 0-1-0 global styles specificity. * @access private * * @return array[] Layout definitions. @@ -51,13 +52,13 @@ function wp_get_layout_definitions() { ), 'spacingStyles' => array( array( - 'selector' => ' > :first-child:first-child', + 'selector' => ' > :first-child', 'rules' => array( 'margin-block-start' => '0', ), ), array( - 'selector' => ' > :last-child:last-child', + 'selector' => ' > :last-child', 'rules' => array( 'margin-block-end' => '0', ), @@ -116,13 +117,13 @@ function wp_get_layout_definitions() { ), 'spacingStyles' => array( array( - 'selector' => ' > :first-child:first-child', + 'selector' => ' > :first-child', 'rules' => array( 'margin-block-start' => '0', ), ), array( - 'selector' => ' > :last-child:last-child', + 'selector' => ' > :last-child', 'rules' => array( 'margin-block-end' => '0', ), @@ -150,7 +151,7 @@ function wp_get_layout_definitions() { ), ), array( - 'selector' => ' > *', + 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 'rules' => array( 'margin' => '0', ), @@ -172,7 +173,7 @@ function wp_get_layout_definitions() { 'displayMode' => 'grid', 'baseStyles' => array( array( - 'selector' => ' > *', + 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 'rules' => array( 'margin' => '0', ), @@ -222,6 +223,7 @@ function wp_register_layout_support( $block_type ) { * @since 5.9.0 * @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles. * @since 6.3.0 Added grid layout type. + * @since 6.6.0 Removed duplicated selector from layout styles. * @access private * * @param string $selector CSS selector. @@ -261,7 +263,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ), ), array( - 'selector' => "$selector$selector > * + *", + 'selector' => "$selector > * + *", 'declarations' => array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0', @@ -370,7 +372,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ), ), array( - 'selector' => "$selector$selector > * + *", + 'selector' => "$selector > * + *", 'declarations' => array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0', @@ -549,6 +551,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false * @since 5.8.0 * @since 6.3.0 Adds compound class to layout wrapper for global spacing styles. * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`. + * @since 6.6.0 Removed duplicate container class from layout styles. * @access private * * @param string $block_content Rendered block content. @@ -795,7 +798,7 @@ function wp_render_layout_support_flag( $block_content, $block ) { $has_block_gap_support = isset( $block_gap ); $style = wp_get_layout_style( - ".$container_class.$container_class", + ".$container_class", $used_layout, $has_block_gap_support, $gap_value, diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index f45845c9b2..22b7c44b4e 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -1260,6 +1260,7 @@ class WP_Theme_JSON { * Processes the CSS, to apply nesting. * * @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. * @param string $selector The selector to nest. @@ -1274,7 +1275,7 @@ class WP_Theme_JSON { $is_root_css = ( ! str_contains( $part, '{' ) ); 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. $part = explode( '{', str_replace( '}', '', $part ) ); @@ -1286,8 +1287,8 @@ class WP_Theme_JSON { $part_selector = str_starts_with( $nested_selector, ' ' ) ? 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; } @@ -1408,6 +1409,7 @@ class WP_Theme_JSON { * @since 6.3.0 Reduced specificity for layout margin rules. * @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. * @param array $types Optional. Types of styles to output. If empty, all styles will be output. @@ -1434,7 +1436,7 @@ class WP_Theme_JSON { $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support. $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. /* * Gap styles will only be output if the theme has block gap support, or supports a fallback gap. @@ -1509,7 +1511,7 @@ class WP_Theme_JSON { $spacing_rule['selector'] ); } 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, $selector, @@ -1593,8 +1595,7 @@ class WP_Theme_JSON { } $layout_selector = sprintf( - '%s .%s%s', - $selector, + '.%s%s', $class_name, $base_style_rule['selector'] ); @@ -2501,6 +2502,7 @@ class WP_Theme_JSON { * * @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. * @@ -2650,7 +2652,7 @@ class WP_Theme_JSON { } // 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. if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { @@ -2667,12 +2669,12 @@ class WP_Theme_JSON { // 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 ); } return $block_rules; @@ -2683,6 +2685,7 @@ class WP_Theme_JSON { * * @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. * @param array $block_metadata The metadata for the root block. @@ -2714,7 +2717,7 @@ class WP_Theme_JSON { * user-generated values take precedence in the CSS cascade. * @link https://github.com/WordPress/gutenberg/issues/36147. */ - $css .= 'body { margin: 0; }'; + $css .= ':where(body) { margin: 0; }'; if ( $use_root_padding ) { // Top and bottom padding are applied to the outer block container. @@ -2737,8 +2740,8 @@ class WP_Theme_JSON { 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; }'; + $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. $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }"; diff --git a/wp-includes/version.php b/wp-includes/version.php index 18f44148ef..c367b4124e 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-alpha-58240'; +$wp_version = '6.6-alpha-58241'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.