[wp-trac] [WordPress Trac] #50591: TwentyTwenty: Editor styles target the block toolbar, causing pixel shifting

[WordPress Trac]

#50591: TwentyTwenty: Editor styles target the block toolbar, causing pixel
shifting
--------------------------+-----------------------------------------
 Reporter:  Joen          |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:  trunk
 Severity:  normal        |   Keywords:  needs-patch has-screenshots
  Focuses:                |
--------------------------+-----------------------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/50591>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform