@wordpress/block-editor 15.1.0 → 15.1.1-next.0f6f9d12c.0

package/src/components/border-radius-control/single-input-control.js

@@ -0,0 +1,277 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalUnitControl as UnitControl,
+	__experimentalHStack as HStack,
+	Icon,
+	Tooltip,
+	RangeControl,
+	Button,
+	CustomSelectControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getAllValue,
+	getCustomValueFromPreset,
+	getPresetValueFromControlValue,
+	getPresetValueFromCustomValue,
+	getSliderValueFromPreset,
+	isValuePreset,
+	convertPresetsToCustomValues,
+} from './utils';
+import {
+	CORNERS,
+	ICONS,
+	MIN_BORDER_RADIUS_VALUE,
+	MAX_BORDER_RADIUS_VALUES,
+	RANGE_CONTROL_MAX_SIZE,
+} from './constants';
+
+export default function SingleInputControl( {
+	corner,
+	onChange,
+	selectedUnits,
+	setSelectedUnits,
+	values: valuesProp,
+	units,
+	presets,
+} ) {
+	const changeCornerValue = ( validatedValue ) => {
+		if ( corner === 'all' ) {
+			onChange( {
+				topLeft: validatedValue,
+				topRight: validatedValue,
+				bottomLeft: validatedValue,
+				bottomRight: validatedValue,
+			} );
+		} else {
+			onChange( {
+				...values,
+				[ corner ]: validatedValue,
+			} );
+		}
+	};
+
+	const onChangeValue = ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+
+		// Filter out CSS-unit-only values to prevent invalid styles.
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		changeCornerValue( nextValue );
+	};
+
+	const onChangeUnit = ( next ) => {
+		const newUnits = { ...selectedUnits };
+		if ( corner === 'all' ) {
+			newUnits.topLeft = next;
+			newUnits.topRight = next;
+			newUnits.bottomLeft = next;
+			newUnits.bottomRight = next;
+		} else {
+			newUnits[ corner ] = next;
+		}
+		setSelectedUnits( newUnits );
+	};
+
+	// For shorthand style & backwards compatibility, handle flat string value.
+	const values =
+		typeof valuesProp !== 'string'
+			? valuesProp
+			: {
+					topLeft: valuesProp,
+					topRight: valuesProp,
+					bottomLeft: valuesProp,
+					bottomRight: valuesProp,
+			  };
+
+	// For 'all' corner, convert presets to custom values before calling getAllValue
+	// For individual corners, check if the value should be converted to a preset
+	let value;
+	if ( corner === 'all' ) {
+		const convertedValues = convertPresetsToCustomValues( values, presets );
+		const customValue = getAllValue( convertedValues );
+		value = getPresetValueFromCustomValue( customValue, presets );
+	} else {
+		value = getPresetValueFromCustomValue( values[ corner ], presets );
+	}
+	const resolvedPresetValue = isValuePreset( value )
+		? getCustomValueFromPreset( value, presets )
+		: value;
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( resolvedPresetValue );
+	const computedUnit = value
+		? parsedUnit
+		: selectedUnits[ corner ] || selectedUnits.flat || 'px';
+	const unitConfig =
+		units && units.find( ( item ) => item.value === computedUnit );
+	const step = unitConfig?.step || 1;
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		value !== undefined && ! isValuePreset( value )
+	);
+	const showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;
+	const presetIndex = getSliderValueFromPreset( value, presets );
+	const rangeTooltip = ( newValue ) =>
+		value === undefined ? undefined : presets[ newValue ]?.name;
+	const marks = presets
+		.slice( 1, presets.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
+	const hasPresets = marks.length > 0;
+	let options = [];
+	if ( ! showRangeControl ) {
+		options = [
+			...presets,
+			{
+				name: __( 'Custom' ),
+				slug: 'custom',
+				size: resolvedPresetValue,
+			},
+		].map( ( size, index ) => ( {
+			key: index,
+			name: size.name,
+		} ) );
+	}
+	const icon = ICONS[ corner ];
+
+	const handleSliderChange = ( next ) => {
+		const val =
+			next !== undefined ? `${ next }${ computedUnit }` : undefined;
+		changeCornerValue( val );
+	};
+
+	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	// Tooltip rendering also requires the UnitControl to be wrapped. See:
+	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
+	return (
+		<HStack>
+			{ icon && (
+				<Icon
+					className="components-border-radius-control__icon"
+					icon={ icon }
+					size={ 24 }
+				/>
+			) }
+			{ ( ! hasPresets || showCustomValueControl ) && (
+				<div className="components-border-radius-control__input-controls-wrapper">
+					<Tooltip text={ CORNERS[ corner ] } placement="top">
+						<div className="components-border-radius-control__tooltip-wrapper">
+							<UnitControl
+								className="components-border-radius-control__unit-control"
+								aria-label={ CORNERS[ corner ] }
+								value={ [ parsedQuantity, computedUnit ].join(
+									''
+								) }
+								onChange={ onChangeValue }
+								onUnitChange={ onChangeUnit }
+								size="__unstable-large"
+								min={ MIN_BORDER_RADIUS_VALUE }
+								units={ units }
+							/>
+						</div>
+					</Tooltip>
+					<RangeControl
+						__next40pxDefaultSize
+						label={ __( 'Border radius' ) }
+						hideLabelFromVision
+						className="components-border-radius-control__range-control"
+						value={ parsedQuantity ?? '' }
+						min={ MIN_BORDER_RADIUS_VALUE }
+						max={ MAX_BORDER_RADIUS_VALUES[ computedUnit ] }
+						initialPosition={ 0 }
+						withInputField={ false }
+						onChange={ handleSliderChange }
+						step={ step }
+						__nextHasNoMarginBottom
+					/>
+				</div>
+			) }
+			{ hasPresets && showRangeControl && ! showCustomValueControl && (
+				<RangeControl
+					__next40pxDefaultSize
+					className="components-border-radius-control__range-control"
+					value={ presetIndex }
+					onChange={ ( newSize ) => {
+						changeCornerValue(
+							getPresetValueFromControlValue(
+								newSize,
+								'range',
+								presets
+							)
+						);
+					} }
+					withInputField={ false }
+					aria-valuenow={ presetIndex }
+					aria-valuetext={ presets[ presetIndex ]?.name }
+					renderTooltipContent={ rangeTooltip }
+					min={ 0 }
+					max={ presets.length - 1 }
+					marks={ marks }
+					label={ CORNERS[ corner ] }
+					hideLabelFromVision
+					__nextHasNoMarginBottom
+				/>
+			) }
+
+			{ ! showRangeControl && ! showCustomValueControl && (
+				<CustomSelectControl
+					className="components-border-radius-control__custom-select-control"
+					value={
+						options.find(
+							( option ) => option.key === presetIndex
+						) || options[ options.length - 1 ]
+					}
+					onChange={ ( selection ) => {
+						if (
+							selection.selectedItem.key ===
+							options.length - 1
+						) {
+							setShowCustomValueControl( true );
+						} else {
+							changeCornerValue(
+								getPresetValueFromControlValue(
+									selection.selectedItem.key,
+									'selectList',
+									presets
+								)
+							);
+						}
+					} }
+					options={ options }
+					label={ CORNERS[ corner ] }
+					hideLabelFromVision
+					size="__unstable-large"
+				/>
+			) }
+			{ hasPresets && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use border radius preset' )
+							: __( 'Set custom border radius' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					size="small"
+					className="components-border-radius-control__custom-toggle"
+					iconSize={ 24 }
+				/>
+			) }
+		</HStack>
+	);
+}

