[wp-trac] [WordPress Trac] #62289: Twenty Twenty: Search block looks different in editor and front end.

[WordPress Trac]

#62289: Twenty Twenty: Search block looks different in editor and front end.
----------------------------------------+-----------------------------
 Reporter:  nidhidhandhukiya            |       Owner:  (none)
     Type:  defect (bug)                |      Status:  new
 Priority:  normal                      |   Milestone:  Future Release
Component:  Bundled Theme               |     Version:  6.6.2
 Severity:  normal                      |  Resolution:
 Keywords:  needs-patch good-first-bug  |     Focuses:
----------------------------------------+-----------------------------

Comment (by donetian):

 The problem is not present from Twenty Twenty-One onwards. This is due to
 the fact that the newer themes are using CSS variables instead of
 hardcoded font-family rules.

 Here is Twenty Twenty-One for example:

 [[Image(https://i.imgur.com/DKQouFu.png)]]

 [[Image(https://i.imgur.com/VDXnxdJ.png)]]

 On Twenty Twenty Gutenberg is using one font-family for the Search label,
 while another font-family is set on the Search label for the Preview page.
 This is due to the CSS rules for the .entry-content div container, under
 which the label is placed:

 [[Image(https://i.imgur.com/oLW5Lfd.png)]]
 [[Image(https://i.imgur.com/DBWpkN2.png)]]

 One way for the problem to be resolved is for CSS variables to be set on
 the Twenty Twenty as well, but I do not know if it is worth the efforts to
 make such major overhaul changes to a theme which is already four-five
 years old.

 The simpler change is to modify the .entry-content CSS rules in wp-
 content/themes/twentytwenty/style.css -> 11. Entry Content like how other
 CSS rules have been changed:

 {{{
 .entry-content .wp-block-file {
         font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
 Helvetica, sans-serif;
 }
 }}}

 Here is a hardcoded fix that works:


 {{{
 .entry-content .wp-block-search__label {
         font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
 Helvetica, sans-serif;
 }
 }}}

 [[Image(https://i.imgur.com/mgWA0gn.png)]]

 The same goes for the input styling.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62289#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform