Skip to content

Commit

Permalink
Layout: Reduce specificity of fallback blockGap styles (#42665)
Browse files Browse the repository at this point in the history 
* Layout: Reduce specificity of fallback blockGap styles

* Try adding where rule to block-level style, too

* Fix tests

* Tweak the where rule so that it encapsulates the whole rule

* Fix global styles issue
  • Loading branch information
@andrewserong
andrewserong authored Jul 28, 2022
1 parent d0f881c commit 1768e73
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 20 deletions.
27 changes: 19 additions & 8 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1324,14 +1324,25 @@ protected function get_layout_styles( $block_metadata ) {
}
}

$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
if ( ! $has_block_gap_support ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
}
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,7 +582,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'body .is-layout-flex { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
':where(.is-layout-flex) { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
);
} );

Expand Down Expand Up @@ -647,7 +647,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'.wp-block-group.is-layout-flex { gap: 2em; }'
':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
);
} );
} );
Expand Down
30 changes: 22 additions & 8 deletions packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,14 +329,28 @@ export function getLayoutStyles( {
}

if ( declarations.length ) {
const combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `${ selector } .${ className }${
spacingStyle?.selector || ''
}`
: `${ selector }.${ className }${
spacingStyle?.selector || ''
}`;
let combinedSelector = '';

if ( ! hasBlockGapSupport ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `:where(.${ className }${
spacingStyle?.selector || ''
})`
: `:where(${ selector }.${ className }${
spacingStyle?.selector || ''
})`;
} else {
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `${ selector } .${ className }${
spacingStyle?.selector || ''
}`
: `${ selector }.${ className }${
spacingStyle?.selector || ''
}`;
}
ruleset += `${ combinedSelector } { ${ declarations.join(
'; '
) }; }`;
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles( $layou

// Results also include root site blocks styles.
$this->assertEquals(
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body .is-layout-flex{gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
$stylesheet
);
}
Expand Down Expand Up @@ -98,7 +98,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $

// Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
$this->assertEquals(
'body .is-layout-flex{gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-columns.is-layout-flex{gap: 2em;}',
':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}',
$stylesheet
);
}
Expand Down

0 comments on commit 1768e73

Please sign in to comment.