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: |
|
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)
Change History (4)
#1
@
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
@
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
@
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.
Pixel shifting issue and debugging session