Make WordPress Core

Opened 11 months ago

Last modified 6 weeks ago

#58669 new defect (bug)

Twenty Twenty-Three: Search input border displays in editor but not on front side

Reported by: upadalavipul's profile upadalavipul Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version:
Component: Bundled Theme Keywords: has-testing-info
Focuses: Cc:

Description

I have reviewed Search block in different different themes and I found search input border does not display in frontend side for Twenty Twenty-Three.

Please check the below provided video recording for a better understanding.

Video Recording: https://share.cleanshot.com/Px5DpDrD3DLYKF1rYVd5

Attachments (1)

TT3-Search-block-input-border.png (83.8 KB) - added by sabernhardt 2 months ago.
Search block can have an extra border in the non-framed post editor

Download all attachments as: .zip

Change History (7)

#1 @sabernhardt
11 months ago

  • Component changed from Themes to Bundled Theme

#2 @poena
9 months ago

  • Keywords needs-testing-info reporter-feedback added

Hi! Thank you for the report.

I am not able to reproduce this on WordPress version 6.3.1 (macOS, Chrome, with no plugins enabled).

  • When I test the search block, adding a border places that border on the input field and the button separately.
  • If I select the block toolbar option "Button inside", the result is not the same for me as in your video. There is no separate border or outline around the input field in the editor or the front.

Kindly add more details about how to reproduce the issue. Including which settings are enabled on the search block, and which version of WordPress, and which version of the theme you are using.


Please remember that not everyone who contributes to WordPress can see videos or images, so a text description is always needed.

#3 @karmatosed
2 months ago

  • Keywords close added

I am unable to also reproduce this, which leads me to wonder if we need more information or if this has been resolved with the passing of time. For now, I am going to recommend this ticket is closed by adding the keyword - if further steps can be added we can always adjust. Thank you everyone for the collaboration so far.

#4 @sabernhardt
2 months ago

  • Keywords has-testing-info added; needs-testing-info reporter-feedback removed
  • Summary changed from Twenty Twenty-Three: Search input border does not display on font side. to Twenty Twenty-Three: Search input border displays in editor but not on front side

The input field did not have a border in the iframe editor, same as the front end. However, when I activated the Custom Fields panel, the non-framed post editor showed the rounded input border from wp-admin/css/forms.css. This seems related to the lowered specificity in GB41393, though not the same effect mentioned in #60164 (missing outer border on front end).

Steps:

  1. Add a new post.
  2. Ensure that the editor canvas is not inside an iframe. For one method: go to the (3-dot) Options menu in the upper (right) corner, choose Preferences, switch the Custom Fields toggle on, and click the "Show & Reload Page" button.
  3. Add a Search block, and choose the "Button inside" option from the block toolbar.
  4. Duplicate the Search block, if you would like, and customize the border for the second block. In the sidebar, switch to the Styles tab and find the Border section. Then set both the width and color of the border.
  5. Save the post and view it on the front end. Notice that the border(s) wrap the entire block, and the input field does not have its own border on the front end.

Adding a Search block with the "Button inside" setting within the non-framed post editor would be an edge case, and the extra border is a small discrepancy. If this is worth fixing, the report would belong in the Gutenberg repository.

Last edited 2 months ago by sabernhardt (previous) (diff)

#5 @sabernhardt
2 months ago

  • Severity changed from normal to minor

@sabernhardt
2 months ago

Search block can have an extra border in the non-framed post editor

#6 @karmatosed
6 weeks ago

  • Keywords close removed
Note: See TracTickets for help on using tickets.