@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/src/components/preset-input-control/test/index.jsdom.test.jsx

@@ -5,7 +5,6 @@ import PresetInputControl from '../index';
 
 globalThis.wpVitest.mockMatchMedia();
 
-globalThis.wpVitest.mockVisibleElements();
 globalThis.wpVitest.mockScrollIntoView();
 
 describe( 'PresetInputControl', () => {
@@ -91,34 +90,6 @@ describe( 'PresetInputControl', () => {
 		expect( mockOnChange ).toHaveBeenCalledWith( '25px' );
 	} );
 
-	it( 'clears value with undefined when input is fully erased via backspace', () => {
-		render(
-			<PresetInputControl
-				{ ...defaultProps }
-				presets={ presets }
-				value="60px"
-				disableCustomValues={ false }
-			/>
-		);
-
-		const input = screen.getByRole( 'spinbutton' );
-
-		// Simulate the bug scenario: backspace through "60" one character
-		// at a time. fireEvent.change is used here (rather than userEvent
-		// keyboard interactions) because the controlled UnitControl input
-		// does not respond to synthesised key events in jsdom. The
-		// intermediate "6" forwarding is expected and correct; the bug
-		// was that the final clear silently failed to propagate, leaving
-		// the parent stuck on the partial value.
-		fireEvent.change( input, { target: { value: '6' } } );
-		fireEvent.change( input, { target: { value: '' } } );
-
-		// The final clear must propagate as undefined, not be swallowed,
-		// and never be persisted as an empty string.
-		expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
-		expect( mockOnChange ).not.toHaveBeenCalledWith( '' );
-	} );
-
 	it( 'clears value with undefined when input is cleared in one shot', async () => {
 		const user = userEvent.setup();
 
@@ -182,33 +153,6 @@ describe( 'PresetInputControl', () => {
 		} );
 	} );
 
-	it( 'can interact with select dropdown options', async () => {
-		const user = userEvent.setup();
-		const manyPresets = Array.from( { length: 12 }, ( _, i ) => ( {
-			name: `Preset ${ i + 1 }`,
-			slug: `preset-${ i + 1 }`,
-			size: `${ ( i + 1 ) * 5 }px`,
-		} ) );
-
-		render(
-			<PresetInputControl { ...defaultProps } presets={ manyPresets } />
-		);
-
-		// Wait for dropdown to render
-		await waitFor( () => {
-			expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
-		} );
-
-		// Click on the dropdown to open it
-		const combobox = screen.getByRole( 'combobox' );
-		await user.click( combobox );
-
-		// Should be able to interact with the dropdown
-		await waitFor( () => {
-			expect( combobox ).toHaveAttribute( 'aria-expanded', 'true' );
-		} );
-	} );
-
 	it( 'supports mixed value states', () => {
 		render(
 			<PresetInputControl

package/src/components/preset-input-control/test/interaction.browser.test.js

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { screen } from '@testing-library/react';
+import { createElement } from '@wordpress/element';
+import PresetInputControl from '../index';
+
+const defaultProps = {
+	ariaLabel: 'Spacing control',
+	onChange: vi.fn(),
+	presetType: 'spacing',
+};
+
+beforeEach( () => {
+	vi.clearAllMocks();
+} );
+
+describe( 'PresetInputControl browser interactions', () => {
+	it( 'clears value with undefined when input is fully erased via backspace', async () => {
+		const user = userEvent.setup();
+		await render(
+			createElement( PresetInputControl, {
+				...defaultProps,
+				presets: [
+					{ name: 'None', slug: '0', size: '0' },
+					{ name: 'Small', slug: 'small', size: '10px' },
+				],
+				value: '60px',
+				disableCustomValues: false,
+			} )
+		);
+
+		const input = screen.getByRole( 'spinbutton' );
+
+		await user.click( input );
+		await user.keyboard( '{End}{Backspace}{Backspace}' );
+
+		expect( defaultProps.onChange ).toHaveBeenLastCalledWith( undefined );
+		expect( defaultProps.onChange ).not.toHaveBeenCalledWith( '' );
+	} );
+
+	it( 'can interact with select dropdown options', async () => {
+		const user = userEvent.setup();
+		const manyPresets = Array.from( { length: 12 }, ( _, index ) => ( {
+			name: `Preset ${ index + 1 }`,
+			slug: `preset-${ index + 1 }`,
+			size: `${ ( index + 1 ) * 5 }px`,
+		} ) );
+
+		await render(
+			createElement( PresetInputControl, {
+				...defaultProps,
+				presets: manyPresets,
+			} )
+		);
+
+		await user.click( screen.getByRole( 'combobox' ) );
+
+		await expect
+			.element( page.getByRole( 'combobox', { expanded: true } ) )
+			.toBeVisible();
+	} );
+} );

package/src/components/provider/index.jsx

@@ -197,7 +197,9 @@ function mediaUpload(
 		},
 		onBatchSuccess,
 		onError: ( error ) =>
-			onError( typeof error === 'string' ? error : error?.message ?? '' ),
+			onError(
+				typeof error === 'string' ? error : ( error?.message ?? '' )
+			),
 		additionalData,
 		allowedTypes,
 	} );
@@ -259,7 +261,7 @@ function heicMediaUpload(
 				if ( pathsRemaining <= 0 ) {
 					onBatchSuccess?.();
 				}
-		  }
+			}
 		: onBatchSuccess;
 
 	// Route HEIC files through the upload-media pipeline.
@@ -274,7 +276,7 @@ function heicMediaUpload(
 			onBatchSuccess: coordinatedBatchSuccess,
 			onError: ( error ) =>
 				onError(
-					typeof error === 'string' ? error : error?.message ?? ''
+					typeof error === 'string' ? error : ( error?.message ?? '' )
 				),
 			additionalData,
 			allowedTypes,

package/src/components/provider/use-block-sync.js

@@ -441,7 +441,7 @@ export default function useBlockSync( {
 							? restoreSelectionIds(
 									selectionInfo,
 									idMappingRef.current
-							  )
+								)
 							: selectionInfo;
 
 						pendingChangesRef.current.outgoing.push(
@@ -476,12 +476,12 @@ export default function useBlockSync( {
 						const isOurs = clientId
 							? idMappingRef.current.internalToExternal.has(
 									newSelectionStart.clientId
-							  )
+								)
 							: ! getBlockParents(
 									newSelectionStart.clientId
-							  ).some( ( parentId ) =>
+								).some( ( parentId ) =>
 									areInnerBlocksControlled( parentId )
-							  );
+								);
 
 						if ( isOurs ) {
 							const selectionInfo = {
@@ -495,7 +495,7 @@ export default function useBlockSync( {
 									? restoreSelectionIds(
 											selectionInfo,
 											idMappingRef.current
-									  )
+										)
 									: selectionInfo
 							);
 						}

package/src/components/publish-date-time-picker/index.jsx

@@ -37,7 +37,7 @@ export function PublishDateTimePicker(
 										label: __( 'Reset' ),
 										onClick: () => onChange?.( null ),
 									},
-							  ]
+								]
 							: undefined
 					}
 					onClose={ onClose }

package/src/components/resizable-box-popover/index.jsx

@@ -9,7 +9,7 @@ export default function ResizableBoxPopover( {
 	return (
 		<BlockPopoverCover
 			clientId={ clientId }
-			__unstablePopoverSlot="block-toolbar"
+			__unstablePopoverSlot="__unstable-block-tools-after"
 			{ ...props }
 		>
 			<ResizableBox { ...resizableBoxProps } />

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

@@ -1,5 +1,5 @@
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
@@ -42,7 +42,7 @@ export default function ResolutionTool( {
 			panelId={ panelId }
 			resetAllFilter={ resetAllFilter }
 		>
-			<SelectControl
+			<WCSelectControl
 				label={ __( 'Resolution' ) }
 				value={ displayValue }
 				options={ options }

package/src/components/responsive-block-control/style.scss

@@ -10,8 +10,7 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	// stylelint-disable-next-line property-no-deprecated -- Pending review of overflow-wrap alternative.
-	word-wrap: normal !important;
+	overflow-wrap: normal !important;
 	word-break: normal !important;
 }
 

package/src/components/responsive-block-control/test/index.jsdom.test.jsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Fragment, useState } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 import ResponsiveBlockControl from '../index';
 
 globalThis.wpVitest.mockMatchMedia();
@@ -31,7 +31,7 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl label={ labelComponent } options={ sizeOptions } />
+			<WCSelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.

package/src/components/rich-text/event-listeners/enter.js

@@ -1,4 +1,3 @@
-import { ENTER } from '@wordpress/keycodes';
 import {
 	insert,
 	remove,
@@ -11,8 +10,15 @@ const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
-	function onKeyDown( event ) {
-		if ( event.keyCode !== ENTER ) {
+	// Enter is handled on beforeinput: the input type tells a paragraph
+	// break from a line break. The iOS keyboard sends Return with the
+	// shift key down while it shows capitals, so the key event cannot.
+	function onBeforeInput( event ) {
+		const { inputType } = event;
+		if (
+			inputType !== 'insertParagraph' &&
+			inputType !== 'insertLineBreak'
+		) {
 			return;
 		}
 
@@ -33,7 +39,12 @@ export default ( props ) => ( element ) => {
 		const value = getValue();
 		const { text, start, end } = value;
 
-		if ( event.shiftKey ) {
+		// Flagged for the writing flow, which handles the event otherwise.
+		if ( inputType === 'insertParagraph' && onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+
+		if ( inputType === 'insertLineBreak' ) {
 			if ( ! disableLineBreaks ) {
 				event.preventDefault();
 				onChange( insert( value, '\n' ) );
@@ -43,7 +54,6 @@ export default ( props ) => ( element ) => {
 			onSplitAtEnd();
 		} else if (
 			! supportsSplitting &&
-			// The deprecated onSplit is flagged on the beforeinput event.
 			! ( onReplace && onSplit ) &&
 			! disableLineBreaks &&
 			! event.defaultPrevented
@@ -70,16 +80,6 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	function onBeforeInput( event ) {
-		if ( event.inputType !== 'insertParagraph' ) {
-			return;
-		}
-		const { onReplace, onSplit } = props.current;
-		if ( onReplace && onSplit ) {
-			event.__deprecatedOnSplit = true;
-		}
-	}
-
 	function onDefaultBeforeInput( event ) {
 		if (
 			event.defaultPrevented ||
@@ -109,13 +109,7 @@ export default ( props ) => ( element ) => {
 		onDefaultBeforeInput
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
-	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDown = subscribeOwnedListener(
-		element,
-		'keydown',
-		onKeyDown,
-		true
-	);
+	// handlers.
 	const unsubscribeBeforeInput = subscribeOwnedListener(
 		element,
 		'beforeinput',
@@ -124,7 +118,6 @@ export default ( props ) => ( element ) => {
 	);
 	return () => {
 		unsubscribeDefaultBeforeInput();
-		unsubscribeKeyDown();
 		unsubscribeBeforeInput();
 	};
 };

package/src/components/rich-text/format-edit.jsx

@@ -29,7 +29,7 @@ function Edit( {
 					Object.entries( blockContext ).filter( ( [ key ] ) =>
 						usesContext.includes( key )
 					)
-			  )
+				)
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ usesContext, blockContext ] );
 

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

@@ -5,6 +5,7 @@ import {
 	useState,
 	useCallback,
 	useEffect,
+	useLayoutEffect,
 	useMemo,
 	forwardRef,
 	useContext,
@@ -203,14 +204,14 @@ function RichTextWrapper(
 						/* translators: %s: connected field label or source label */
 						__( 'Add %s' ),
 						bindingKey
-				  );
+					);
 			const _bindingsLabel = _disableBoundBlock
 				? relatedBinding?.args?.key || blockBindingsSource?.label
 				: sprintf(
 						/* translators: %s: source label or key */
 						__( 'Empty %s; start writing to edit its value' ),
 						relatedBinding?.args?.key || blockBindingsSource?.label
-				  );
+					);
 
 			return {
 				disableBoundBlock: _disableBoundBlock,
@@ -355,6 +356,42 @@ function RichTextWrapper(
 			[ identifier, clientId ]
 		),
 	} );
+	// Focus follows the selection while focus is inside the canvas or was
+	// lost to the body. Focus placed elsewhere stays. Runs after
+	// `useRichText` applied the content, so the field is current when its
+	// focus handler applies the selection.
+	useLayoutEffect( () => {
+		const element = anchorRef.current;
+
+		// A pointer press outside the field makes it non editable until the
+		// release (see rich text's preventFocusCapture). Focusing it then
+		// makes the block focus handler drop the text selection.
+		if ( ! isSelected || element?.contentEditable !== 'true' ) {
+			return;
+		}
+
+		const { ownerDocument } = element;
+		// Focus lost to the body of the parent document (a removed toolbar
+		// button) leaves the frame document without focus.
+		const focusedDocument = [
+			ownerDocument,
+			ownerDocument.defaultView.frameElement?.ownerDocument,
+		].find( ( doc ) => doc?.hasFocus() );
+
+		if ( ! focusedDocument ) {
+			return;
+		}
+
+		const { activeElement, body } = focusedDocument;
+		const canvas = element.parentElement?.closest( '[contenteditable]' );
+		// A field inside an editing host cannot hold focus.
+		const target = canvas?.isContentEditable ? canvas : element;
+
+		if ( activeElement === body || canvas?.contains( activeElement ) ) {
+			target.focus();
+		}
+	}, [ selectionStart, selectionEnd, isSelected ] );
+
 	const autocompleteProps = useBlockEditorAutocompleteProps( {
 		onReplace,
 		completers: autocompleters,

package/src/components/rich-text/multiline.jsx

@@ -1,6 +1,6 @@
 import { forwardRef, useInsertionEffect, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	create,
@@ -18,6 +18,7 @@ import { unlock } from '../../lock-unlock';
 const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 function useEnterRef( props ) {
+	const registry = useRegistry();
 	const { getSelectionStart, getSelectionEnd } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -49,8 +50,15 @@ function useEnterRef( props ) {
 
 			const newValues = values.slice();
 			newValues.splice( index, 1, ...array );
-			onChange( newValues );
-			selectionChange( clientId, `${ identifier }-${ index + 1 }`, 0, 0 );
+			registry.batch( () => {
+				onChange( newValues );
+				selectionChange(
+					clientId,
+					`${ identifier }-${ index + 1 }`,
+					0,
+					0
+				);
+			} );
 		}
 		// Capture phase so this runs before the generic rich text enter
 		// listener, which skips events that already had their default

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -50,7 +50,7 @@ export default function useSpacingSizes() {
 						size: undefined,
 					},
 					...sizes,
-			  ]
+				]
 			: sizes;
 	}, [ customSizes, themeSizes, defaultSizes ] );
 }

package/src/components/spacing-sizes-control/test/index.jsdom.test.jsx

@@ -29,7 +29,6 @@ import useSpacingSizes from '../hooks/use-spacing-sizes';
 
 globalThis.wpVitest.mockMatchMedia();
 
-globalThis.wpVitest.mockVisibleElements();
 globalThis.wpVitest.mockScrollIntoView();
 
 // Mock useSelect
@@ -761,26 +760,6 @@ describe( 'SpacingSizesControl', () => {
 				expect( screen.getAllByRole( 'combobox' ) ).toHaveLength( 2 ); // Vertical and Horizontal
 			} );
 		} );
-
-		it( 'can interact with select dropdown options', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// With large preset sets, should use select dropdowns instead of sliders
-			await waitFor( () => {
-				expect( screen.getAllByRole( 'combobox' ) ).toHaveLength( 2 );
-			} );
-
-			// Click on the first combobox to open dropdown
-			const comboboxes = screen.getAllByRole( 'combobox' );
-			await user.click( comboboxes[ 0 ] );
-
-			// Should be able to interact with the dropdown
-			expect( comboboxes[ 0 ] ).toHaveAttribute( 'aria-expanded' );
-		} );
 	} );
 
 	describe( 'Edge Cases and Error Handling', () => {

package/src/components/spacing-sizes-control/test/select.browser.test.js

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { screen } from '@testing-library/react';
+import { useSelect } from '@wordpress/data';
+import { createElement } from '@wordpress/element';
+import SpacingSizesControl from '../index';
+
+vi.mock( import( '@wordpress/data' ), { spy: true } );
+
+vi.mocked( useSelect ).mockReturnValue( false );
+
+vi.mock( import( '../hooks/use-spacing-sizes' ), () => ( {
+	__esModule: true,
+	default: vi.fn( () =>
+		Array.from( { length: 15 }, ( _, index ) => ( {
+			name: `Size ${ index }`,
+			slug: `${ index * 10 }`,
+			size: `${ index * 0.5 }rem`,
+		} ) )
+	),
+} ) );
+
+vi.mock( import( '../../use-settings' ), () => ( {
+	useSettings: vi.fn( ( ...keys ) => {
+		const defaults = {
+			'spacing.units': [ 'px', 'em', 'rem' ],
+			'spacing.spacingSizes.custom': [],
+			'spacing.spacingSizes.theme': [],
+			'spacing.spacingSizes.default': [],
+			'spacing.defaultSpacingSizes': true,
+		};
+		return keys.map( ( key ) => defaults[ key ] );
+	} ),
+} ) );
+
+describe( 'SpacingSizesControl large preset sets', () => {
+	it( 'can interact with select dropdown options', async () => {
+		const user = userEvent.setup();
+
+		await render(
+			createElement( SpacingSizesControl, {
+				label: 'Padding',
+				onChange: vi.fn(),
+			} )
+		);
+
+		const comboboxes = screen.getAllByRole( 'combobox' );
+		expect( comboboxes ).toHaveLength( 2 );
+		expect( comboboxes[ 0 ] ).toBeVisible();
+
+		await user.click( comboboxes[ 0 ] );
+
+		await expect
+			.element( page.getByRole( 'combobox', { expanded: true } ) )
+			.toBeVisible();
+	} );
+} );

package/src/components/typewriter/index.jsx

@@ -98,7 +98,7 @@ export function useTypewriter() {
 			const relativeScrollPosition = windowScroll
 				? caretRect.top / defaultView.innerHeight
 				: ( caretRect.top - scrollContainerY ) /
-				  ( defaultView.innerHeight - scrollContainerY );
+					( defaultView.innerHeight - scrollContainerY );
 
 			// If the scroll position is at the start, the active editable element
 			// is the last one, and the caret is positioned within the initial

package/src/components/url-input/test/fixtures/validated-input-control-deprecation.js

@@ -16,7 +16,7 @@ export const VALIDATED_INPUT_CONTROL_DEPRECATION =
  * private `ValidatedInputControl`. No-op when validation did not run.
  */
 export function expectValidatedInputControlDeprecationIfCalled() {
-	// eslint-disable-next-line no-console -- jest-console mock inspection.
+	// eslint-disable-next-line no-console -- Inspect expected console warnings.
 	const deprecationCalls = console.warn.mock.calls.filter(
 		( [ message ] ) => message === VALIDATED_INPUT_CONTROL_DEPRECATION
 	);

package/src/components/use-block-commands/index.js

@@ -120,7 +120,7 @@ const getTransformCommands = () =>
 					! icon?.src || icon?.src === 'block-default'
 						? {
 								src: blockDefaultIcon,
-						  }
+							}
 						: icon;
 
 				return {

package/src/components/use-block-drop-zone/test/index.js

@@ -35,13 +35,13 @@ const mapElements =
 							right,
 							bottom,
 							left,
-					  }
+						}
 					: {
 							top: left,
 							bottom: right,
 							left: top,
 							right: bottom,
-					  };
+						};
 			},
 		};
 	};

package/src/components/writing-flow/index.jsx

@@ -50,6 +50,14 @@ export function useWritingFlow() {
 				( node ) => {
 					node.tabIndex = 0;
 					node.dataset.hasMultiSelection = hasMultiSelection;
+					// The wrapper is the canvas root: an editing host while
+					// a selection spans blocks or the selected block
+					// supports `editableRoot`, explicitly not one otherwise,
+					// so it can always be found as the outermost editable
+					// ancestor of a field.
+					if ( ! node.hasAttribute( 'contenteditable' ) ) {
+						node.contentEditable = false;
+					}
 
 					if ( ! hasMultiSelection ) {
 						return () => {

package/src/components/writing-flow/use-clipboard-handler.js

@@ -105,7 +105,7 @@ export default function useClipboardHandler() {
 					event.type === 'copy' || event.type === 'cut'
 						? documentHasUncollapsedSelection( ownerDocument )
 						: documentHasSelection( ownerDocument ) &&
-						  ! ownerDocument.activeElement.isContentEditable;
+							! ownerDocument.activeElement.isContentEditable;
 
 				// Let native copy behaviour take over in input fields.
 				if ( hasSelection && ! isWholeSingleBlockCopy ) {

package/src/components/writing-flow/use-selection-observer.js

@@ -206,12 +206,21 @@ export default function useSelectionObserver() {
 						! isMultiSelecting()
 					) {
 						setContentEditableWrapper( node, false );
-						let element =
-							startNode.nodeType === startNode.ELEMENT_NODE
-								? startNode
-								: startNode.parentElement;
-						element = element?.closest( '[contenteditable]' );
-						element?.focus();
+						// Only return focus to the field if the wrapper had
+						// it. If Escape moved focus to the canvas stop in the
+						// parent document, the wrapper is only the stale
+						// active element and focus must not come back.
+						if (
+							ownerDocument.activeElement === node &&
+							ownerDocument.hasFocus()
+						) {
+							let element =
+								startNode.nodeType === startNode.ELEMENT_NODE
+									? startNode
+									: startNode.parentElement;
+							element = element?.closest( '[contenteditable]' );
+							element?.focus();
+						}
 					}
 					return;
 				}