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
This commit is contained in:
isabel_brison 2023-06-21 05:32:19 +00:00
parent 9363bb1c43
commit 49aa42f3b6
4 changed files with 27 additions and 10 deletions

View File

@ -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 ) ) {

View File

@ -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 .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
$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; }";

View File

@ -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"

View File

@ -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.