@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/src/components/rich-text/use-format-types.js

@@ -3,10 +3,6 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
@@ -32,6 +28,26 @@ const interactiveContentTags = new Set( [
 	'video',
 ] );
 
+function prefixSelectKeys( selected, prefix ) {
+	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	return Object.fromEntries(
+		Object.entries( selected ).map( ( [ key, value ] ) => [
+			`${ prefix }.${ key }`,
+			value,
+		] )
+	);
+}
+
+function getPrefixedSelectKeys( selected, prefix ) {
+	if ( selected[ prefix ] ) return selected[ prefix ];
+	return Object.keys( selected )
+		.filter( ( key ) => key.startsWith( prefix + '.' ) )
+		.reduce( ( accumulator, key ) => {
+			accumulator[ key.slice( prefix.length + 1 ) ] = selected[ key ];
+			return accumulator;
+		}, {} );
+}
+
 /**
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
@@ -68,18 +84,23 @@ export function useFormatTypes( {
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
-				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[ type.name ] =
+				if ( ! type.__experimentalGetPropsForEditableTreePreparation ) {
+					return accumulator;
+				}
+
+				return {
+					...accumulator,
+					...prefixSelectKeys(
 						type.__experimentalGetPropsForEditableTreePreparation(
 							select,
 							{
 								richTextIdentifier: identifier,
 								blockClientId: clientId,
 							}
-						);
-				}
-
-				return accumulator;
+						),
+						type.name
+					),
+				};
 			}, {} ),
 		[ formatTypes, clientId, identifier ]
 	);
@@ -89,11 +110,14 @@ export function useFormatTypes( {
 	const changeHandlers = [];
 	const dependencies = [];
 
+	for ( const key in keyedSelected ) {
+		dependencies.push( keyedSelected[ key ] );
+	}
+
 	formatTypes.forEach( ( type ) => {
 		if ( type.__experimentalCreatePrepareEditableTree ) {
-			const selected = keyedSelected[ type.name ];
 			const handler = type.__experimentalCreatePrepareEditableTree(
-				selected,
+				getPrefixedSelectKeys( keyedSelected, type.name ),
 				{
 					richTextIdentifier: identifier,
 					blockClientId: clientId,
@@ -105,10 +129,6 @@ export function useFormatTypes( {
 			} else {
 				prepareHandlers.push( handler );
 			}
-
-			for ( const key in selected ) {
-				dependencies.push( selected[ key ] );
-			}
 		}
 
 		if ( type.__experimentalCreateOnChangeEditableValue ) {
@@ -125,10 +145,11 @@ export function useFormatTypes( {
 					);
 			}
 
+			const selected = getPrefixedSelectKeys( keyedSelected, type.name );
 			changeHandlers.push(
 				type.__experimentalCreateOnChangeEditableValue(
 					{
-						...( keyedSelected[ type.name ] || {} ),
+						...( typeof selected === 'object' ? selected : {} ),
 						...dispatchers,
 					},
 					{

package/src/components/spacing-sizes-control/all-input-control.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const allValue = getAllRawValue( values );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values, sides );
+
+	const handleOnChange = ( next ) => {
+		const nextValues = applyValueToSides( values, next, sides );
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			value={ allValue }
+			onChange={ handleOnChange }
+			side={ 'all' }
+			spacingSizes={ spacingSizes }
+			isMixed={ isMixed }
+			type={ type }
+			minimumCustomValue={ minimumCustomValue }
+		/>
+	);
+}

package/src/components/spacing-sizes-control/axial-input-controls.js

@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from './utils';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function AxialInputControls( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const createHandleOnChange = ( side ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+		const nextValues = { ...values };
+
+		if ( side === 'vertical' ) {
+			nextValues.top = next;
+			nextValues.bottom = next;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = next;
+			nextValues.right = next;
+		}
+
+		onChange( nextValues );
+	};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const axisValue =
+					side === 'vertical' ? values.top : values.left;
+				return (
+					<SpacingInputControl
+						value={ axisValue }
+						onChange={ createHandleOnChange( side ) }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						minimumCustomValue={ minimumCustomValue }
+					/>
+				);
+			} ) }
+		</>
+	);
+}

package/src/components/spacing-sizes-control/index.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import AxialInputControls from './axial-input-controls';
+import LinkedButton from './linked-button';
+import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
+import useSetting from '../use-setting';
+
+export default function SpacingSizesControl( {
+	inputProps,
+	onChange,
+	label = __( 'Spacing Control' ),
+	values,
+	sides,
+	splitOnAxis = false,
+	useSelect,
+	minimumCustomValue = 0,
+} ) {
+	const spacingSizes = [
+		{ name: 0, slug: '0', size: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( values );
+	const hasOneSide = sides?.length === 1;
+
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
+	);
+
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+	};
+
+	const handleOnChange = ( nextValue ) => {
+		const newValues = { ...values, ...nextValue };
+		onChange( newValues );
+	};
+
+	const inputControlProps = {
+		...inputProps,
+		onChange: handleOnChange,
+		isLinked,
+		sides,
+		values: inputValues,
+		spacingSizes,
+		useSelect,
+		type: label,
+		minimumCustomValue,
+	};
+
+	return (
+		<fieldset role="region" className="component-spacing-sizes-control">
+			<Text as="legend">{ label }</Text>
+			{ ! hasOneSide && (
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			) }
+			{ isLinked && (
+				<AllInputControl
+					aria-label={ label }
+					{ ...inputControlProps }
+				/>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
+			{ ! isLinked && ! splitOnAxis && (
+				<InputControls { ...inputControlProps } />
+			) }
+		</fieldset>
+	);
+}

package/src/components/spacing-sizes-control/input-controls.js

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { ALL_SIDES, LABELS } from './utils';
+
+export default function BoxInputControls( {
+	values,
+	sides,
+	onChange,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
+		: ALL_SIDES;
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		const nextValues = { ...values };
+		nextValues[ side ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				return (
+					<SpacingInputControl
+						value={ values[ side ] }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						onChange={ createHandleOnChange( side ) }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						minimumCustomValue={ minimumCustomValue }
+					/>
+				);
+			} ) }
+		</>
+	);
+}

package/src/components/spacing-sizes-control/linked-button.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+
+export default function LinkedButton( { isLinked, onClick } ) {
+	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+
+	return (
+		<Tooltip text={ label }>
+			<span className="component-spacing-sizes-control__linked-button">
+				<Button
+					variant={ isLinked ? 'primary' : 'secondary' }
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 16 }
+					aria-label={ label }
+					onClick={ onClick }
+				/>
+			</span>
+		</Tooltip>
+	);
+}

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -0,0 +1,280 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	RangeControl,
+	CustomSelectControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+import { store as blockEditorStore } from '../../store';
+import {
+	LABELS,
+	getSliderValueFromPreset,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './utils';
+
+export default function SpacingInputControl( {
+	spacingSizes,
+	value,
+	side,
+	onChange,
+	isMixed = false,
+	type,
+	minimumCustomValue,
+} ) {
+	let selectListSizes = spacingSizes;
+	const showRangeControl = spacingSizes.length <= 8;
+
+	const disableCustomSpacingSizes = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+		return editorSettings?.disableCustomSpacingSizes;
+	} );
+
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! disableCustomSpacingSizes &&
+			value !== undefined &&
+			! isValueSpacingPreset( value )
+	);
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+	} );
+
+	let currentValue = null;
+
+	const showCustomValueInSelectList =
+		! showRangeControl &&
+		! showCustomValueControl &&
+		value !== undefined &&
+		( ! isValueSpacingPreset( value ) ||
+			( isValueSpacingPreset( value ) && isMixed ) );
+
+	if ( showCustomValueInSelectList ) {
+		selectListSizes = [
+			...spacingSizes,
+			{
+				name: ! isMixed
+					? // translators: A custom measurement, eg. a number followed by a unit like 12px.
+					  sprintf( __( 'Custom (%s)' ), value )
+					: __( 'Mixed' ),
+				slug: 'custom',
+				size: value,
+			},
+		];
+		currentValue = selectListSizes.length - 1;
+	} else if ( ! isMixed ) {
+		currentValue = ! showCustomValueControl
+			? getSliderValueFromPreset( value, spacingSizes )
+			: getCustomValueFromPreset( value, spacingSizes );
+	}
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( currentValue ),
+			[ currentValue ]
+		)[ 1 ] || units[ 0 ].value;
+
+	const setInitialValue = () => {
+		if ( value === undefined ) {
+			onChange( '0' );
+		}
+	};
+
+	const customTooltipContent = ( newValue ) =>
+		value === undefined ? undefined : spacingSizes[ newValue ]?.name;
+
+	const customRangeValue = parseInt( currentValue, 10 );
+
+	const getNewCustomValue = ( newSize ) => {
+		const isNumeric = ! isNaN( parseFloat( newSize ) );
+		const nextValue = isNumeric ? newSize : undefined;
+		return nextValue;
+	};
+
+	const getNewPresetValue = ( newSize, controlType ) => {
+		const size = parseInt( newSize, 10 );
+
+		if ( controlType === 'selectList' ) {
+			if ( size === 0 ) {
+				return undefined;
+			}
+			if ( size === 1 ) {
+				return '0';
+			}
+		} else if ( size === 0 ) {
+			return '0';
+		}
+		return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
+	};
+
+	const handleCustomValueSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+
+	const currentValueHint = ! isMixed
+		? customTooltipContent( currentValue )
+		: __( 'Mixed' );
+
+	const options = selectListSizes.map( ( size, index ) => ( {
+		key: index,
+		name: size.name,
+	} ) );
+
+	const marks = spacingSizes.map( ( newValue, index ) => ( {
+		value: index,
+		label: undefined,
+	} ) );
+
+	const ariaLabel = sprintf(
+		// translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
+		__( '%1$s %2$s' ),
+		LABELS[ side ],
+		type?.toLowerCase()
+	);
+
+	const showHint =
+		showRangeControl &&
+		! showCustomValueControl &&
+		currentValueHint !== undefined;
+
+	return (
+		<>
+			{ side !== 'all' && (
+				<HStack className="components-spacing-sizes-control__side-labels">
+					<Text className="components-spacing-sizes-control__side-label">
+						{ LABELS[ side ] }
+					</Text>
+
+					{ showHint && (
+						<Text className="components-spacing-sizes-control__hint-single">
+							{ currentValueHint }
+						</Text>
+					) }
+				</HStack>
+			) }
+			{ side === 'all' && showHint && (
+				<Text className="components-spacing-sizes-control__hint-all">
+					{ currentValueHint }
+				</Text>
+			) }
+
+			{ ! disableCustomSpacingSizes && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					isSmall
+					className={ classnames( {
+						'components-spacing-sizes-control__custom-toggle-all':
+							side === 'all',
+						'components-spacing-sizes-control__custom-toggle-single':
+							side !== 'all',
+					} ) }
+					iconSize={ 24 }
+				/>
+			) }
+			{ showCustomValueControl && (
+				<>
+					<UnitControl
+						onChange={ ( newSize ) =>
+							onChange( getNewCustomValue( newSize ) )
+						}
+						value={ currentValue }
+						units={ units }
+						min={ minimumCustomValue }
+						placeholder={ allPlaceholder }
+						disableUnits={ isMixed }
+						label={ ariaLabel }
+						hideLabelFromVision={ true }
+						className="components-spacing-sizes-control__custom-value-input"
+					/>
+
+					<RangeControl
+						value={ customRangeValue }
+						min={ 0 }
+						max={ 100 }
+						withInputField={ false }
+						onChange={ handleCustomValueSliderChange }
+						className="components-spacing-sizes-control__custom-value-range"
+					/>
+				</>
+			) }
+			{ showRangeControl && ! showCustomValueControl && (
+				<RangeControl
+					className="components-spacing-sizes-control__range-control"
+					value={ currentValue }
+					onChange={ ( newSize ) =>
+						onChange( getNewPresetValue( newSize ) )
+					}
+					onMouseDown={ ( event ) => {
+						// If mouse down is near start of range set initial value to 0, which
+						// prevents the user have to drag right then left to get 0 setting.
+						if ( event?.nativeEvent?.offsetX < 35 ) {
+							setInitialValue();
+						}
+					} }
+					withInputField={ false }
+					aria-valuenow={ currentValue }
+					aria-valuetext={ spacingSizes[ currentValue ]?.name }
+					renderTooltipContent={ customTooltipContent }
+					min={ 0 }
+					max={ spacingSizes.length - 1 }
+					marks={ marks }
+					label={ ariaLabel }
+					hideLabelFromVision={ true }
+				/>
+			) }
+			{ ! showRangeControl && ! showCustomValueControl && (
+				<CustomSelectControl
+					className="components-spacing-sizes-control__custom-select-control"
+					value={
+						options.find(
+							( option ) => option.key === currentValue
+						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
+					}
+					onChange={ ( selection ) => {
+						onChange(
+							getNewPresetValue(
+								selection.selectedItem.key,
+								'selectList'
+							)
+						);
+					} }
+					options={ options }
+					label={ ariaLabel }
+					hideLabelFromVision={ true }
+					__nextUnconstrainedWidth={ true }
+				/>
+			) }
+		</>
+	);
+}