Description

Adds a new rounded block style for the search block. This will add a border radius to the search block including adding adjusted border radii to the input and button when the button is placed "inside".

This is an alternate approach to adding border radius block support as suggested in #25791 (comment)

Note: This uses a CSS variable for the border radius value. This allows;

• the value to be inherited and used with calc() for inner elements
• the user to define the border radius variable within different scopes if it makes sense for different search blocks to have different radius values
• the user to only have to set a single CSS variable rather than override multiple styles

How has this been tested?

Manually.

1. Add a search block to a post
2. Select the rounded block style from the sidebar
3. Switch between different button positions via the block toolbar option and confirm rounded styles are applied
4. Check the frontend also gets correct styles

Screenshots

Types of changes

New feature.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.