Search block button style overrides theme.json elements border radius

[carolinan]

Description

The button in the search block has CSS that overrides the border radius added to theme.json styles.elements.button.border.radius.
The radius from theme.json does not show in the Site Editor. (It does show on the front)

.wp-block-search .wp-block-search__button {
    border-radius: initial;
    .,,
}

:root :where(.wp-element-button, .wp-block-button__link) {
    border-radius: 8px;
}

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/search/editor.scss#L12

Step-by-step reproduction instructions

Add a border radius to theme.json styles.elements.button.
Add a search block.
Confirm if the border radius show in the Site Editor.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[aaronrobertshaw]

Thanks for flagging this @carolinan 👍

I can replicate the issue.

It appears that the style on the search block pre-dates the ability to style button elements via theme.json.

• Style was added via Polish search button, fix line-height. #26446
• Theme.json button element styling added via Add support for button elements to theme.json #40260

As the style is only present in the editor, it should be an easy fix. I'll throw up a PR tomorrow for this as I'd like to also double check a couple more styles now I'm digging a little deeper on the Search block.

[aaronrobertshaw]

The general styles for the Search block appear ok for me after a second look. I've put up a fix for the editor button radii in #63789.