Skip to content

Commit

Permalink
Try reducing specificity of layout style selectors (#60228)
Browse files Browse the repository at this point in the history 
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
  • Loading branch information
@tellthemachines @aaronrobertshaw
@talldan @ramonjd
5 people authored Apr 19, 2024
1 parent b7e4f3c commit 9496d61
Show file tree
Hide file tree
Showing 10 changed files with 56 additions and 66 deletions.
18 changes: 9 additions & 9 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ function gutenberg_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',
),
Expand Down Expand Up @@ -112,13 +112,13 @@ function gutenberg_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',
),
Expand Down Expand Up @@ -146,7 +146,7 @@ function gutenberg_get_layout_definitions() {
),
),
array(
'selector' => ' > *',
'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
'rules' => array(
'margin' => '0',
),
Expand All @@ -168,7 +168,7 @@ function gutenberg_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',
),
Expand Down Expand Up @@ -248,7 +248,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
),
),
array(
'selector' => "$selector$selector > * + *",
'selector' => "$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
Expand Down Expand Up @@ -357,7 +357,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
),
),
array(
'selector' => "$selector$selector > * + *",
'selector' => "$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
Expand Down Expand Up @@ -799,7 +799,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$has_block_gap_support = isset( $block_gap );

$style = gutenberg_get_layout_style(
".$container_class.$container_class",
".$container_class",
$used_layout,
$has_block_gap_support,
$gap_value,
Expand Down
11 changes: 5 additions & 6 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1486,7 +1486,7 @@ protected function get_layout_styles( $block_metadata ) {
$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 = gutenberg_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.
// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
Expand Down Expand Up @@ -1557,7 +1557,7 @@ protected function get_layout_styles( $block_metadata ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down Expand Up @@ -1636,8 +1636,7 @@ protected function get_layout_styles( $block_metadata ) {
}

$layout_selector = sprintf(
'%s .%s%s',
$selector,
'.%s%s',
$class_name,
$base_style_rule['selector']
);
Expand Down Expand Up @@ -2787,8 +2786,8 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
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; }";
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/default-block-appender/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
:where(body .is-layout-constrained) &,
:where(.wp-site-blocks) & {
> :first-child:first-child {
> :first-child {
margin-block-start: 0;
margin-block-end: 0;
}
Expand Down
Loading

0 comments on commit 9496d61

Please sign in to comment.