@wordpress/block-editor 9.6.0 → 9.8.0

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 }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/spacing-sizes-control/style.scss

@@ -0,0 +1,122 @@
+.tools-panel-item-spacing {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-row-gap: $grid-unit-05;
+}
+
+.component-spacing-sizes-control {
+	box-sizing: border-box;
+	padding-bottom: 12px;
+	width: 100%;
+	display: contents;
+
+	legend {
+		padding: 0;
+		grid-column: 1 / 1;
+		grid-row: 1 / 1;
+		align-self: center;
+	}
+
+	.components-spacing-sizes-control__side-labels {
+		grid-column: 1 / 1;
+		min-height: 30px;
+		justify-content: left;
+	}
+
+	.components-spacing-sizes-control__hint-single {
+		margin-top: 0;
+		margin-left: 0;
+	}
+
+	.components-spacing-sizes-control__hint-single,
+	.components-spacing-sizes-control__hint-all {
+		color: $gray-700;
+		font-size: 12px;
+	}
+
+	.components-spacing-sizes-control__hint-all {
+		grid-column: 2 / 2;
+		justify-self: left;
+		grid-row: 1 / 1;
+		align-self: center;
+		margin-left: $grid-unit-05;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all {
+		grid-column: 2 / 2;
+		grid-row: 1 / 1;
+		justify-self: end;
+		margin-right: $grid-unit-05;
+		padding: 0;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-single {
+		grid-column: 3 / 3;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all,
+	.components-spacing-sizes-control__custom-toggle-single {
+		&.is-small.has-icon {
+			padding: 0;
+			min-width: $icon-size;
+		}
+	}
+
+	.component-spacing-sizes-control__linked-button {
+		grid-column: 3 / 3;
+		grid-row: 1 / 1;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-value-range {
+		grid-column: span 2;
+		margin-left: $grid-unit-10;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-spacing-sizes-control__custom-value-input {
+		width: 124px;
+	}
+
+	.components-spacing-sizes-control__range-control {
+		grid-column: span 3;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-range-control__wrapper {
+		margin-bottom: 0;
+	}
+
+	.components-range-control__mark {
+		height: $grid-unit-05;
+		width: 3px;
+		background-color: #fff;
+		z-index: 1;
+	}
+
+	.components-range-control__marks {
+		margin-top: 17px;
+
+		:first-child {
+			display: none;
+		}
+	}
+
+	[class*="ThumbWrapper-thumbColor"] {
+		z-index: 3;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		margin-right: $grid-unit-05;
+		grid-column: 1 / 1;
+		justify-self: left;
+		font-size: 12px;
+	}
+
+	.components-spacing-sizes-control__custom-select-control {
+		grid-column: span 3;
+	}
+}

package/src/components/spacing-sizes-control/test/utils.js

@@ -0,0 +1,156 @@
+/**
+ * Internal dependencies
+ */
+import {
+	isValueSpacingPreset,
+	getCustomValueFromPreset,
+	getSpacingPresetCssVar,
+	getSpacingPresetSlug,
+	getSliderValueFromPreset,
+	getAllRawValue,
+	isValuesMixed,
+	isValuesDefined,
+} from '../utils';
+
+describe( 'isValueSpacingPreset', () => {
+	it( 'should return true if value is string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( 'var:preset|spacing|20' ) ).toBe( true );
+	} );
+	it( 'should return false if value is not a string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( '30px' ) ).toBe( false );
+	} );
+} );
+
+describe( 'getCustomValueFromPreset', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getCustomValueFromPreset( '20px', spacingSizes ) ).toBe(
+			'20px'
+		);
+	} );
+	it( 'should return value from matching spacingSizes array entry if string in spacing presets var format', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|20', spacingSizes )
+		).toBe( '8px' );
+	} );
+	it( 'should return undefined if no matching preset in spacingSizes array', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( undefined );
+	} );
+} );
+
+describe( 'getSpacingPresetCssVar', () => {
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
+	} );
+	it( 'should return a string in spacing presets css var format with slug from provided value', () => {
+		expect( getSpacingPresetCssVar( 'var:preset|spacing|20' ) ).toBe(
+			'var(--wp--preset--spacing--20)'
+		);
+	} );
+} );
+
+describe( 'getSpacingPresetSlug', () => {
+	it( 'should return original value if 0 or default', () => {
+		expect( getSpacingPresetSlug( '0' ) ).toBe( '0' );
+		expect( getSpacingPresetSlug( 'default' ) ).toBe( 'default' );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect( getSpacingPresetSlug( 'var:preset|spacing|20' ) ).toBe( '20' );
+	} );
+} );
+
+describe( 'getSliderValueFromPreset', () => {
+	const spacingSizes = [
+		{ name: 'Small', slug: 20, size: '8px' },
+		{ name: 'Large', slug: 30, size: '24px' },
+	];
+	it( 'should return NaN if no matching preset found - NaN makes range control go to start', () => {
+		expect( getSliderValueFromPreset( '10px', spacingSizes ) ).toBe( NaN );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect(
+			getSliderValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( 1 );
+	} );
+} );
+
+describe( 'getAllRawValue', () => {
+	const customValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '6px',
+		right: '2px',
+	};
+	it( 'should return the most common custom value from the values object', () => {
+		expect( getAllRawValue( customValues ) ).toBe( '5px' );
+	} );
+	const presetValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return the most common preset value from the values object', () => {
+		expect( getAllRawValue( presetValues ) ).toBe(
+			'var:preset|spacing|30'
+		);
+	} );
+} );
+
+describe( 'isValuesMixed', () => {
+	const unmixedValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '5px',
+		right: '5px',
+	};
+	it( 'should return false if all values are the same', () => {
+		expect( isValuesMixed( unmixedValues ) ).toBe( false );
+	} );
+	const mixedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesMixed( mixedValues ) ).toBe( true );
+	} );
+	const singleValue = {
+		top: 'var:preset|spacing|30',
+	};
+	it( 'should return true if only one side set', () => {
+		expect( isValuesMixed( singleValue ) ).toBe( true );
+	} );
+	const incompleteValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|30',
+		left: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all sides not set', () => {
+		expect( isValuesMixed( incompleteValues ) ).toBe( true );
+	} );
+} );
+
+describe( 'isValuesDefined', () => {
+	const undefinedValues = {
+		top: undefined,
+		bottom: undefined,
+		left: undefined,
+		right: undefined,
+	};
+	it( 'should return false if values are not defined', () => {
+		expect( isValuesDefined( undefinedValues ) ).toBe( false );
+	} );
+	const definedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesDefined( definedValues ) ).toBe( true );
+	} );
+} );