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

mleathem commented 3 months ago

Description

A CSS rule applied to body, introduces some breaking CSS (via global-styles-inline-css ). Ther maybe other CSS that could be dangerous, but the body selector in particular is stronger than user's may have implemented in their themes ( eg 'body {}' ) and therefore breaks (was in my case!)

here is the CSS

:root :where(body) { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--medium); line-height: 1.75; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

Note line height does not even use a CSS variable.

for example in my case (using Underscore and a child theme)

'--wp--preset--font-family--system' was not define... since no fallback was given a system font was implemented.
'--wp--preset--font-size--medium' was defined but different than the theme CSS defined body font-size.
line-height also made a visible difference (no attempt was made to use a css-var)

Step-by-step reproduction instructions

Go to wordpress site that has Guttenberg enabled and is up-to-date
CSS is injected into the head <style id="global-styles-inline-css">...

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

[X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

[X] Yes

talldan commented 3 months ago

Thanks for reporting this. I can confirm on 6.5 these styles had the body selector (0,0,1) specificity, while on 6.6 it's :root :where(body) (0,1,0).

mleathem commented 3 months ago

thanks @talldan for prompt response. I assume I dont really need to add comments now this issue has been closed (is cause by #63726 )

in fairness I realize now the undefined css var was coming from my own theme.json > styles But the site had been tested and is live, then this change in implementation manifested as a broken styles. (i have a workaround in place with added CSS to reset the ':root :where(body)' )

talldan commented 3 months ago

@mleathem Nothing further should be required. It has now been fixed in the codebase, and it's targeted for release in either WordPress 6.6.1 or 6.6.2 as well as the next gutenberg plugin release.

hellofromtonya commented 3 months ago

Hello @mleathem 👋

Could you please share a link to your (personal, not company) WordPress profile?

As a contributor to this bugfix and with a WordPress profile, you will be given contributor credit (props) when the bugfix is committed into WordPress Core (which will appear on your WordPress profile when it ships in 6.6.2).

If you don't have a WordPress profile yet, I invite you to create one on WordPress.org by selecting the Register link at the top of that page.

It's also helpful to link your GitHub account to your WordPress profile.

Thank you

WordPress / gutenberg