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: |
|
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:-
- Choose Search block.
- In editor and front side both you can able to see search label font is different and also input styling is different.
Attachments (2)
Change History (5)
#1
@
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.
#2
@
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:
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.
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
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.