Description

This PR adds a CSS variable (aka custom property) to the border radius block support and leverages this to apply border radii to the search block and its inner elements as needed.

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.

As per current recommendations, this will not introduce any border radius controls into the editor's sidebar. It is also an alternative approach to #27664

How has this been tested?

Manually and unit test: npm run test-unit:watch packages/block-editor/src/hooks/test/style.js

Testing Instructions

1. Checkout this PR
2. Activate a theme that uses a theme.json file or copy the lib/experiment-default-theme.json file into a theme's root folder as experimental-theme.json
3. Create a new post and add a search block to it
4. Select the search block and confirm no border radius controls show in the sidebar
5. Edit the experimental-theme.json file from step 2 and the following context at the JSON's top level. (example gist)

    "core/search": {
        "styles": {
            "border": {
                "radius": "10px"
            }
        }
    }

6. Reload the editor and confirm the search block has a 10px border radius
7. Change the layout for the search block, moving the button "inside", and confirm the inner elements get appropriate border radius values applied
8. Edit the experimental-theme.json file again, this time turning on the border.customRadius flag

    "border": {
        "customRadius": true
    }

9. Reload the editor and select the search block again. This time the border radius controls will show in the sidebar (this is only for ease in testing that the border radius can be applied via block attributes)
10. Adjust the border radius value via the sidebar controls and confirm its values take precedence over the theme.json value.

Screenshots

Search Block with attribute set

Search Block testing with controls turned on

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.