Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-10-05 11:07:44 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
isabel_brison 2024-05-30 01:16:07 +00:00
parent 849cb4c172
commit e3f4aa35d8
3 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
wp-includes/block-supports/layout.php
View File

@ -14,6 +14,7 @@
* also be updated. * also be updated.
* *
* @since 6.3.0 * @since 6.3.0
* @since 6.6.0 Updated specificity for compatibility with 0-1-0 global styles specificity.
* @access private * @access private
* *
* @return array[] Layout definitions. * @return array[] Layout definitions.
@ -51,13 +52,13 @@ function wp_get_layout_definitions() {
), ),
'spacingStyles' => array( 'spacingStyles' => array(
array( array(
'selector' => ' > :first-child:first-child', 'selector' => ' > :first-child',
'rules' => array( 'rules' => array(
'margin-block-start' => '0', 'margin-block-start' => '0',
), ),
), ),
array( array(
'selector' => ' > :last-child:last-child', 'selector' => ' > :last-child',
'rules' => array( 'rules' => array(
'margin-block-end' => '0', 'margin-block-end' => '0',
), ),
@ -116,13 +117,13 @@ function wp_get_layout_definitions() {
), ),
'spacingStyles' => array( 'spacingStyles' => array(
array( array(
'selector' => ' > :first-child:first-child', 'selector' => ' > :first-child',
'rules' => array( 'rules' => array(
'margin-block-start' => '0', 'margin-block-start' => '0',
), ),
), ),
array( array(
'selector' => ' > :last-child:last-child', 'selector' => ' > :last-child',
'rules' => array( 'rules' => array(
'margin-block-end' => '0', 'margin-block-end' => '0',
), ),
@ -150,7 +151,7 @@ function wp_get_layout_definitions() {
), ),
), ),
array( array(
'selector' => ' > *', 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
'rules' => array( 'rules' => array(
'margin' => '0', 'margin' => '0',
), ),
@ -172,7 +173,7 @@ function wp_get_layout_definitions() {
'displayMode' => 'grid', 'displayMode' => 'grid',
'baseStyles' => array( 'baseStyles' => array(
array( array(
'selector' => ' > *', 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
'rules' => array( 'rules' => array(
'margin' => '0', 'margin' => '0',
), ),
@ -222,6 +223,7 @@ function wp_register_layout_support( $block_type ) {
* @since 5.9.0 * @since 5.9.0
* @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles. * @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles.
* @since 6.3.0 Added grid layout type. * @since 6.3.0 Added grid layout type.
* @since 6.6.0 Removed duplicated selector from layout styles.
* @access private * @access private
* *
* @param string $selector CSS selector. * @param string $selector CSS selector.
@ -261,7 +263,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
), ),
), ),
array( array(
'selector' => "$selector$selector > * + *", 'selector' => "$selector > * + *",
'declarations' => array( 'declarations' => array(
'margin-block-start' => $gap_value, 'margin-block-start' => $gap_value,
'margin-block-end' => '0', 'margin-block-end' => '0',
@ -370,7 +372,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
), ),
), ),
array( array(
'selector' => "$selector$selector > * + *", 'selector' => "$selector > * + *",
'declarations' => array( 'declarations' => array(
'margin-block-start' => $gap_value, 'margin-block-start' => $gap_value,
'margin-block-end' => '0', '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 5.8.0
* @since 6.3.0 Adds compound class to layout wrapper for global spacing styles. * @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.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 * @access private
* *
* @param string $block_content Rendered block content. * @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 ); $has_block_gap_support = isset( $block_gap );
$style = wp_get_layout_style( $style = wp_get_layout_style(
".$container_class.$container_class", ".$container_class",
$used_layout, $used_layout,
$has_block_gap_support, $has_block_gap_support,
$gap_value, $gap_value,

29
wp-includes/class-wp-theme-json.php
View File

@ -1260,6 +1260,7 @@ class WP_Theme_JSON {
* Processes the CSS, to apply nesting. * Processes the CSS, to apply nesting.
* *
* @since 6.2.0 * @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 $css The CSS to process.
* @param string $selector The selector to nest. * @param string $selector The selector to nest.
@ -1274,7 +1275,7 @@ class WP_Theme_JSON {
$is_root_css = ( ! str_contains( $part, '{' ) ); $is_root_css = ( ! str_contains( $part, '{' ) );
if ( $is_root_css ) { if ( $is_root_css ) {
// If the part doesn't contain braces, it applies to the root level. // 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 { } else {
// If the part contains braces, it's a nested CSS rule. // If the part contains braces, it's a nested CSS rule.
$part = explode( '{', str_replace( '}', '', $part ) ); $part = explode( '{', str_replace( '}', '', $part ) );
@ -1286,8 +1287,8 @@ class WP_Theme_JSON {
$part_selector = str_starts_with( $nested_selector, ' ' ) $part_selector = str_starts_with( $nested_selector, ' ' )
? static::scope_selector( $selector, $nested_selector ) ? static::scope_selector( $selector, $nested_selector )
: static::append_to_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; return $processed_css;
} }
@ -1408,6 +1409,7 @@ class WP_Theme_JSON {
* @since 6.3.0 Reduced specificity for layout margin rules. * @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.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.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 $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. * @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. $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() ); $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
$layout_definitions = wp_get_layout_definitions(); $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. * 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'] $spacing_rule['selector']
); );
} else { } 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( $layout_selector = sprintf(
$format, $format,
$selector, $selector,
@ -1593,8 +1595,7 @@ class WP_Theme_JSON {
} }
$layout_selector = sprintf( $layout_selector = sprintf(
'%s .%s%s', '.%s%s',
$selector,
$class_name, $class_name,
$base_style_rule['selector'] $base_style_rule['selector']
); );
@ -2501,6 +2502,7 @@ class WP_Theme_JSON {
* *
* @since 6.1.0 * @since 6.1.0
* @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image. * @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. * @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. // 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. // 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
@ -2667,12 +2669,12 @@ class WP_Theme_JSON {
// 5. Generate and append the feature level rulesets. // 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) { 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. // 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) { 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; return $block_rules;
@ -2683,6 +2685,7 @@ class WP_Theme_JSON {
* *
* @since 6.1.0 * @since 6.1.0
* @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules. * @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 string $selector The root node selector.
* @param array $block_metadata The metadata for the root block. * @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. * user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147. * @link https://github.com/WordPress/gutenberg/issues/36147.
*/ */
$css .= 'body { margin: 0; }'; $css .= ':where(body) { margin: 0; }';
if ( $use_root_padding ) { if ( $use_root_padding ) {
// Top and bottom padding are applied to the outer block container. // 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'] ) ) { if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', '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) > * { 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) > :first-child { margin-block-start: 0; }';
$css .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 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. // 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; }"; $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.