@wordpress/block-editor 15.23.0 → 16.0.0

package/src/components/media-placeholder/index.js

@@ -46,7 +46,6 @@ const InsertFromURLPopover = ( {
 			onSubmit={ onSubmit }
 		>
 			<InputControl
-				__next40pxDefaultSize
 				label={ __( 'URL' ) }
 				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision

package/src/components/multi-selection-inspector/style.scss

@@ -5,7 +5,7 @@
 }
 
 .block-editor-multi-selection-inspector__card-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {

package/src/components/observe-typing/index.js

@@ -129,6 +129,12 @@ export function useTypingObserver() {
 			if ( isTyping ) {
 				let timerId;
 
+				// Capture the window reference while the node is still
+				// attached. Reusing the reference we held at mount keeps the
+				// cleanup and the handlers working against the same window
+				// we set things up on.
+				const { defaultView } = node.ownerDocument;
+
 				/**
 				 * Stops typing when focus transitions to a non-text field element.
 				 *
@@ -141,7 +147,7 @@ export function useTypingObserver() {
 					// before the keydown event, wait until after current stack
 					// before evaluating whether typing is to be stopped. Otherwise,
 					// typing will re-start.
-					timerId = node.ownerDocument.defaultView.setTimeout( () => {
+					timerId = defaultView.setTimeout( () => {
 						if ( ! isTextField( target ) ) {
 							stopTyping();
 						}
@@ -168,8 +174,7 @@ export function useTypingObserver() {
 				 * uncollapsed (shift) selection.
 				 */
 				function stopTypingOnSelectionUncollapse() {
-					const selection =
-						node.ownerDocument.defaultView.getSelection();
+					const selection = defaultView.getSelection();
 					if ( ! selection.isCollapsed ) {
 						stopTyping();
 					}
@@ -184,7 +189,7 @@ export function useTypingObserver() {
 				);
 
 				return () => {
-					node.ownerDocument.defaultView.clearTimeout( timerId );
+					defaultView.clearTimeout( timerId );
 					node.removeEventListener(
 						'focus',
 						stopTypingOnNonTextField

package/src/components/preset-input-control/custom-value-controls.js

@@ -71,7 +71,6 @@ export default function CustomValueControls( {
 			onFocus={ onMouseOver }
 			onMouseOut={ onMouseOut }
 			onMouseOver={ onMouseOver }
-			size="__unstable-large"
 			units={ units }
 			value={ [ parsedQuantity, computedUnit ].join( '' ) }
 			placeholder={ allPlaceholder }
@@ -126,7 +125,6 @@ export default function CustomValueControls( {
 				step={ step }
 				value={ parsedQuantity }
 				withInputField={ false }
-				__next40pxDefaultSize
 			/>
 		</>
 	);

package/src/components/preset-input-control/index.js

@@ -267,7 +267,6 @@ export default function PresetInputControl( {
 					step={ 1 }
 					value={ currentValue }
 					withInputField={ false }
-					__next40pxDefaultSize
 				/>
 			) }
 			{ hasPresets && ! showRangeControl && ! showCustomValueControl && (
@@ -295,7 +294,6 @@ export default function PresetInputControl( {
 					onMouseOut={ onMouseOut }
 					onMouseOver={ onMouseOver }
 					options={ options }
-					size="__unstable-large"
 					value={
 						// passing empty string as a fallback to continue using the
 						// component in controlled mode

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

@@ -51,7 +51,6 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

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

@@ -32,7 +32,7 @@
 }
 
 .block-editor-responsive-block-control__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin-bottom: 0.6em;
 	margin-left: -3px; // visual compensation
 }

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

@@ -39,11 +39,7 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl
-				__next40pxDefaultSize
-				label={ labelComponent }
-				options={ sizeOptions }
-			/>
+			<SelectControl 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/before-input-rules.js

@@ -1,9 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { insert, isCollapsed } from '@wordpress/rich-text';
+import {
+	insert,
+	isCollapsed,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -11,7 +14,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -84,10 +87,10 @@ export default ( props ) => ( element ) => {
 		// call few lines above has fully updated the data store state and rerendered
 		// all affected components.
 		window.queueMicrotask( () => {
-			event.target.dispatchEvent( newEvent );
+			element.dispatchEvent( newEvent );
 		} );
 		event.preventDefault();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
+	return subscribeOwnedListener( element, 'beforeinput', onInput, true );
 };

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

@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-import { isCollapsed, isEmpty } from '@wordpress/rich-text';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+import {
+	isCollapsed,
+	isEmpty,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -54,5 +57,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

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

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { ENTER } from '@wordpress/keycodes';
-import { insert, remove } from '@wordpress/rich-text';
+import {
+	insert,
+	remove,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
@@ -10,6 +14,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
  */
 import { unlock } from '../../../lock-unlock';
 
+const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
@@ -31,8 +36,9 @@ export default ( props ) => ( element ) => {
 		}
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element, or whether the element owns the
+		// selection through a focused editing host.
+		if ( event.target !== element && ! ownsSelection( element ) ) {
 			return;
 		}
 
@@ -90,7 +96,7 @@ export default ( props ) => ( element ) => {
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
 		element,
 		'keydown',
 		onKeyDownDeprecated,

package/src/components/rich-text/event-listeners/input-events.js

@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
@@ -18,5 +19,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'input', onInput );
+	return subscribeOwnedListener( element, 'input', onInput );
 };

package/src/components/rich-text/event-listeners/input-rules.js

@@ -1,9 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import {
+	insert,
+	toHTMLString,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,7 +19,7 @@ import {
 } from '../../../utils/selection';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -160,13 +163,13 @@ export default ( props ) => ( element ) => {
 
 	// Capture phase so these run before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listeners.
-	const unsubscribeInput = subscribeDelegatedListener(
+	const unsubscribeInput = subscribeOwnedListener(
 		element,
 		'input',
 		onInput,
 		true
 	);
-	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+	const unsubscribeCompositionEnd = subscribeOwnedListener(
 		element,
 		'compositionend',
 		onInput,

package/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -9,7 +10,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When the browser is about to auto correct, add an undo level so the user can
@@ -29,5 +30,5 @@ export default ( props ) => ( element ) => {
 			.__unstableMarkLastChangeAsPersistent();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput );
+	return subscribeOwnedListener( element, 'beforeinput', onInput );
 };

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { pasteHandler } from '@wordpress/blocks';
-import { isEmpty, insert, create } from '@wordpress/rich-text';
+import {
+	isEmpty,
+	insert,
+	create,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
 
@@ -15,6 +20,7 @@ import { getPasteEventData } from '../../../utils/pasting';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { ownsSelection } = unlock( richTextPrivateApis );
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -34,8 +40,14 @@ export default ( props ) => ( element ) => {
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element or inside the element.
-		if ( ! element.contains( event.target ) ) {
+		// the target is the element or inside the element. When the editable
+		// wrapper holds focus (the selected block supports `editableRoot`),
+		// the event targets the wrapper instead; the element then owns the
+		// paste when it contains the selection.
+		if (
+			! element.contains( event.target ) &&
+			! ownsSelection( element )
+		) {
 			return;
 		}
 

package/src/components/rich-text/event-listeners/remove-browser-shortcuts.js

@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import { isKeyboardEvent } from '@wordpress/keycodes';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * Hook to prevent default behaviors for key combinations otherwise handled
@@ -25,5 +26,5 @@ export default () => ( node ) => {
 			event.preventDefault();
 		}
 	}
-	return subscribeDelegatedListener( node, 'keydown', onKeydown, true );
+	return subscribeOwnedListener( node, 'keydown', onKeydown, true );
 };

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

@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { keyboardShortcuts } = props.current;
@@ -18,5 +19,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown, true );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 };

package/src/components/rich-text/event-listeners/undo-automatic-change.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -10,7 +11,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -42,5 +43,5 @@ export default ( props ) => ( element ) => {
 		__experimentalUndo();
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

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

@@ -11,9 +11,9 @@ import {
 	useRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	forwardRef,
-	createContext,
 	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
@@ -39,15 +39,20 @@ import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
+import { useHasEditableRoot } from '../writing-flow/use-editable-root';
 import { unlock } from '../../lock-unlock';
 
-const { useRichText } = unlock( richTextPrivateApis );
-
-export const keyboardShortcutContext = createContext();
-keyboardShortcutContext.displayName = 'keyboardShortcutContext';
-
-export const inputEventContext = createContext();
-inputEventContext.displayName = 'inputEventContext';
+// `RichTextShortcut` and `RichTextInputEvent` now live in
+// `@wordpress/rich-text` so they share the shortcut and input-event contexts
+// with standalone rich text fields. Re-exported below for back-compat (e.g.
+// `@wordpress/format-library` imports them from `@wordpress/block-editor`).
+const {
+	useRichText,
+	KeyboardShortcutContext,
+	InputEventContext,
+	RichTextShortcut,
+	RichTextInputEvent,
+} = unlock( richTextPrivateApis );
 
 const instanceIdKey = Symbol( 'instanceId' );
 
@@ -238,6 +243,13 @@ export function RichTextWrapper(
 	const shouldDisableEditing =
 		readOnly || disableBoundBlock || shouldDisableForPattern;
 
+	const hasEditableRoot = useHasEditableRoot();
+	const hasDefaultEditingMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockEditingMode( clientId ) ===
+			'default',
+		[ clientId ]
+	);
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -341,6 +353,55 @@ export function RichTextWrapper(
 		onChange,
 	} );
 
+	// While a focused editing host owns the selection (the block supports
+	// `editableRoot`), ARIA attributes describing the autocomplete state must
+	// be mirrored onto the host: assistive technology resolves them relative
+	// to the focused element.
+	const {
+		'aria-autocomplete': ariaAutocomplete,
+		'aria-owns': ariaOwns,
+		'aria-activedescendant': ariaActiveDescendant,
+	} = autocompleteProps;
+	useEffect( () => {
+		if ( ! hasEditableRoot || ! isSelected ) {
+			return;
+		}
+
+		const host = anchorRef.current?.parentElement?.closest(
+			'[contenteditable="true"]'
+		);
+
+		if ( ! host ) {
+			return;
+		}
+
+		const attributes = {
+			'aria-autocomplete': ariaAutocomplete,
+			'aria-owns': ariaOwns,
+			'aria-activedescendant': ariaActiveDescendant,
+		};
+
+		for ( const [ key, value_ ] of Object.entries( attributes ) ) {
+			if ( value_ === undefined ) {
+				host.removeAttribute( key );
+			} else {
+				host.setAttribute( key, value_ );
+			}
+		}
+
+		return () => {
+			for ( const key of Object.keys( attributes ) ) {
+				host.removeAttribute( key );
+			}
+		};
+	}, [
+		hasEditableRoot,
+		isSelected,
+		ariaAutocomplete,
+		ariaOwns,
+		ariaActiveDescendant,
+	] );
+
 	useMarkPersistent( { html: adjustedValue, value } );
 
 	const keyboardShortcuts = useRef( new Set() );
@@ -350,12 +411,30 @@ export function RichTextWrapper(
 		anchorRef.current?.focus();
 	}
 
+	// Setting tabIndex to 0 is unnecessary, the element is already focusable
+	// because it's contentEditable. This also fixes a Safari bug where it's
+	// not possible to Shift+Click multi select blocks when Shift Clicking
+	// into an element with tabIndex because Safari will focus the element.
+	// However, Safari will correctly ignore nested contentEditable elements.
+	// While the writing flow wrapper is contentEditable (the selected block
+	// supports `editableRoot`), nested editable elements are no longer
+	// focusable areas on their own, so an explicit tabIndex restores their
+	// focusability.
+	let tabIndex = props.tabIndex;
+	if ( ! shouldDisableEditing ) {
+		if ( hasEditableRoot && hasDefaultEditingMode && isBlockSelected ) {
+			tabIndex = props.tabIndex ?? 0;
+		} else if ( hasEditableRoot && props.tabIndex === 0 ) {
+			tabIndex = null;
+		}
+	}
+
 	const TagName = tagName;
 	return (
 		<>
 			{ isSelected && (
-				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
-					<inputEventContext.Provider value={ inputEvents }>
+				<KeyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<InputEventContext.Provider value={ inputEvents }>
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
@@ -368,8 +447,8 @@ export function RichTextWrapper(
 								forwardedRef={ anchorRef }
 							/>
 						</Popover.__unstableSlotNameProvider>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
@@ -433,17 +512,7 @@ export function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
-				// Setting tabIndex to 0 is unnecessary, the element is already
-				// focusable because it's contentEditable. This also fixes a
-				// Safari bug where it's not possible to Shift+Click multi
-				// select blocks when Shift Clicking into an element with
-				// tabIndex because Safari will focus the element. However,
-				// Safari will correctly ignore nested contentEditable elements.
-				tabIndex={
-					props.tabIndex === 0 && ! shouldDisableEditing
-						? null
-						: props.tabIndex
-				}
+				tabIndex={ tabIndex }
 				data-wp-block-attribute-key={ identifier }
 			/>
 		</>
@@ -521,6 +590,6 @@ PublicForwardedRichTextContainer.isEmpty = ( value ) => {
 };
 
 export default PublicForwardedRichTextContainer;
-export { RichTextShortcut } from './shortcut';
+export { RichTextShortcut };
 export { RichTextToolbarButton } from './toolbar-button';
-export { RichTextInputEvent as __unstableRichTextInputEvent } from './input-event';
+export { RichTextInputEvent as __unstableRichTextInputEvent };

package/src/components/skip-to-selected-block/style.scss

@@ -6,7 +6,7 @@
 
 	&:focus {
 		font-size: 14px;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		background: #f1f1f1;
 		z-index: z-index(".skip-to-selected-block");
 	}

package/src/components/text-alignment-control/index.js

@@ -76,7 +76,6 @@ export default function TextAlignmentControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
 			className={ clsx(
 				'block-editor-text-alignment-control',

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,6 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
 			className={ clsx(
 				'block-editor-text-decoration-control',