Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try reducing specificity of layout margin rules #47858

Merged
merged 11 commits into from
Apr 3, 2023
Merged

Try reducing specificity of layout margin rules #47858

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
23986e2
Try reducing specificity of layout margin rules
tellthemachines Feb 8, 2023
4734fb6
Replace !important with slight specificity bump.
tellthemachines Feb 10, 2023
5b9efd5
Reintroduce margin-block-end to override UA styles
tellthemachines Mar 7, 2023
f4ef1a5
Lower specificity of Columns block margin.
tellthemachines Mar 7, 2023
d74068e
Reduce specificity of block margin styles.
tellthemachines Mar 8, 2023
00959ef
Update PHP unit test expectations.
tellthemachines Mar 9, 2023
1631851
Lower specificity in global styles output.
tellthemachines Mar 9, 2023
b8ec0ff
Remove flow layout from post title wrapper.
tellthemachines Mar 31, 2023
e13a587
Update `.wp-site-blocks` styles and remove where from global selector.
tellthemachines Apr 3, 2023
f09511a
Update PHP test styles.
tellthemachines Apr 3, 2023
c7d8c25
Actually add the correct styles
tellthemachines Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1298,7 +1298,7 @@ protected function get_layout_styles( $block_metadata ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s .%2$s%3$s' : '%1$s-%2$s%1$s-%2$s%3$s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down Expand Up @@ -2488,8 +2488,9 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$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; }";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this and the JS version are missing the margin-block-end: 0; rule, so the user agent stylesheet rules for paragraph are poking through:

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh whoops, I copied the old rule and forgot to add the end margin 😳

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed!

$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; }";
Expand Down
22 changes: 16 additions & 6 deletions lib/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,14 +252,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"
Expand Down Expand Up @@ -312,14 +317,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"
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -612,7 +612,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }body .is-layout-flex { gap: 0.5em; }body { --wp--style--block-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(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-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 All @@ -628,7 +628,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }body .is-layout-flex { gap: 12px; }body { --wp--style--block-gap: 12px; }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(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }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 All @@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
);
} );

Expand Down
11 changes: 7 additions & 4 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,10 +484,10 @@ export function getLayoutStyles( {
} else {
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `${ selector } .${ className }${
? `:where(${ selector } .${ className })${
spacingStyle?.selector || ''
}`
: `${ selector }-${ className }${ selector }-${ className }${
: `${ selector }-${ className }${
spacingStyle?.selector || ''
}`;
}
Expand Down Expand Up @@ -948,10 +948,13 @@ export const toStyles = (
getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
ruleset =
ruleset +
'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; }`;
ruleset =
ruleset +
`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
ruleset =
ruleset +
':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
}

nodesWithSettings.forEach( ( { selector, presets } ) => {
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/columns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.wp-block-columns {
display: flex;
margin-bottom: 1.75em;
box-sizing: border-box;

// Responsiveness: Allow wrapping on mobile.
Expand Down Expand Up @@ -73,6 +72,11 @@
}
}

// Lower specificity of margin styles so they don't override the Layout block support.
:where(.wp-block-columns) {
margin-bottom: 1.75em;
}

// Add low specificity default padding to columns blocks with backgrounds.
:where(.wp-block-columns.has-background) {
// Matches paragraph block padding.
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ html :where(img[class*="wp-image-"]) {
/**
* Reset user agent styles for figure element margins.
*/
figure {
:where(figure) {
margin: 0 0 1em 0;
}

Expand Down
7 changes: 5 additions & 2 deletions packages/block-library/src/file/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.wp-block-file {
margin-bottom: 1.5em;

&:not(.wp-element-button) {
font-size: 0.8em;
}
Expand All @@ -19,6 +17,11 @@
}
}

// Lowest specificity to avoid overriding layout styles.
:where(.wp-block-file) {
margin-bottom: 1.5em;
}

.wp-block-file__embed {
margin-bottom: 1em;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/post-excerpt/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.wp-block-post-excerpt {
// Lowest specificity on wrapper margins to avoid overriding layout styles.
:where(.wp-block-post-excerpt) {
margin-top: var(--wp--style--block-gap);
margin-bottom: var(--wp--style--block-gap);
}
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/pullquote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.wp-block-pullquote {
margin: 0 0 1em 0;
padding: 3em 0;
text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
Expand All @@ -25,6 +24,11 @@
}
}

// Lowest specificity to avoid overriding layout styles.
:where(.wp-block-pullquote) {
margin: 0 0 1em 0;
}

// Ensure that we are reasonably specific to override theme defaults.
.wp-block-pullquote.has-text-align-left blockquote {
text-align: left;
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,8 +401,7 @@ export default function VisualEditor( { styles } ) {
'is-focus-mode': isFocusMode,
'has-global-padding':
hasRootPaddingAwareAlignments,
},
'is-layout-flow'
}
) }
contentEditable={ false }
>
Expand Down
6 changes: 3 additions & 3 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ public function test_get_stylesheet_generates_layout_styles( $layout_definitions

// 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; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}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(.wp-site-blocks) > * { margin-block-start: 1em; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}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;}',
$theme_json->get_stylesheet( array( 'styles' ) )
);
}
Expand Down Expand Up @@ -119,7 +119,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
);

$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; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}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-post-content{color: gray;}.wp-block-social-links-is-layout-flow.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flow.wp-block-social-links-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-flow.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flow.wp-block-buttons-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex.wp-block-buttons-is-layout-flex{gap: 0;}',
'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(.wp-site-blocks) > * { margin-block-start: 1rem; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}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-post-content{color: gray;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}',
$theme_json->get_stylesheet()
);
}
Expand Down Expand Up @@ -152,7 +152,7 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets

// 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; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var(--wp--preset--spacing--60); }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}body .is-layout-flex{gap: var(--wp--preset--spacing--60);}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(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}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;}',
$theme_json->get_stylesheet( array( 'styles' ) )
);
}
Expand Down