Editor: update layout classnames and specificity.

Adds a compound layout classname and reduces layout spacing rule specificity.

Props ramonopoly, andrewserong, poena.
Fixes #58548.

Built from https://develop.svn.wordpress.org/trunk@55956


git-svn-id: http://core.svn.wordpress.org/trunk@55468 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/block-supports/layout.php

@@ -312,6 +312,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
  * Renders the layout config to the block wrapper.
  *
  * @since 5.8.0
+ * @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.
  * @access private
  *
  * @param string $block_content Rendered block content.
@@ -474,6 +475,10 @@ function wp_render_layout_support_flag( $block_content, $block ) {
 		}
 	}
 
+	// Add combined layout and block classname for global styles to hook onto.
+	$block_name    = explode( '/', $block['blockName'] );
+	$class_names[] = 'wp-block-' . end( $block_name ) . '-' . $layout_classname;
+
 	$content_with_outer_classnames = '';
 
 	if ( ! empty( $outer_class_names ) ) {

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

@@ -1246,6 +1246,7 @@ class WP_Theme_JSON {
 	 * Gets the CSS layout rules for a particular block from theme.json layout definitions.
 	 *
 	 * @since 6.1.0
+	 * @since 6.3.0 Reduced specificity for layout margin rules.
 	 *
 	 * @param array $block_metadata Metadata about the block to get styles for.
 	 * @return string Layout styles for the block.
@@ -1342,7 +1343,7 @@ class WP_Theme_JSON {
 										$spacing_rule['selector']
 									);
 								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
 									$layout_selector = sprintf(
 										$format,
 										$selector,
@@ -2560,8 +2561,9 @@ class WP_Theme_JSON {
 		$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
 		if ( $has_block_gap_support ) {
 			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
-			$css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+			$css            .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
-			$css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
+			$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; }";

wp-includes/theme.json

@@ -219,14 +219,19 @@
 					],
 					"spacingStyles": [
 						{
-							"selector": " > *",
+							"selector": " > :first-child:first-child",
+							"rules": {
+								"margin-block-start": "0"
+							}
+						},
+						{
+							"selector": " > :last-child:last-child",
 							"rules": {
-								"margin-block-start": "0",
 								"margin-block-end": "0"
 							}
 						},
 						{
-							"selector": " > * + *",
+							"selector": " > *",
 							"rules": {
 								"margin-block-start": null,
 								"margin-block-end": "0"
@@ -279,14 +284,19 @@
 					],
 					"spacingStyles": [
 						{
-							"selector": " > *",
+							"selector": " > :first-child:first-child",
+							"rules": {
+								"margin-block-start": "0"
+							}
+						},
+						{
+							"selector": " > :last-child:last-child",
 							"rules": {
-								"margin-block-start": "0",
 								"margin-block-end": "0"
 							}
 						},
 						{
-							"selector": " > * + *",
+							"selector": " > *",
 							"rules": {
 								"margin-block-start": null,
 								"margin-block-end": "0"

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.3-alpha-55955';
+$wp_version = '6.3-alpha-55956';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.