@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/src/components/list-view/block-select-button.js

@@ -90,8 +90,13 @@ function ListViewBlockSelectButton(
 						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
 					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor">
-							{ blockInformation.anchor }
+						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+							<Truncate
+								className="block-editor-list-view-block-select-button__anchor"
+								ellipsizeMode="auto"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
 						</span>
 					) }
 					{ isLocked && (

package/src/components/list-view/style.scss

@@ -312,14 +312,21 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__anchor-wrapper {
+		position: relative;
+		max-width: min(110px, 40%);
+		width: 100%;
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
+		position: absolute;
+		right: 0;
+		transform: translateY(-50%);
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
-		display: inline-block;
 		padding: 2px 6px;
-		max-width: min(100px, 40%);
-		overflow: hidden;
-		text-overflow: ellipsis;
+		max-width: 100%;
+		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {

package/src/components/list-view/use-block-selection.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -126,9 +121,8 @@ export default function useBlockSelection() {
 				return;
 			}
 
-			const selectionDiff = difference(
-				selectedBlocks,
-				updatedSelectedBlocks
+			const selectionDiff = selectedBlocks.filter(
+				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
 			);
 
 			let label;

package/src/components/media-replace-flow/style.scss

@@ -27,6 +27,7 @@
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
+			margin: 0; // Reset default LinkControl margins.
 		}
 
 		.components-base-control .components-base-control__field {

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

@@ -115,6 +115,15 @@ function RichTextWrapper(
 	},
 	forwardedRef
 ) {
+	if ( multiline ) {
+		deprecated( 'wp.blockEditor.RichText multiline prop', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'nested blocks (InnerBlocks)',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
+		} );
+	}
+
 	const instanceId = useInstanceId( RichTextWrapper );
 
 	identifier = identifier || instanceId;

package/src/components/rich-text/use-enter.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 /**
  * WordPress dependencies
  */

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapKeys } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -35,7 +30,12 @@ const interactiveContentTags = new Set( [
 
 function prefixSelectKeys( selected, prefix ) {
 	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
-	return mapKeys( selected, ( value, key ) => `${ prefix }.${ key }` );
+	return Object.fromEntries(
+		Object.entries( selected ).map( ( [ key, value ] ) => [
+			`${ prefix }.${ key }`,
+			value,
+		] )
+	);
 }
 
 function getPrefixedSelectKeys( selected, prefix ) {

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,285 @@
+/**
+ * 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,
+	getPresetValueFromCustomValue,
+	isValueSpacingPreset,
+} from './utils';
+
+export default function SpacingInputControl( {
+	spacingSizes,
+	value,
+	side,
+	onChange,
+	isMixed = false,
+	type,
+	minimumCustomValue,
+} ) {
+	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
+	value = getPresetValueFromCustomValue( value, spacingSizes );
+
+	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"
+						style={ { gridColumn: '1' } }
+					/>
+
+					<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 }
+				/>
+			) }
+		</>
+	);
+}