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

[upadalavipul]

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

[poena]

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.

[karmatosed]

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.

[sabernhardt]

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.

[sabernhardt]

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

[sabernhardt]

The editor uses the iframe now with the Custom Fields option. I am therefore unable to reproduce this without active plugins, and I'll close the ticket as 'works for me'.

With plugins such as All in One SEO or Yoast SEO, the input field could still have a border in the editor when using various block themes (T22, T23, T24, or T25).

• All in One SEO does not support the iframe editor yet.
• Yoast SEO added iframe (V3) support, but it enqueued the forms stylesheet as a ​dependency within the iframe—after wp-block-library. Overriding that in block library styles would require increasing the CSS specificity of :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input by more than one element selector.

If you think the block library styles should change, please open an ​issue on GitHub.