Themes: Support providing border radius presets

backport-changelog/6.9/9406.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9406
+
+* https://github.com/WordPress/gutenberg/pull/67544

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -74,6 +74,7 @@ Settings related to borders.
 | radius | Allow users to set custom border radius. | `boolean` | `false` |
 | style | Allow users to set custom border styles. | `boolean` | `false` |
 | width | Allow users to set custom border widths. | `boolean` | `false` |
+| radiusSizes | Border radius size presets for the border radius selector. | `[ { name, slug, size } ]` |  |
 
 ---
 

lib/class-wp-theme-json-gutenberg.php

@@ -204,6 +204,15 @@ class WP_Theme_JSON_Gutenberg {
 			'classes'           => array(),
 			'properties'        => array( 'box-shadow' ),
 		),
+		array(
+			'path'              => array( 'border', 'radiusSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => false,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--border-radius--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'border-radius' ),
+		),
 	);
 
 	/**
@@ -386,10 +395,11 @@ class WP_Theme_JSON_Gutenberg {
 			'backgroundSize'  => null,
 		),
 		'border'                        => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
+			'color'       => null,
+			'radius'      => null,
+			'style'       => null,
+			'width'       => null,
+			'radiusSizes' => null,
 		),
 		'color'                         => array(
 			'background'       => null,

lib/theme-i18n.json

@@ -52,6 +52,13 @@
 				}
 			]
 		},
+		"border": {
+			"radiusSizes": [
+				{
+					"name": "Border radius size name"
+				}
+			]
+		},
 		"blocks": {
 			"*": {
 				"typography": {
@@ -96,6 +103,13 @@
 							"name": "Space size name"
 						}
 					]
+				},
+				"border": {
+					"radiusSizes": [
+						{
+							"name": "Border radius size name"
+						}
+					]
 				}
 			}
 		}

packages/block-editor/src/components/border-radius-control/constants.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	cornerAll,
+	cornerBottomLeft,
+	cornerBottomRight,
+	cornerTopLeft,
+	cornerTopRight,
+} from '@wordpress/icons';
+
+export const DEFAULT_VALUES = {
+	topLeft: undefined,
+	topRight: undefined,
+	bottomLeft: undefined,
+	bottomRight: undefined,
+};
+
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
+export const EMPTY_ARRAY = [];
+
+export const CORNERS = {
+	all: __( 'Border radius' ),
+	topLeft: __( 'Top left' ),
+	topRight: __( 'Top right' ),
+	bottomLeft: __( 'Bottom left' ),
+	bottomRight: __( 'Bottom right' ),
+};
+
+export const ICONS = {
+	all: cornerAll,
+	topLeft: cornerTopLeft,
+	topRight: cornerTopRight,
+	bottomLeft: cornerBottomLeft,
+	bottomRight: cornerBottomRight,
+};
+
+export const MIN_BORDER_RADIUS_VALUE = 0;
+
+export const MAX_BORDER_RADIUS_VALUES = {
+	px: 100,
+	em: 20,
+	rem: 20,
+};

packages/block-editor/src/components/border-radius-control/index.js

@@ -3,54 +3,68 @@
  */
 import {
 	BaseControl,
-	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
 import LinkedButton from './linked-button';
 import { useSettings } from '../use-settings';
+import { hasDefinedValues, hasMixedValues } from './utils';
+import SingleInputControl from './single-input-control';
 import {
-	getAllValue,
-	getAllUnit,
-	hasDefinedValues,
-	hasMixedValues,
-} from './utils';
+	DEFAULT_VALUES,
+	RANGE_CONTROL_MAX_SIZE,
+	EMPTY_ARRAY,
+} from './constants';
 
