#54550 closed defect (bug) (fixed)
The margin added at the top level styles (for body) in theme.json is override by a margin added from Gutenberg
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.9 | Priority: | normal |
Severity: | minor | Version: | 5.9 |
Component: | General | Keywords: | has-patch commit |
Focuses: | Cc: |
Description
Companion Issue for https://github.com/WordPress/gutenberg/issues/36147.
Essentially any margin added to the root element via theme.json is overwritten by a CSS reset margin value provided by the Gutenberg Plugin. The theme.json setting should take precedence.
I have a PR ready in https://github.com/WordPress/gutenberg/pull/36960 which requires a similar fix in WP Core.
Change History (12)
This ticket was mentioned in PR #1989 on WordPress/wordpress-develop by getdave.
18 months ago
#1
- Keywords has-patch added
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
18 months ago
This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.
18 months ago
This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.
18 months ago
#7
@
18 months ago
- Keywords commit added; needs-testing removed
Test Report
Env:
- OS: macOS
- Localhost: wp-env
- Theme: TT2
- Plugins: none
- WordPress: trunk
Steps
- Add the following to the TT2's
src/wp-content/themes/twentytwentytwo/theme.json
file in the"styles"
section on about line 333:
"spacing": { "blockGap": "1.5rem", "margin": "0 5rem", "padding": "0" },
- Run in the following commands in the console (terminal):
npm run build npm run env:start npm run env:install
- Open the site in your favorite browser http://localhost:8889/
- In your browser, open the dev tools to the Elements tab and click on the
<body>
element. Look at theStyles
.
Before the patch, the <body>
margin
will be 0
with the margin: 0 5rem;
from the theme crossed out.
After applying the patch, the <body>
margin: 0;
is crossed out and the theme's margin: 0 5rem;
is active.
Results
I can reproduce the issue.
Applying the patch resolves it.
Marking for commit.
#8
@
18 months ago
- Owner set to hellofromTonya
- Status changed from new to reviewing
Self-assigning for commit.
hellofromtonya commented on PR #1989:
18 months ago
#10
Committed via https://core.trac.wordpress.org/changeset/52329.
Companion fix to https://github.com/WordPress/gutenberg/pull/36960.
Note there is now also an alternative approach to this in https://github.com/WordPress/gutenberg/pull/36960.
In https://github.com/WordPress/gutenberg/issues/36147 we learn that the Theme JSON class automatically applies a
margin: 0
to thebody
element. Unfortunately it does so in a way that means if you usetheme.json
to define a margin on the body element, the defaultmargin: 0
will still take precedence.For example applying this to
theme.json
will still leave you with the _default_margin: 0
on thebody
, rather than the _expected_ value ofmargin: 0 5rem
:This PR fixes this by only applying the default
margin: 0
if the root spacing does not have a margin declaration.Trac ticket: https://core.trac.wordpress.org/ticket/54550