Twenty Twenty: Search block looks different in editor and front end.

[nidhidhandhukiya]

Steps to reproduce the issue:-

1. Choose Search block.
2. In editor and front side both you can able to see search label font is different and also input styling is different.

[desrosj]

Related: #59958.

Thanks @nidhidhandhukiya, I am able to reproduce this issue.

I do wonder if there are other default themes where this same issue is happening. It would be worthwhile to audit them all.

[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:

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:

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 {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

The same goes for the input styling.

I modified 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-search {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

Trac ticket: https://core.trac.wordpress.org/ticket/62289