-const DEFAULT_VALUES = {
-	topLeft: undefined,
-	topRight: undefined,
-	bottomLeft: undefined,
-	bottomRight: undefined,
-};
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUES = {
-	px: 100,
-	em: 20,
-	rem: 20,
-};
+function useBorderRadiusSizes( presets ) {
+	const defaultSizes = presets?.default ?? EMPTY_ARRAY;
+	const customSizes = presets?.custom ?? EMPTY_ARRAY;
+	const themeSizes = presets?.theme ?? EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		];
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: sizes;
+	}, [ customSizes, themeSizes, defaultSizes ] );
+}
 
 /**
  * Control to display border radius options.
  *
  * @param {Object}   props          Component props.
  * @param {Function} props.onChange Callback to handle onChange.
  * @param {Object}   props.values   Border radius values.
+ * @param {Object}   props.presets  Border radius presets.
  *
  * @return {Element}              Custom border radius control.
  */
-export default function BorderRadiusControl( { onChange, values } ) {
+export default function BorderRadiusControl( { onChange, values, presets } ) {
 	const [ isLinked, setIsLinked ] = useState(
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
-
+	const options = useBorderRadiusSizes( presets );
 	// Tracking selected units via internal state allows filtering of CSS unit
 	// only values from being saved while maintaining preexisting unit selection
 	// behaviour. Filtering CSS unit only values prevents invalid style values.
@@ -72,64 +86,49 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
-	const unit = getAllUnit( selectedUnits );
-	const unitConfig = units && units.find( ( item ) => item.value === unit );
-	const step = unitConfig?.step || 1;
-
-	const [ allValue ] = parseQuantityAndUnitFromRawValue(
-		getAllValue( values )
-	);
-
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
-	const handleSliderChange = ( next ) => {
-		onChange( next !== undefined ? `${ next }${ unit }` : undefined );
-	};
-
 	return (
 		<fieldset className="components-border-radius-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Radius' ) }
-			</BaseControl.VisualLabel>
-			<div className="components-border-radius-control__wrapper">
-				{ isLinked ? (
-					<>
-						<AllInputControl
-							className="components-border-radius-control__unit-control"
-							values={ values }
-							min={ MIN_BORDER_RADIUS_VALUE }
-							onChange={ onChange }
-							selectedUnits={ selectedUnits }
-							setSelectedUnits={ setSelectedUnits }
-							units={ units }
-						/>
-						<RangeControl
-							__next40pxDefaultSize
-							label={ __( 'Border radius' ) }
-							hideLabelFromVision
-							className="components-border-radius-control__range-control"
-							value={ allValue ?? '' }
-							min={ MIN_BORDER_RADIUS_VALUE }
-							max={ MAX_BORDER_RADIUS_VALUES[ unit ] }
-							initialPosition={ 0 }
-							withInputField={ false }
-							onChange={ handleSliderChange }
-							step={ step }
-							__nextHasNoMarginBottom
-						/>
-					</>
-				) : (
-					<InputControls
-						min={ MIN_BORDER_RADIUS_VALUE }
+			<HStack className="components-border-radius-control__header">
+				<BaseControl.VisualLabel as="legend">
+					{ __( 'Radius' ) }
+				</BaseControl.VisualLabel>
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			</HStack>
+			{ isLinked ? (
+				<>
+					<SingleInputControl
 						onChange={ onChange }
 						selectedUnits={ selectedUnits }
 						setSelectedUnits={ setSelectedUnits }
-						values={ values || DEFAULT_VALUES }
+						values={ values }
 						units={ units }
+						corner="all"
+						presets={ options }
 					/>
-				) }
-				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
-			</div>
+				</>
+			) : (
+				<VStack>
+					{ [
+						'topLeft',
+						'topRight',
+						'bottomLeft',
+						'bottomRight',
+					].map( ( corner ) => (
+						<SingleInputControl
+							key={ corner }
+							onChange={ onChange }
+							selectedUnits={ selectedUnits }
+							setSelectedUnits={ setSelectedUnits }
+							values={ values || DEFAULT_VALUES }
+							units={ units }
+							corner={ corner }
+							presets={ options }
+						/>
+					) ) }
+				</VStack>
+			) }
 		</fieldset>
 	);
 }