Make WordPress Core

Opened 7 months ago

Closed 6 months ago

Last modified 5 months ago

#61704 closed defect (bug) (fixed)

global-styles-inline-css rule introduces breaking changes " :root :where(body)"

Reported by: talldanwp's profile talldanwp Owned by: hellofromtonya's profile hellofromTonya
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 talldanwp)

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

  1. Open the site editor
  2. Click the editor area to open the editor
  3. Click 'View site' to view the frontend
  4. Insect the body element's styles
  5. 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)

#1 @talldanwp
7 months ago

  • Description modified (diff)

This ticket was mentioned in PR #7061 on WordPress/wordpress-develop by @talldanwp.


7 months ago
#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 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.

## 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

  1. Open the site editor
  2. Click the editor area to open the editor
  3. Click 'View site' to view the frontend
  4. Insect the body element's styles
  5. Using the browser dev tools, 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;
}

#3 @talldanwp
7 months ago

  • Description modified (diff)

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 @hellofromTonya
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

#9 @hellofromTonya
7 months ago

#61731 was marked as a duplicate.

#10 @hellofromTonya
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

  1. View the frontend of the test site.
  2. Open the browser's DevTools.
  3. 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 @hellofromTonya
7 months ago

  • Keywords commit added

Patch: https://github.com/WordPress/wordpress-develop/pull/7061

Reviewed and approved:

  • 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 @hellofromTonya
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

#15 @talldanwp
6 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 58856:

Theme JSON: Ensure root selector (body) is not wrapped in :root :where().

Pre-WordPress 6.6, the body selector was used for styles associated with the body.

In 6.6, this was mistakenly changed to :root :where(body), an increase in specificity, causing some issues for themes.

This change reverts the specificity increase, styles again use the body selector.

Syncs PHP changes from https://github.com/WordPress/gutenberg/pull/63726.

Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromtonya.
Fixes #61704.

@talldanwp commented on PR #7061:


6 months ago
#16

Committed in r58856

#17 @talldanwp
6 months ago

  • Keywords dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport to 6.6.2

#18 @desrosj
6 months ago

#61805 was marked as a duplicate.

#19 @hellofromTonya
6 months ago

In 58864:

Docs: Remove bugfix since annotations from WP_Theme_JSON::get_block_nodes().

Removes the @since bugfix annotations from WP_Theme_JSON::get_block_nodes() docblock. Bugfixes are not annotated in docblocks.

Follow-up to [58856].
See #61704.

#20 @hellofromTonya
6 months ago

  • Keywords fixed-major dev-reviewed added; dev-feedback removed

[58856] with docs follow-up [58864] LGTM for backport to 6.6 branch.

#21 @hellofromTonya
6 months ago

#61840 was marked as a duplicate.

#22 @hellofromTonya
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 58874:

Theme JSON: Ensure root selector (body) is not wrapped in :root :where().

Pre-WordPress 6.6, the body selector was used for styles associated with the body.

In 6.6, this was mistakenly changed to :root :where(body), an increase in specificity, causing some issues for themes.

This change reverts the specificity increase, styles again use the body selector.

Syncs PHP changes from https://github.com/WordPress/gutenberg/pull/63726.

Reviewed by hellofromTonya.
Merges [58856] and [58861] to the 6.6 branch.

Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromTonya.
Fixes #61704.

Note: See TracTickets for help on using tickets.