Description

This PR contains changes to the search block for it to opt in to the proposed border radius support in WordPress#25791.

The updates also handle adjusting the border radius when the search button is placed "inside" the search container. This allows the inner border radius to visually match the outer container without appearing to have "fat corners" as illustrated here.

How has this been tested?

Manually.

Note: To test you will also need to have the changes from WordPress#25791 applied in addition to this PR.

Testing Instructions.

1. Create a new post and add a Search block to it
2. In the inspector panel, drag the border radius slider and confirm the block reflects this
3. Type a border radius value into the text input and confirm that is reflected
4. Click the reset button and there should no longer be a border radius applied to the search block
5. Try setting various border radius values with different layout options selected for the search block e.g. button inside, only button etc.
6. Switch the search block to place the button "inside" and apply a border radius
7. Open dev tools and inspect the inner input and button, they should have an adjusted border radius so they visually match the radius of the outer container without having "fat corners"
   • Inner Radius = Outer Radius - Padding
   • Minimum inner radius is 1px when there is an outer radius present
   • Formula is only approximate as we don't yet have access to border width or padding settings
8. Save post and confirm border radius values are present on the frontend

Screenshots

Types of changes

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.