[wp-trac] [WordPress Trac] #61704: global-styles-inline-css rule introduces breaking changes " :root :where(body)"

[WordPress Trac]

#61704: global-styles-inline-css rule introduces breaking changes " :root
:where(body)"
--------------------------+------------------------------
 Reporter:  talldanwp     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.6
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:
--------------------------+------------------------------
Description changed by talldanwp:

Old description:

> 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.
>
> ## Testing Instructions
>
> ### Frontend 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. Check that the styles are like 'expected' snippet below, with a simple
> `body` selector and not a `:root :where(body)` selector.
>
> Expected:
> {{{#!css
> 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:
> {{{#!css
> :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;
> }
> }}}

New description:

 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:
 {{{#!css
 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:
 {{{#!css
 :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;
 }
 }}}

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61704#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform