[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
> ### Editor styles
> 1. Open the site editor
> 2. Click the editor area to open the editor
> 3. Using browser dev tools, inspect the `body` element inside the `edit-
> site-visual-editor__editor-canvas` iframe.
> 4. Check that the styles are like 'expected' snippet  below, with a
> simple `body` selector and not a `:root :where(body)` selector.
>
> ### Frontend styles
> 1. Click 'View site' to view the frontend
> 2. Insect the body element's styles
> 3. 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.

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

--

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