Twenty Twenty: Editor styles target the block toolbar, causing pixel shifting

[Joen]

Steps to reproduce:

• Use a WordPress 5.5 build, or have the Gutenberg plugin activated
• Use TwentyTwenty
• Select a block in the block editor and hover the block type indicator with the mouse

Observe that the icon shifts a pixel up and down as you hover the icon.

This shift is caused by the following CSS in the editor style:

	/* STRUCTURE */

	.editor-styles-wrapper > * {
		font-size: 21px;
	}

This CSS targets every element inside the editing canvas,including block UI such as the block toolbar.

First discovered in ​https://github.com/WordPress/gutenberg/pull/22673#issuecomment-638213064

The best fix is be to use the editor styles API for adding editor styles, outlined in ​https://developer.wordpress.org/block-editor/developers/themes/theme-support/#editor-styles. In doing so, the following CSS would be plenty to set the baseline font size, without affecting block UI:

body {
	font-size: 21px;
}

However, it is my understanding that TwentyTwenty intentionally avoids doing so, for reasons outlined in this ticket: ​https://github.com/WordPress/gutenberg/issues/18571

Outside of using the editor styles API, it's possible there's a smaller or interim solution that just reduces the specificity of the selector, or avoids targetting the block toolbar.

[Joen]

Pixel shifting issue and debugging session

[poena]

Hi,
I am no longer able to reproduce this (testing with WP 6.2, Chrome, Firefox), I suggest closing this ticket as fixed.