-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Allow selector ordering to ensure theme.json root selector margin takes precedence #36960
Conversation
@@ -1059,7 +1076,7 @@ private function get_block_classes( $style_nodes ) { | |||
} | |||
|
|||
if ( self::ROOT_BLOCK_SELECTOR === $selector ) { | |||
$block_rules .= 'body { margin: 0; }'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoid applying rule here otherwise it will end up being applied last in the selector order thereby ensuring it takes precedence over rules applied via theme.json
.
// `margin` in its `spacing` declaration for the `body` element then these | ||
// user-generated values take precedence in the CSS cascade. | ||
// See: https://github.com/WordPress/gutenberg/issues/36147. | ||
if ( self::ROOT_BLOCK_SELECTOR === $selector ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By applying the margin: 0 rule early we ensure that any values provided from theme.json
will be later in the selector order and thus take precedence over the default.
cc @overclokk as you raised the original Issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PRs Dave! I tested and work as expected.
I think I prefer this PR from the conditional zeroing of margin - also in the other approach we should also take into account the format of margin:{top: '10px'}
etc.
I'm just wondering if it worths to call the functions again, instead of just
if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= 'body { margin: 0; }';
}
before the generation of the styles.
I did this because it was putting the selectors on the same line within the outputted code so I thought perhaps it was safer to reuse the function. |
I was thinking why not adding that value as default in theme.json in core, so the theme can override that vales without an if statement |
ad82e53
to
b3b02dc
Compare
In light of #36957 (comment) I've removed the fix I cherrypicked from #36957. You now need to test this PR against WordPress 5.8. |
b3b02dc
to
a66fb10
Compare
Responded in #36958 (comment). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks Dave for your work here! IMO this fix can be landed and discuss afterwards a different approach that would potentially change where we apply all the root styles from theme.json
, given the WP release phase we are right now.
I'd give it a bit more time before merging if anyone else wants to chime in - cc @youknowriad
@@ -724,7 +734,6 @@ private function get_block_classes( $style_nodes ) { | |||
} | |||
|
|||
if ( self::ROOT_BLOCK_SELECTOR === $selector ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes me wonder if all the content of this condition should be above but it's good regardless.
Ok then folks, it seems the majority are agreed that this PR is the approach we want to pursue. I will close out #36996 and then make a Core patch for the changes in this PR. |
Also avoids creating failing unit tests due to a single space character changing in a snaphshot!
23acf16
to
7c2969d
Compare
Companion Core patch in https://core.trac.wordpress.org/ticket/54550 cc @ntsekouras |
Just fixing the PHP unit tests prior to merging. |
…es precedence (#36960) * Set default margin on body prior to generating styles from theme.json * Add additional context to comment Addresses #36960 (comment) * Restore simple version of body rule Also avoids creating failing unit tests due to a single space character changing in a snaphshot! * Update with fixes made in Core patch See WordPress/wordpress-develop#1989 * Fix output now includes new line. * Fix tests relating to spacing * Fix test to put body CSS reset first
Description
Companion to Core patch https://core.trac.wordpress.org/ticket/54550.
(originally an alternative approach to #36958).
Note that as with #36958 this PR
also includes changes from #36957 which make it possible for you to test this PR. They will be removed prior to mergerequires you to test against WordPress 5.8 (that's five point EIGHT not NINE). See #36957 (comment) for reasons.To use WP 5.8 add this to your
.wp-env.override.json
file:Closes #36147
How has this been tested?
Follow same instructions as #36958.
But this time you should see that the
body { margin: 0; }
declaration is still output but is overridden by values fromtheme.json
if they are found.Basically the default
margin: 0
is still applied but anything intheme.json
will win out.I believe this is the best approach because
margin: 0
onbody
which Themes have come to expect thus avoiding backwards compat issues.margin
notation (i.e. string or object) that can be applied intheme.json
.Screenshots
Types of changes
Checklist:
*.native.js
files for terms that need renaming or removal).