Global Styles: Root font-size utility classes mismatch theme settings.

[allancole]

While testing the new font-size options in Gutenberg 7.9, I noticed there’s some additional CSS on the frontend that overrides my the font-sizes I have set in CSS and the add_theme_support() editor font-size settings.

These screenshot illustrates the issue:

Additionally, in my functions.php file I have this snippet:

// Add custom editor font sizes.
add_theme_support(
	'editor-font-sizes',
	array(
		array(
			'name'      => __( 'Large', 'themename' ),
			'shortName' => __( 'L', 'themename' ),
			'size'      => 24,
			'slug'      => 'large',
		),
	)
);

(only large is shown here for context, but all the editor font-sizes have this issue)

Expected behavior
I expected Gutenberg to accept the font-sizes I set both in functions.php and my theme’s stylesheet but both are getting overwritten because Gutenberg is adding :root to the font-size selectors.

I recognize I could fix this in my theme but adding the :root selector to my stylesheet’s font-size utility class selectors, but other Gutenberg utility classes like .has-background or .alignwide do not use :root in their selectors.

For consistency, can we simply remove the :root selector here?

Editor version (please complete the following information):

• WordPress version: 5.4
• Gutenberg plugin version: 7.9.1

Desktop (please complete the following information):

• Mac OS
• Chrome (version 80.+)

[kjellr]

cc @youknowriad and @nosolosw, since this is related to #21153.

Since there's no variable being used at the moment, the suggestion in the other thread isn't possible.

Themes can override this by changing their custom font size style specificity to :root .has-tiny-text-size, but that's quite uncommon. Currently, the default Gutenberg value overrides the theme-provided style value in most themes I've tested.

Twenty Twenty specifies its font size variables using p.has-tiny-text-size, which does override it. The downside there is that the style doesn't work on other text-based blocks with a font size control, like the Heading block. Not sure the best way forward on this one.

[youknowriad]

I believe these themes you're talking about are not using the regular editor-styles mechanism right?

[kjellr]

The issue persists whether or not it's enqueued with add_theme_support('editor-styles') or not — it's just related to the theme's specificity for the styles.

Twenty Twenty does not use that method, but the styles are not overridden because of the extra specificity of the p tag in the rule.

Whereas in the theme @allancole and I are building, we do use the regular mechanism, but our usual .has-tiny-text-size style is overridden.

[oandregal]

#21969 reverts the :root addition, which is a leftover of the experiment we did with CSS variables by default that we later reverted.

[aduth]

Even without :root, I have to imagine this is still pretty fragile, since both would still have the same specificity, it depends on the load order of stylesheets. If theme styles are meant to override Gutenberg's, ideally it should have a higher specificity.