Make WordPress Core

Opened 5 years ago

Closed 11 months ago

#50591 closed defect (bug) (worksforme)

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

Reported by: joen's profile Joen Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.5
Component: Bundled Theme Keywords: has-screenshots close
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 years ago.
Pixel shifting issue and debugging session

Change History (4)

@Joen
5 years ago

Pixel shifting issue and debugging session

#1 @SergeyBiryukov
5 years 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

#2 @poena
22 months ago

  • Keywords close added; needs-patch removed

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

#3 @karmatosed
11 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I also can't reproduce this @poena so I am going to agree with closing this as fixed. Thankyou everyone for collaborating on this. Should it still be an issue for anyone we can look to reopen if we have some steps to reproduce.

Note: See TracTickets for help on using tickets.