-
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
Move the root body margin reset into the Core theme.json #36996
Move the root body margin reset into the Core theme.json #36996
Conversation
cc @overclokk - this is the approach you've been advocating for. |
Yes, this won't work as expected in cases like this: It will still get the browser defaults for the undeclared sides. --editActually this can work by declaring the default margin like this: I like Dave's reasoning about |
To confirm I tried this and it does work so it's an option. |
I think this is the option that works better because in a theme I can override also a single position or all positions. If I wan to override single position: Theme theme.json "styles": {
"spacing": {
"margin": {
"top": "5px",
"bottom": "5px",
}
}
} Ans the result will be: body {
margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
} And if in a theme I want to override all I can do like this: "styles": {
"spacing": {
"margin": "0"
}
} And the result will be: body {
margin: 0;
} |
I updated the PR to use the |
I think conceptually I prefer the other approach because while |
Adding if statement you always add potentially bugs, this should be handled by the system in place, the theme.json, this also avoids misunderstandings of where the code is by devs, so if you need to reset the body margin (for any reason) why not add a So, if I want to remove enterely the margin I can add this to my theme.json (Now it does not work obviously) "styles": {
"spacing": {
"margin": null
}
} So this will be handled by the parser and not hardcoded. |
I agree that it is perhaps a little confusing that a browser CSS "reset" for the For this Beta period, we need to focus on fixing bugs and I fear exploring the route in this PR further may lead us into "feature development" territory. I'm not saying that we shouldn't explore this in the future (i.e. WP 6.0 cycle) but for the purposes of immediately resolving the Issue originally reported, we should aim for the simplest solution with the fewest knock on effects. The majority of contributors seem agreed that the best solution to achieve that is now #36960. So let's proceed with that. Thank you for advocating for alternative routes. We should/could raise Issues to explore this further in the future. 🙇 |
Description
By popular request this PR explores an alternative fix for #36147 which moves the CSS reset into the root
theme.json
file in Core.As I see it this is inferior to my preferred solution in #36960 for the following reasons:
Riad's reason
See #36996 (comment).
root
margin
value will be overwrittenthe root
margin
value will be overwritten in its entirety by anything provided by the Theme'stheme.json
. For example try setting this in yourtheme.json
:This will result in the following CSS being generated which causes us to lose the
0
margin on thebottom
andright
sides:Reduced clarity of intent
The reason for including
body { margin: 0; }
is as a CSS reset for browser defaults. That's why it has a specificif()
conditional in the code. By moving this to the Coretheme.json
we risk this seeming like just another default value provided by Core when in fact it has a very specific intent. I believe the intent will be lost especially when we consider you cannot add comments to.json
files.Potential backwards compatiblity issues
Theme have come to expect
body { margin: 0 }
. As explained above if we include this in Coretheme.json
then if the user provides any margin value in theirtheme.json
then this risks themargin: 0
being lost. That could cause many themes to suffer visual regressions. Granted this is simple to solve but we want to avoid these kind of rippling changes, especially this close to 5.9.Closes #36147
How has this been tested?
Follow same instructions as #36958.
Please ensure you test both the string and object based
margin
properties in yourtheme.json
as they will produce different results.Screenshots
Types of changes
Checklist:
*.native.js
files for terms that need renaming or removal).