#61704 closed defect (bug) (fixed)
global-styles-inline-css rule introduces breaking changes " :root :where(body)"
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.6.2 | Priority: | normal |
Severity: | normal | Version: | 6.6 |
Component: | Editor | Keywords: | has-patch has-testing-info has-unit-tests commit fixed-major dev-reviewed |
Focuses: | Cc: |
Description (last modified by )
Originally reported in: https://github.com/WordPress/gutenberg/issues/63712
There's a gutenberg fix for this issue: https://github.com/WordPress/gutenberg/pull/63726.
It requires a PHP backport, hence the trac ticket.
What?
In WordPress 6.6, there was a general effort to lower and level specificity, but a couple of selectors seem to have mistakenly had their specificity raised.
The styles associated with the body
are an example. In 6.5 these styles used the simple body
selector. In 6.6 the selector is :root :where(body)
, an increase in specificity.
Why?
These changes may cause some problems for themes, especially the typography styles in the body, which will cascade.
Testing Instructions
- Open the site editor
- Click the editor area to open the editor
- Click 'View site' to view the frontend
- Insect the body element's styles
- Check that the styles are like 'expected' snippet below, with a simple
body
selector and not a:root :where(body)
selector.
Expected:
body { --wp--style--root--padding-top: 115px; --wp--style--root--padding-right: var(--wp--preset--spacing--50); --wp--style--root--padding-bottom: 115px; --wp--style--root--padding-left: var(--wp--preset--spacing--50); color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-style: normal; font-weight: 400; line-height: 1.55; }
Before:
:root :where(body) { --wp--style--root--padding-top: 115px; --wp--style--root--padding-right: var(--wp--preset--spacing--50); --wp--style--root--padding-bottom: 115px; --wp--style--root--padding-left: var(--wp--preset--spacing--50); color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-style: normal; font-weight: 400; line-height: 1.55; }
Change History (24)
This ticket was mentioned in PR #7061 on WordPress/wordpress-develop by @talldanwp.
7 months ago
#2
This ticket was mentioned in Slack in #core-editor by talldanwp. View the logs.
7 months ago
@talldanwp commented on PR #7061:
7 months ago
#5
Thanks for spotting that. Linty things should be all fixed in the last two commits 👍
@aaronrobertshaw commented on PR #7061:
7 months ago
#6
Thanks the @since
and @ticket
comments LGTM 👍
#7
@
7 months ago
- Keywords has-testing-info has-unit-tests added
- Milestone changed from Awaiting Review to 6.6.2
Pulling into the 6.6.2.
A discussion in Making WordPress #core-editor
is happening to assess the bug's impact for 6.6.1 consideration (given 6.6.1 is tentatively scheduled for tomorrow).
Does this bugfix affect the "all links underlined" fix in r58751 and r58760 (see #61660)?
No, the "all links are underlined" fix still works. I used the same testing steps and technique as this Test Report.
This ticket was mentioned in Slack in #core-editor by hellofromtonya. View the logs.
7 months ago
#10
@
7 months ago
- Owner set to hellofromTonya
- Status changed from new to reviewing
Test Report
Patch tested: https://github.com/WordPress/wordpress-develop/pull/7061
Steps to Reproduce or Test
- View the frontend of the test site.
- Open the browser's DevTools.
- In its Inspector, select the body element and view its styles. 🐞 Bug occurs here.
Environment
- WordPress:
trunk
and 6.6.1 - Browser: Firefox 128.0
- PHP: 7.4
- Theme: TT4
- Plugins: none
Actual Results
When reproducing a bug/defect:
- ❌ Error condition occurs.
:root :where(body) { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-style: normal; font-weight: 400; line-height: 1.55; --wp--style--root--padding-top: 0px; --wp--style--root--padding-right: var(--wp--preset--spacing--50); --wp--style--root--padding-bottom: 0px; --wp--style--root--padding-left: var(--wp--preset--spacing--50); }
When testing the bugfix patch:
- ✅ Issue resolved with patch.
body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-style: normal; font-weight: 400; line-height: 1.55; --wp--style--root--padding-top: 0px; --wp--style--root--padding-right: var(--wp--preset--spacing--50); --wp--style--root--padding-bottom: 0px; --wp--style--root--padding-left: var(--wp--preset--spacing--50); }
#11
@
7 months ago
- Keywords commit added
Patch: https://github.com/WordPress/wordpress-develop/pull/7061
- Tested before and after on
trunk
and the 6.6 branch (see Test Report) - can reproduce and this patch resolves it ✅
- Double checked changes with its Gutenberg PR - confirmed its a clean merge of PHP changes ✅
LGTM for commit ✅
#12
@
7 months ago
Committer Note:
Pausing on the commit to give the original bug reporter a couple of days to provide a link to their WordPress profile. I requested it here in the GitHub issue. Always nice to have their username on the commit message itself (though can be manually added in Core Props).
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
7 months ago
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
6 months ago
@talldanwp commented on PR #7061:
6 months ago
#16
Committed in r58856
#17
@
6 months ago
- Keywords dev-feedback added
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for backport to 6.6.2
Trac ticket: https://core.trac.wordpress.org/ticket/61704
Gutenberg issue: https://github.com/WordPress/gutenberg/issues/63712
Gutenberg PR: https://github.com/WordPress/gutenberg/pull/63726
## What?
In WordPress 6.6, there was a general effort to lower and level specificity, but a couple of selectors seem to have mistakenly had their specificity raised.
The styles associated with the
body
are an example. In 6.5 these styles used the simplebody
selector. In 6.6 the selector is:root :where(body)
, an increase in specificity.## Why?
These changes may cause some problems for themes, especially the typography styles in the body, which will cascade.
## How?
Reverts the selector back to
body
Note that unlike the gutenberg PR, the core backport only affects the frontend styles. The editor styles will be fixed by updating the packages from gutenberg.
*props to @aaronrobertshaw for pointing me to the fix*
## Testing Instructions
### Editor styles
body
selector and not a:root :where(body)
selector.Expected:
Before: