Remove default padding/margin on the body of the page and editor canvas #35421
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
[Type] Enhancement
youknowriad
requested review from
scruffian,
mtias,
oandregal,
kjellr,
jasmussen and
carolinan
youknowriad
requested review from
ajitbohra,
ellatrix and
spacedmonkey
as code owners
youknowriad
commented
Oct 7, 2021
| @@ -996,6 +996,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.
I considered whether this should be applied in the default theme.json instead but decided against because while right now the default theme.json styles applies to body, I'm wondering if it's better if they apply to .wp-site-blocks because that's the actual container of everything (imagine defining a layout style at the root level, you want it to apply there and not on body)
|
Size Change: -241 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
I haven't tested yet, and will do so, but wanted to share that I think this is likely a good decision. The 8px feel like they originate from the very birth of hypertext, where such a small margin might be fine for smaller screens of the past. In the context of WordPress, you'll almost always want to customize this for your design, and so zero does arguably provide a better default. |
kjellr
approved these changes
Oct 7, 2021
There was a problem hiding this comment.
This works, and really helps with frontend/editor parity.
I do think there's value in having some sort of configurable body/side margin setting somewhere — it would be great for themes to be able to specify a global page margin somewhere, specifically the space that would appear on either side of the content on smaller screens — but that shouldn't apply to full-width items the way this body margin does anyway.
That should already be the case in the "layout" panel of the Global styles UI, there's a "padding" UI there. |
Yeah, I can adjust padding there, but the padding surrounds full-width items too:
I generally want those to span the entire width of the page, regardless of the padding control. (But I'm not sure that I always want that, so it's a little difficult to figure out how to get it sorted.) |
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #35350
I've been going back and forth on this one. The last attempt tried to make the default margin around the editor canvas and the whole page on the frontend match the browser default (8px) but there has been a lot of feedback that it should just be 0 as all themes zero out this and that this default margin creates more headaches than it actually solves. So I've changed my mind on this and now I'm going the "0" margin a try.
(The zero margin is only added to the frontend for block templates)
We need to test this properly on several themes to see the impact and whether it's ok to ship it as is.
Please help test and let me know what you think.