WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#50591 new defect (bug)

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

Reported by: Joen Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.5
Component: Bundled Theme Keywords: needs-patch has-screenshots
Focuses: Cc:

Description

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.

Attachments (1)

issue.gif (4.0 MB) - added by Joen 5 months ago.
Pixel shifting issue and debugging session

Change History (2)

@Joen
5 months ago

Pixel shifting issue and debugging session

#1 @SergeyBiryukov
5 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from TwentyTwenty: Editor styles target the block toolbar, causing pixel shifting to Twenty Twenty: Editor styles target the block toolbar, causing pixel shifting
Note: See TracTickets for help on using tickets.