[#113] - Radius not an option

[thatisrich]

Description

#113 - This PR aims to introduce a border radius option alongside the current border option.

This approach aims to replicate the border radius option found within the block editor, as it appears that there is currently no core component which handles a radius option, likewise neither do the components BorderBoxControl or BorderControl.

NOTE - This PR relies on the block preview PR which is yet to be merged. The reason for this was to ensure the border radius addition worked correctly across both the code and visual previews.

In this approach it is possible to set a singular Linked value for the border radius and Unlinked values, where each corner can be controlled independently. When switching from Linked to Unlinked, the Linked value populates each corner input initially. When switching from Unlinked to Linked, the top left value is used as the singular value.

Change Log

• src/editor/components/StylesBorder.js - Including radius component in the layout
• src/editor/components/StylesBorderRadius.js - The new component

Steps to test

• Navigate to the Styles Editor page
• Select an element or block, such as Button
• Scroll down in the styles panel to the bottom where Border and radius is in view
• Adjust the Radius Linked value using the input box
• When the Visual view is selected, notice the border radius will change accordingly
• When the Code view is selected, notice the value of the radius property will change accordingly
• Adjust the Radius Linked value using the range slider
• Notice the changes are reflected in both views
• Click on the Unlink button to reveal 4 input boxes, one for each corner of the element
• Update the value in each box
• Notice the changes are reflected in both the Visual and Code views
• Follow these steps on other blocks and elements

Screenshots/Videos

A demo showing various interactions with the radius setting and the visual preview
A demo showing various interactions with the radius setting and the code preview

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[thatisrich]

On further testing I noticed a bug in which the value would be stripped when toggling between Linked and Unlinked values. This has now been addressed and works as expected and fallbacks are in place.

A demo showing how the toggles work when stripping certain values can be seen here