@wordpress/block-editor 15.9.1-next.738bb1424.0 → 15.10.0

package/src/components/link-control/style.scss

@@ -39,7 +39,7 @@ $block-editor-link-control-number-of-actions: 1;
 			}
 		}
 
-		.block-editor-link-control__preview {
+		.block-editor-link-control__search-item-top {
 			gap: $grid-unit-05;
 			flex-wrap: wrap;
 
@@ -47,11 +47,11 @@ $block-editor-link-control-number-of-actions: 1;
 				width: auto;
 				padding: $grid-unit-05;
 			}
+		}
 
-			.block-editor-link-control_link-information {
-				min-width: 100%;
-				margin-right: 0;
-			}
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
 		}
 	}
 }
@@ -163,15 +163,22 @@ $block-editor-link-control-number-of-actions: 1;
 	&[aria-selected] {
 		background: $gray-100;
 	}
-}
 
-.block-editor-link-control__preview {
-	background: transparent;
-	border: 0;
-	padding: $grid-unit-20;
+	&.is-current {
+		flex-direction: column; // allow for stacking.
+		background: transparent;
+		border: 0;
+		width: 100%;
+		cursor: default;
+		padding: $grid-unit-20;
+	}
 
-	.block-editor-link-control__link-information {
+	.block-editor-link-control__search-item-header {
+		display: block;
+		flex-direction: row;
+		align-items: center;
 		margin-right: $grid-unit-10;
+		gap: $grid-unit-10;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -179,7 +186,7 @@ $block-editor-link-control-number-of-actions: 1;
 		white-space: pre-wrap;
 		overflow-wrap: break-word;
 
-		.block-editor-link-control__preview-info {
+		.block-editor-link-control__search-item-info {
 			color: $gray-700;
 			line-height: 1.1;
 			font-size: $helptext-font-size;
@@ -187,33 +194,56 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 	}
 
-	&.is-url-title .block-editor-link-control__preview-title {
+	&.is-preview .block-editor-link-control__search-item-header {
+		display: flex;
+		flex: 1; // Fill available space.
+	}
+
+	&.is-error .block-editor-link-control__search-item-header {
+		align-items: center;
+	}
+
+	&.is-url-title .block-editor-link-control__search-item-title {
 		// To prevent overflow when the title is a URL
 		word-break: break-all;
 	}
 
-	.block-editor-link-control__preview-icon {
-		position: relative;
-		flex-shrink: 0;
+	.block-editor-link-control__search-item-details {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: $grid-unit-05;
+	}
+
+	.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
 		background-color: $gray-100;
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		border-radius: $radius-small;
+	}
+
+	.block-editor-link-control__search-item-icon {
+		position: relative;
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 
 		img {
 			width: $grid-unit-20; // favicons often have a source of 32px
 		}
 	}
 
-	&.is-error .block-editor-link-control__preview-icon {
+	&.is-error .block-editor-link-control__search-item-icon {
 		top: 0;
 		width: 32px;
 		max-height: 32px;
 	}
 
-	.block-editor-link-control__preview-title {
+	.block-editor-link-control__search-item-title {
 		line-height: 1.1;
 
+
 		&:focus {
 			box-shadow: none;
 		}
@@ -246,9 +276,16 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 }
 
-.block-editor-link-control__preview.is-fetching {
+.block-editor-link-control__search-item-top {
+	display: flex;
+	flex-direction: row;
+	width: 100%; // clip.
+	align-items: center;
+}
+
+.block-editor-link-control__search-item.is-fetching {
 
-	.block-editor-link-control__preview-icon {
+	.block-editor-link-control__search-item-icon {
 		svg,
 		img {
 			opacity: 0;
@@ -302,7 +339,7 @@ $block-editor-link-control-number-of-actions: 1;
 .block-editor-link-control__search-create {
 	align-items: center; // align text with icon.
 
-	.block-editor-link-control__preview-title {
+	.block-editor-link-control__search-item-title {
 		margin-bottom: 0;
 	}
 

package/src/components/link-control/test/index.js

@@ -2212,13 +2212,13 @@ describe( 'Rich link previews', () => {
 		// Todo: refactor to use user-facing queries.
 		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
-			'.block-editor-link-control__preview-image'
+			'.block-editor-link-control__search-item-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
 		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
-			'.block-editor-link-control__preview-description'
+			'.block-editor-link-control__search-item-description'
 		);
 
 		expect( hasRichImagePreview ).not.toBeInTheDocument();
@@ -2247,7 +2247,7 @@ describe( 'Rich link previews', () => {
 
 		// eslint-disable-next-line testing-library/no-node-access
 		expect( titlePreview.parentElement.parentElement ).toHaveClass(
-			'block-editor-link-control__preview-title'
+			'block-editor-link-control__search-item-title'
 		);
 	} );
 
@@ -2271,7 +2271,7 @@ describe( 'Rich link previews', () => {
 
 		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
-			`.block-editor-link-control__preview-icon`
+			`.block-editor-link-control__search-item-icon`
 		);
 
 		// eslint-disable-next-line testing-library/no-node-access
@@ -2310,7 +2310,7 @@ describe( 'Rich link previews', () => {
 
 			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
-				`.block-editor-link-control__preview-${ dataItem }`
+				`.block-editor-link-control__search-item-${ dataItem }`
 			);
 
 			expect( missingDataItem ).not.toBeInTheDocument();

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

@@ -27,7 +27,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { isShallowEqual } from '@wordpress/is-shallow-equal';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { speak } from '@wordpress/a11y';
 

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

@@ -42,7 +42,7 @@
 			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 		}
 
-		.block-editor-link-control__preview.is-current {
+		.block-editor-link-control__search-item.is-current {
 			width: auto;
 			padding: 0;
 		}

package/src/components/resolution-tool/index.js

@@ -46,6 +46,7 @@ export default function ResolutionTool( {
 			resetAllFilter={ resetAllFilter }
 		>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Resolution' ) }
 				value={ displayValue }
 				options={ options }

package/src/components/responsive-block-control/index.js

@@ -90,6 +90,7 @@ function ResponsiveBlockControl( props ) {
 
 			<div className="block-editor-responsive-block-control__inner">
 				<ToggleControl
+					__nextHasNoMarginBottom
 					className="block-editor-responsive-block-control__toggle"
 					label={ toggleControlLabel }
 					checked={ ! isResponsive }

package/src/components/responsive-block-control/test/index.js

@@ -43,6 +43,7 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 				__next40pxDefaultSize
 				label={ labelComponent }
 				options={ sizeOptions }
+				__nextHasNoMarginBottom
 			/>
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we

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

@@ -9,7 +9,6 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  */
 import {
 	useRef,
-	useState,
 	useCallback,
 	forwardRef,
 	createContext,
@@ -42,6 +41,7 @@ import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 export const keyboardShortcutContext = createContext();
 keyboardShortcutContext.displayName = 'keyboardShortcutContext';
@@ -124,11 +124,11 @@ export function RichTextWrapper(
 
 	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
-	const [ anchorElement, setAnchorElement ] = useState( null );
 	const context = useBlockEditContext();
-	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const { clientId, isSelected: isBlockSelected } = context;
 	const blockBindings = context[ blockBindingsKey ];
 	const blockContext = useContext( BlockContext );
+	const { bindableAttributes } = useContext( PrivateBlockContext );
 	const registry = useRegistry();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
@@ -173,17 +173,7 @@ export function RichTextWrapper(
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
-			if ( ! blockBindings?.[ identifier ] ) {
-				return {};
-			}
-
-			const { __experimentalBlockBindingsSupportedAttributes } =
-				select( blockEditorStore ).getSettings();
-
-			const bindableAttributes =
-				__experimentalBlockBindingsSupportedAttributes?.[ blockName ];
-
-			if ( ! bindableAttributes ) {
+			if ( ! blockBindings?.[ identifier ] || ! bindableAttributes ) {
 				return {};
 			}
 
@@ -256,7 +246,7 @@ export function RichTextWrapper(
 		[
 			blockBindings,
 			identifier,
-			blockName,
+			bindableAttributes,
 			adjustedValue,
 			clientId,
 			blockContext,
@@ -450,7 +440,7 @@ export function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					editableContentElement={ anchorElement }
+					editableContentElement={ anchorRef.current }
 				/>
 			) }
 			<TagName
@@ -501,7 +491,6 @@ export function RichTextWrapper(
 						inputEvents,
 					} ),
 					anchorRef,
-					setAnchorElement,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning

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

@@ -1,18 +1,36 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import {
+	Button,
+	Icon,
+	RangeControl,
+	__experimentalHStack as HStack,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	CustomSelectControl,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { sprintf, _x } from '@wordpress/i18n';
-import { __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import PresetInputControl from '../../preset-input-control';
 import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
-import { ALL_SIDES, LABELS } from '../utils';
+import {
+	RANGE_CONTROL_MAX_SIZE,
+	ALL_SIDES,
+	LABELS,
+	getSliderValueFromPreset,
+	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
+	isValueSpacingPreset,
+} from '../utils';
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },
@@ -57,36 +75,128 @@ export default function SpacingInputControl( {
 	spacingSizes,
 	type,
 	value,
-	...restProps
 } ) {
+	// 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 <= RANGE_CONTROL_MAX_SIZE;
+
 	const disableCustomSpacingSizes = useSelect( ( select ) => {
 		const editorSettings = select( blockEditorStore ).getSettings();
 		return editorSettings?.disableCustomSpacingSizes;
 	} );
 
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! disableCustomSpacingSizes &&
+			value !== undefined &&
+			! isValueSpacingPreset( value )
+	);
+
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
+
+	const previousValue = usePrevious( value );
+	if (
+		!! value &&
+		previousValue !== value &&
+		! isValueSpacingPreset( value ) &&
+		showCustomValueControl !== true
+	) {
+		setShowCustomValueControl( true );
+	}
+
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
-	// Convert spacing preset format to generic preset format for PresetInputControl
-	const presets = useMemo( () => {
-		return (
-			spacingSizes?.map( ( preset ) => ( {
-				name: preset.name,
-				slug: preset.slug,
-				size: preset.size,
-			} ) ) || []
-		);
-	}, [ spacingSizes ] );
-
-	// Generate aria label
+	let currentValue = null;
+
+	const showCustomValueInSelectList =
+		! showRangeControl &&
+		! showCustomValueControl &&
+		value !== undefined &&
+		( ! isValueSpacingPreset( value ) ||
+			( isValueSpacingPreset( value ) && isMixed ) );
+
+	if ( showCustomValueInSelectList ) {
+		selectListSizes = [
+			...spacingSizes,
+			{
+				name: ! isMixed
+					? // translators: %s: A custom measurement, e.g. 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 = parseFloat( 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 options = selectListSizes.map( ( size, index ) => ( {
+		key: index,
+		name: size.name,
+	} ) );
+
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
+
 	const sideLabel =
-		( ALL_SIDES.includes( side ) ||
-			[ 'vertical', 'horizontal' ].includes( side ) ) &&
-		showSideInLabel
-			? LABELS[ side ]
-			: '';
+		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
 	const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
 
 	const ariaLabel = sprintf(
@@ -96,28 +206,145 @@ export default function SpacingInputControl( {
 		typeLabel
 	).trim();
 
-	// Get the first unit as default selected unit
-	const selectedUnit = units[ 0 ]?.value || 'px';
-
 	return (
-		<PresetInputControl
-			allowNegativeOnDrag={ minimumCustomValue < 0 }
-			ariaLabel={ ariaLabel }
-			className="spacing-sizes-control"
-			customValueSettings={ CUSTOM_VALUE_SETTINGS }
-			disableCustomValues={ disableCustomSpacingSizes }
-			icon={ icon }
-			isMixed={ isMixed }
-			minimumCustomValue={ minimumCustomValue }
-			onChange={ onChange }
-			onMouseOut={ onMouseOut }
-			onMouseOver={ onMouseOver }
-			presets={ presets }
-			presetType="spacing"
-			selectedUnit={ selectedUnit }
-			units={ units }
-			value={ value }
-			{ ...restProps }
-		/>
+		<HStack className="spacing-sizes-control__wrapper">
+			{ icon && (
+				<Icon
+					className="spacing-sizes-control__icon"
+					icon={ icon }
+					size={ 24 }
+				/>
+			) }
+			{ showCustomValueControl && (
+				<>
+					<UnitControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
+						onChange={ ( newSize ) =>
+							onChange( getNewCustomValue( newSize ) )
+						}
+						value={ currentValue }
+						units={ units }
+						min={ minValue }
+						placeholder={ allPlaceholder }
+						disableUnits={ isMixed }
+						label={ ariaLabel }
+						hideLabelFromVision
+						className="spacing-sizes-control__custom-value-input"
+						size="__unstable-large"
+						onDragStart={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDrag={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDragEnd={ () => {
+							setMinValue( minimumCustomValue );
+						} }
+					/>
+					<RangeControl
+						__next40pxDefaultSize
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
+						value={ customRangeValue }
+						min={ 0 }
+						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
+						step={
+							CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ?? 0.1
+						}
+						withInputField={ false }
+						onChange={ handleCustomValueSliderChange }
+						className="spacing-sizes-control__custom-value-range"
+						__nextHasNoMarginBottom
+						label={ ariaLabel }
+						hideLabelFromVision
+					/>
+				</>
+			) }
+			{ showRangeControl && ! showCustomValueControl && (
+				<RangeControl
+					__next40pxDefaultSize
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
+					className="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
+					__nextHasNoMarginBottom
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
+				/>
+			) }
+			{ ! showRangeControl && ! showCustomValueControl && (
+				<CustomSelectControl
+					className="spacing-sizes-control__custom-select-control"
+					value={
+						// passing empty string as a fallback to continue using the
+						// component in controlled mode
+						options.find(
+							( option ) => option.key === currentValue
+						) || ''
+					}
+					onChange={ ( selection ) => {
+						onChange(
+							getNewPresetValue(
+								selection.selectedItem.key,
+								'selectList'
+							)
+						);
+					} }
+					options={ options }
+					label={ ariaLabel }
+					hideLabelFromVision
+					size="__unstable-large"
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
+				/>
+			) }
+			{ ! disableCustomSpacingSizes && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					size="small"
+					className="spacing-sizes-control__custom-toggle"
+					iconSize={ 24 }
+				/>
+			) }
+		</HStack>
 	);
 }