Make WordPress Core

Opened 4 months ago

Last modified 3 months ago

#62289 new defect (bug)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.6.2
Component: Bundled Theme Keywords: good-first-bug has-patch
Focuses: Cc:

Description

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.

Attachments (2)

Screenshot 2024-10-23 at 11.50.42 PM.png (36.2 KB) - added by nidhidhandhukiya 4 months ago.
Screenshot 2024-10-23 at 11.51.08 PM.png (25.8 KB) - added by nidhidhandhukiya 4 months ago.

Download all attachments as: .zip

Change History (5)

#1 @desrosj
3 months ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Twenty Twenty theme Search block looks different in editor and front end. to Twenty Twenty: Search block looks different in editor and front end.

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.

#2 @donetian
3 months ago

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:

https://i.imgur.com/DKQouFu.png

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:

https://i.imgur.com/oLW5Lfd.png
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 {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

https://i.imgur.com/mgWA0gn.png

The same goes for the input styling.

Last edited 3 months ago by donetian (previous) (diff)

This ticket was mentioned in PR #7877 on WordPress/wordpress-develop by donetian-petkov.


3 months ago
#3

  • Keywords has-patch added; needs-patch removed

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

Note: See TracTickets for help on using tickets.