"Larger" Font size showing up incorrectly in editor view with Twenty Twenty theme

[annezazu]

Description

The Twenty Twenty theme has opted into the block editor font sizes and styling. Despite this, the "large" font option shows up as bigger than the "larger" font size when selecting between options in the editor. It renders correctly on the front end. Feel free to redirect me if there is a better spot for this :) I tested the same experience with the Twenty Nineteen theme, which has no problem rendering correctly. From what I can gather, the theme is doing everything right to opt into the editor styles and to set the editor font sizes.

To fix this, I found that if I changed the slug for the "larger" option in twenty twenty to "huge", it worked correctly! This tells me that these font size controls might need to look for more than just "huge" since those options aren't standardized as far as I know. This is just a guess!

Twenty twenty theme:

// Block Editor Font Sizes.
	add_theme_support(
		'editor-font-sizes',
		array(
			array(
				'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
				'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
				'size'      => 18,
				'slug'      => 'small',
			),
			array(
				'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
				'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
				'size'      => 21,
				'slug'      => 'normal',
			),
			array(
				'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
				'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
				'size'      => 26.25,
				'slug'      => 'large',
			),
			array(
				'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
				'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
				'size'      => 32,
				'slug'      => 'larger',
			),
		)
	);

	add_theme_support( 'editor-styles' );

Twenty Nineteen theme:

		add_theme_support(
			'editor-font-sizes',
			array(
				array(
					'name'      => __( 'Small', 'twentynineteen' ),
					'shortName' => __( 'S', 'twentynineteen' ),
					'size'      => 19.5,
					'slug'      => 'small',
				),
				array(
					'name'      => __( 'Normal', 'twentynineteen' ),
					'shortName' => __( 'M', 'twentynineteen' ),
					'size'      => 22,
					'slug'      => 'normal',
				),
				array(
					'name'      => __( 'Large', 'twentynineteen' ),
					'shortName' => __( 'L', 'twentynineteen' ),
					'size'      => 36.5,
					'slug'      => 'large',
				),
				array(
					'name'      => __( 'Huge', 'twentynineteen' ),
					'shortName' => __( 'XL', 'twentynineteen' ),
					'size'      => 49.5,
					'slug'      => 'huge',
				),
			)
		);

Step-by-step reproduction instructions

1. Activate Twenty Twenty theme
2. Create a new post
3. Try changing around the font sizes based on the provided default options.

Screenshots, screen recording, code snippet

Video:

font.size.2020.mov

Twenty Twenty Editor view:

Twenty TwentyFront end view:

For fun, I tried changing around the front size to see if something was acting up there and noticed if I changed the font size to just 26, it showed up differently in the sidebar, listing out each number:

I noticed that rather than showing the actual numbers too, the options show up as "1, 2, 3, 4" - wasn't sure if that was intentional and wanted to note as a result:

Here's Twenty Twenty working correctly after setting the "larger" font size slug to "huge":

Environment info

• WordPress 5.9-beta4-52409 using the beta tester plugin with a nightly build
• Gutenberg not active
• Twenty Twenty theme

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

[oandregal]

I gave this a quick test and it seems the CSS Custom Properties for the font sizes provided by the theme are not being generated (they should), hence, the values fall back to the ones provided by core.

I've also noticed that the small font size had 13px (default) and not 18px as set by the theme.

[neilorangepeel]

I'm working on a custom theme and the 'normal' and 'large' CSS Custom Properties are being generated but are being overwritten by the editor.scss as it has a higher specificity. :root .editor-styles-wrapper vs .editor-styles-wrapper .

[chthonic-ds]

@neilorangepeel #37526 appears to lower the specificity and correct the issue you're seeing.

[Mamaduka]

Hi, @oandregal

Should we fix this for 5.9, or can it be punted to a minor release?

[oandregal]

Related to this issue, I've found this other one and prepared a fix #37819

[oandregal]

Also related to this issue: WordPress/wordpress-develop#2129 Apparently, this piece of logic wasn't backported.

[oandregal]

The final PR I've prepared to fix this issue is this WordPress/wordpress-develop#2130

[oandregal]

With the 3 PRs above this would be fixed. Let me unwrap what happened. The issue here is that TwentyTwentyTwenty hasn't been updated to set the default presets via CSS Custom Properties (in lieu of having a theme.json), see the "Changes to the global stylesheet" in this devnote.

So:

• Reduce specificity of legacy font sizes defined by core #37819 lowers the specificity for legacy fonts, those that are no longer WordPress defaults, so we're a bit more friendly to themes.
• The global stylesheet should be enqueued for all themes wordpress-develop#2129 fixes WordPress 5.9 so the global stylesheet is loaded for all themes (something happened during the backports that we missed this).
• Fix TwentyTwenty font sizes & colors wordpress-develop#2130 updates TwentyTwenty to set the default presets via CSS Custom Properties.

[noisysocks]

It looks like we can close this as all three of those PRs have been merged.