Global Styles: Add border radius controls to global styles sidebar

packages/edit-site/src/components/sidebar/border-panel.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorFeature } from '../editor/utils';
+
+const MIN_BORDER_RADIUS_VALUE = 0;
+const MAX_BORDER_RADIUS_VALUE = 50;
+
+export function useHasBorderPanel( { supports, name } ) {
+	// This function will allow for easy addition of future border properties
+	// e.g. Border width.
+	// return (
+	// 	useHasBorderRadiusControl( { supports, name } ) ||
+	// 	useHasBorderWidthControl( { supports, name } )
+	// )
+	return useHasBorderRadiusControl( { supports, name } );
+}
+
+function useHasBorderRadiusControl( { supports, name } ) {
+	return (
+		useEditorFeature( 'border.customRadius', name ) &&
+		supports.includes( 'borderRadius' )
+	);
+}
+
+export default function BorderPanel( {
+	context: { supports, name },
+	getStyle,
+	setStyle,
+} ) {
+	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
+	const borderRadiusValue = parseInt(
+		getStyle( name, 'borderRadius' ) || 0,
+		10
+	);
+
+	return (
+		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
+			{ hasBorderRadius && (
+				<RangeControl
+					value={ borderRadiusValue }
+					label={ __( 'Border radius' ) }
+					min={ MIN_BORDER_RADIUS_VALUE }
+					max={ MAX_BORDER_RADIUS_VALUE }
+					initialPosition={ borderRadiusValue }
+					allowReset
+					onChange={ ( value ) => {
+						const radiusStyle = value ? `${ value }px` : undefined;
+						setStyle( name, 'borderRadius', radiusStyle );
+					} }
+				/>
+			) }
+		</PanelBody>
+	);
+}

packages/edit-site/src/components/sidebar/global-styles-sidebar.js

@@ -24,6 +24,7 @@ import {
 	default as TypographyPanel,
 	useHasTypographyPanel,
 } from './typography-panel';
+import { default as BorderPanel, useHasBorderPanel } from './border-panel';
 import { default as ColorPanel, useHasColorPanel } from './color-panel';
 import { default as SpacingPanel, useHasSpacingPanel } from './spacing-panel';
 
@@ -38,6 +39,7 @@ function GlobalStylesPanel( {
 	const hasColorPanel = useHasColorPanel( context );
 	const hasTypographyPanel = useHasTypographyPanel( context );
 	const hasSpacingPanel = useHasSpacingPanel( context );
+	const hasBorderPanel = useHasBorderPanel( context );
 
 	if ( ! hasColorPanel && ! hasTypographyPanel && ! hasSpacingPanel ) {
 		return null;
@@ -68,6 +70,13 @@ function GlobalStylesPanel( {
 					setStyle={ setStyle }
 				/>
 			) }
+			{ hasBorderPanel && (
+				<BorderPanel
+					context={ context }
+					getStyle={ getStyle }
+					setStyle={ setStyle }
+				/>
+			) }
 		</>
 	);
 	if ( ! wrapperPanelTitle ) {