Make WordPress Core

Opened 2 years ago

Closed 6 months ago

#59958 closed defect (bug) (worksforme)

Twenty Twenty: Search block is not looking proper when large size is chosen

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-test-info close
Focuses: Cc:

Description (last modified by sabernhardt)

Steps to reproduce the issue :-

  1. Activate Twenty Twenty theme.
  2. Choose search block.
  3. Now change the size to large or xl

You can able to see that editor side the design not looks proper.
I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/CDtNRZcsTTfHClvrPfhR

Attachments (2)

2020-search-block-font-sizes-iframe.png (183.5 KB) - added by sabernhardt 2 years ago.
Search block with each font size preset (inside a post)
TT_search_block.mp4 (2.7 MB) - added by rinkalpagdar 15 months ago.

Change History (9)

@sabernhardt
2 years ago

Search block with each font size preset (inside a post)

#1 @sabernhardt
2 years ago

  • Description modified (diff)
  • Summary changed from Twenty Twenty theme - search block is not looking proper when large size is choosen. to Twenty Twenty: Search block is not looking proper when large size is chosen

In the iframe editor, the line-height for the Search label is too small when the text is large.

This shows multiple issues, which include:

  1. The Search block in the iframe editor inherits a line-height of 1.4em from wp-admin\css\common.css. Before the editor was in an iframe, the label had a normal line-height from :where(.editor-styles-wrapper) { line-height: normal; } in block-library/reset.css.
  2. The line-height in the admin styles probably should be unitless (#44643).
  3. Twenty Twenty's button styles do not apply to the Search button within the editor (with or without the iframe).
  4. In the Extra large example (and possibly others in different languages), the text of the Search button extends outside its borders.

#2 @karmatosed
22 months ago

  • Keywords needs-patch added

#3 @desrosj
15 months ago

  • Milestone changed from Awaiting Review to Future Release

Related: #62289.

#4 @rinkalpagdar
15 months ago

Hey there, I think the issue has now been resolved in the TT theme.
I have added a screencast for it. Please let me know if I am missing anything here.
Thanks!

#5 @rishabhwp
6 months ago

  • Keywords has-test-info added; needs-patch removed

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

  • WordPress: 6.9-alpha-60093-src
  • PHP: 8.2.28
  • Server: nginx/1.27.5
  • Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
  • Browser: Chrome 138.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty 2.9
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ❌ Error condition did not occur.

Supplemental Artifacts

https://i.ibb.co/rKMB5MGp/Screenshot-2025-08-11-at-5-29-26-PM.png

#6 @SirLouen
6 months ago

  • Keywords close added

#7 @sabernhardt
6 months ago

  • Milestone Future Release deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I agree to close this ticket. The iframe issue was fixed.

The 'normal' line-height matches the front end when the Search block is added as a widget, though it does not match the 1.5 for .entry-content when added in a post.

Any changes for the block's default styles—in the editor—can be made on #62289.

Note: See TracTickets for help on using tickets.