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

1. Go to wordpress site that has Guttenberg enabled and is up-to-date
2. 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.

• Yes

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

• Yes