package/src/components/border-radius-control/style.scss

@@ -1,3 +1,8 @@
+.components-border-radius-control__header {
+	height: $grid-unit-20;
+	margin-bottom: $grid-unit-15;
+}
+
 .components-border-radius-control {
 	// Reset `fieldset` browser defaults.
 	border: 0;
@@ -7,25 +12,7 @@
 	margin-bottom: $grid-unit-15;
 
 	legend {
-		margin-bottom: $grid-unit-10;
-	}
-
-	.components-border-radius-control__wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-
-		.components-border-radius-control__unit-control {
-			width: calc((100% - #{$grid-unit-20}) / 2);
-			margin-bottom: 0;
-			margin-right: $grid-unit-20;
-			flex-shrink: 0;
-		}
-
-		.components-border-radius-control__range-control {
-			flex: 1;
-			margin-right: $grid-unit-15;
-		}
+		margin-bottom: 0;
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
@@ -35,13 +22,21 @@
 		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button {
+	.components-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 0;
 		}
 	}
 }
+
+.components-border-radius-control__custom-select-control,
+.components-border-radius-control__range-control {
+	flex: 1;
+}
+
+.components-border-radius-control__icon {
+	flex: 0 0 auto;
+}

package/src/components/border-radius-control/utils.js

@@ -74,7 +74,8 @@ export function getAllValue( values = {} ) {
 		: '';
 	const unit = mode( allUnits );
 
-	const allValue = value === 0 || value ? `${ value }${ unit }` : undefined;
+	const allValue =
+		value === 0 || value ? `${ value }${ unit || '' }` : undefined;
 
 	return allValue;
 }
@@ -86,11 +87,26 @@ export function getAllValue( values = {} ) {
  * @return {boolean}      Whether values are mixed.
  */
 export function hasMixedValues( values = {} ) {
-	const allValue = getAllValue( values );
-	const isMixed =
-		typeof values === 'string' ? false : isNaN( parseFloat( allValue ) );
+	if ( typeof values === 'string' ) {
+		return false;
+	}
+
+	if ( ! values || typeof values !== 'object' ) {
+		return false;
+	}
+
+	const cornerValues = Object.values( values );
+
+	if ( cornerValues.length === 0 ) {
+		return false;
+	}
 
-	return isMixed;
+	const firstValue = cornerValues[ 0 ];
+
+	// Check if all values are exactly the same (including undefined)
+	const allSame = cornerValues.every( ( value ) => value === firstValue );
+
+	return ! allSame;
 }
 
 /**
@@ -117,3 +133,160 @@ export function hasDefinedValues( values ) {
 
 	return !! filteredValues.length;
 }
+
+/**
+ * Checks is given value is a radius preset.
+ *
+ * @param {string} value Value to check
+ *
+ * @return {boolean} Return true if value is string in format var:preset|border-radius|.
+ */
+export function isValuePreset( value ) {
+	if ( ! value?.includes ) {
+		return false;
+	}
+	return value === '0' || value.includes( 'var:preset|border-radius|' );
+}
+
+/**
+ * Returns the slug section of the given preset string.
+ *
+ * @param {string} value Value to extract slug from.
+ *
+ * @return {string|undefined} The int value of the slug from given preset.
+ */
+export function getPresetSlug( value ) {
+	if ( ! value ) {
+		return;
+	}
+
+	if ( value === '0' || value === 'default' ) {
+		return value;
+	}
+
+	const slug = value.match( /var:preset\|border-radius\|(.+)/ );
+
+	return slug ? slug[ 1 ] : undefined;
+}
+
+/**
+ * Converts radius preset value into a Range component value .
+ *
+ * @param {string} presetValue Value to convert to Range value.
+ * @param {Array}  presets     Array of current radius preset value objects.
+ *
+ * @return {number} The int value for use in Range control.
+ */
+export function getSliderValueFromPreset( presetValue, presets ) {
+	if ( presetValue === undefined ) {
+		return 0;
+	}
+	const slug =
+		parseFloat( presetValue, 10 ) === 0
+			? '0'
+			: getPresetSlug( presetValue );
+	const sliderValue = presets.findIndex( ( size ) => {
+		return String( size.slug ) === slug;
+	} );
+
+	// Returning NaN rather than undefined as undefined makes range control thumb sit in center
+	return sliderValue !== -1 ? sliderValue : NaN;
+}
+
+/**
+ * Converts a preset into a custom value.
+ *
+ * @param {string} value   Value to convert
+ * @param {Array}  presets Array of the current radius preset objects
+ *
+ * @return {string} Mapping of the radius preset to its equivalent custom value.
+ */
+export function getCustomValueFromPreset( value, presets ) {
+	if ( ! isValuePreset( value ) ) {
+		return value;
+	}
+
+	const slug = parseFloat( value, 10 ) === 0 ? '0' : getPresetSlug( value );
+	const radiusSize = presets.find( ( size ) => String( size.slug ) === slug );
+
+	return radiusSize?.size;
+}
+
+/**
+ * Converts a control value into a preset value.
+ *
+ * @param {number} controlValue to convert to preset value.
+ * @param {string} controlType  Type of control
+ * @param {Array}  presets      Array of current radius preset value objects.
+ *
+ * @return {string} The custom value for use in Range control.
+ */
+export function getPresetValueFromControlValue(
+	controlValue,
+	controlType,
+	presets
+) {
+	const size = parseInt( controlValue, 10 );
+	if ( controlType === 'selectList' ) {
+		if ( size === 0 ) {
+			return undefined;
+		}
+	} else if ( size === 0 ) {
+		return '0';
+	}
+	return `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;
+}
+
+/**
+ * Converts a custom value to preset value if one can be found.
+ *
+ * Returns value as-is if no match is found.
+ *
+ * @param {string} value   Value to convert
+ * @param {Array}  presets Array of the current border radius preset objects
+ *
+ * @return {string} The preset value if it can be found.
+ */
+export function getPresetValueFromCustomValue( value, presets ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValuePreset( value ) || value === '0' ) {
+		return value;
+	}
+
+	const spacingMatch = presets.find(
+		( size ) => String( size.size ) === String( value )
+	);
+
+	if ( spacingMatch?.slug ) {
+		return `var:preset|border-radius|${ spacingMatch.slug }`;
+	}
+
+	return value;
+}
+
+/**
+ * Converts all preset values in a values object to their custom equivalents.
+ *
+ * @param {Object} values  Values object to convert
+ * @param {Array}  presets Array of current border radius preset objects
+ *
+ * @return {Object} Values with presets converted to custom values
+ */
+export function convertPresetsToCustomValues( values, presets ) {
+	if ( ! values || typeof values !== 'object' ) {
+		return values;
+	}
+
+	const converted = {};
+	Object.keys( values ).forEach( ( key ) => {
+		const value = values[ key ];
+		if ( isValuePreset( value ) ) {
+			const customValue = getCustomValueFromPreset( value, presets );
+			converted[ key ] = customValue !== undefined ? customValue : value;
+		} else {
+			converted[ key ] = value;
+		}
+	} );
+
+	return converted;
+}

package/src/components/global-styles/border-panel.js

@@ -145,7 +145,17 @@ export default function BorderPanel( {
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
-	const borderRadiusValues = decodeValue( border?.radius );
+	const borderRadiusValues = useMemo( () => {
+		if ( typeof border?.radius !== 'object' ) {
+			return decodeValue( border?.radius );
+		}
+		return {
+			topLeft: decodeValue( border?.radius?.topLeft ),
+			topRight: decodeValue( border?.radius?.topRight ),
+			bottomLeft: decodeValue( border?.radius?.bottomLeft ),
+			bottomRight: decodeValue( border?.radius?.bottomRight ),
+		};
+	}, [ border?.radius, decodeValue ] );
 	const setBorderRadius = ( newBorderRadius ) =>
 		setBorder( { ...border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {
@@ -276,6 +286,7 @@ export default function BorderPanel( {
 					panelId={ panelId }
 				>
 					<BorderRadiusControl
+						presets={ settings?.border?.radiusSizes }
 						values={ borderRadiusValues }
 						onChange={ ( newValue ) => {
 							setBorderRadius( newValue || undefined );

package/src/components/global-styles/hooks.js

@@ -32,6 +32,7 @@ const VALID_SETTINGS = [
 	'border.radius',
 	'border.style',
 	'border.width',
+	'border.radiusSizes',
 	'shadow.presets',
 	'shadow.defaultPresets',
 	'color.background',

package/src/components/global-styles/utils.js

@@ -80,7 +80,12 @@ export const PRESET_METADATA = [
 		path: [ 'spacing', 'spacingSizes' ],
 		valueKey: 'size',
 		cssVarInfix: 'spacing',
-		valueFunc: ( { size } ) => size,
+		classes: [],
+	},
+	{
+		path: [ 'border', 'radiusSizes' ],
+		valueKey: 'size',
+		cssVarInfix: 'border-radius',
 		classes: [],
 	},
 ];

package/src/components/rich-text/index.js

@@ -132,8 +132,12 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectionEnd,
+			getBlockEditingMode,
+			isNavigationMode,
+		} = select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -154,15 +158,19 @@ export function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
+			isContentOnlyWriteMode:
+				isNavigationMode() &&
+				getBlockEditingMode( clientId ) === 'contentOnly',
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
-		clientId,
-		identifier,
-		instanceId,
-		originalIsSelected,
-		isBlockSelected,
-	] );
+	const { selectionStart, selectionEnd, isSelected, isContentOnlyWriteMode } =
+		useSelect( selector, [
+			clientId,
+			identifier,
+			instanceId,
+			originalIsSelected,
+			isBlockSelected,
+		] );
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
@@ -323,8 +331,9 @@ export function RichTextWrapper(
 	} = useFormatTypes( {
 		clientId,
 		identifier,
-		withoutInteractiveFormatting,
 		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting,
+		disableNoneEssentialFormatting: isContentOnlyWriteMode,
 	} );
 
 	function addEditorOnlyFormats( value ) {