@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

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';
@@ -29,7 +29,11 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
-import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
+import {
+	blockBindingsKey,
+	blockEditingModeKey,
+	isPreviewModeKey,
+} from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useMarkPersistent } from './use-mark-persistent';
@@ -41,13 +45,17 @@ import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
 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' );
 
@@ -96,6 +104,7 @@ export function RichTextWrapper(
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
+	const hasDefaultEditingMode = context[ blockEditingModeKey ] === 'default';
 	const blockContext = useContext( BlockContext );
 	const registry = useRegistry();
 	const selector = ( select ) => {
@@ -238,6 +247,27 @@ export function RichTextWrapper(
 	const shouldDisableEditing =
 		readOnly || disableBoundBlock || shouldDisableForPattern;
 
+	// Whether the wrapper is the editing host, which depends on the selected
+	// block, not necessarily this one. Only the selected, default-mode block
+	// can be it, so others skip the subscription entirely.
+	const isEditingHost = useSelect(
+		( select ) => {
+			if (
+				shouldDisableEditing ||
+				! hasDefaultEditingMode ||
+				! isBlockSelected
+			) {
+				return false;
+			}
+
+			const { getSelectedBlockClientId, canHostEditableRoot } = unlock(
+				select( blockEditorStore )
+			);
+			return canHostEditableRoot( getSelectedBlockClientId() );
+		},
+		[ shouldDisableEditing, hasDefaultEditingMode, isBlockSelected ]
+	);
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -341,6 +371,60 @@ 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-haspopup': ariaHasPopup,
+		'aria-controls': ariaControls,
+		'aria-owns': ariaOwns,
+		'aria-activedescendant': ariaActiveDescendant,
+	} = autocompleteProps;
+	useEffect( () => {
+		if ( ! isSelected ) {
+			return;
+		}
+
+		const host = anchorRef.current?.parentElement?.closest(
+			'[contenteditable="true"]'
+		);
+
+		if ( ! host ) {
+			return;
+		}
+
+		const attributes = {
+			'aria-autocomplete': ariaAutocomplete,
+			'aria-haspopup': ariaHasPopup,
+			'aria-controls': ariaControls,
+			'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 );
+			}
+		};
+	}, [
+		isSelected,
+		ariaAutocomplete,
+		ariaHasPopup,
+		ariaControls,
+		ariaOwns,
+		ariaActiveDescendant,
+	] );
+
 	useMarkPersistent( { html: adjustedValue, value } );
 
 	const keyboardShortcuts = useRef( new Set() );
@@ -350,12 +434,28 @@ 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 ( isEditingHost ) {
+		tabIndex = props.tabIndex ?? 0;
+	} else if ( ! shouldDisableEditing && 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 +468,8 @@ export function RichTextWrapper(
 								forwardedRef={ anchorRef }
 							/>
 						</Popover.__unstableSlotNameProvider>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
@@ -433,17 +533,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 +611,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/spacing-sizes-control/test/utils.js

@@ -8,12 +8,12 @@ import {
 	getPresetValueFromCustomValue,
 	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
-	getSpacingPresetSlug,
 	hasAxisSupport,
 	hasBalancedSidesSupport,
 	isValueSpacingPreset,
 	VIEWS,
 } from '../utils';
+import { getPresetSlug } from '../../preset-input-control/utils';
 
 describe( 'isValueSpacingPreset', () => {
 	it( 'should return true if value is string in spacing presets var format', () => {
@@ -82,15 +82,26 @@ describe( 'getSpacingPresetCssVar', () => {
 			'var(--wp--preset--spacing--20)'
 		);
 	} );
+	it( 'should return undefined for a malformed non-string value such as an array', () => {
+		// Malformed blockGap data, e.g. `{ top: [ '1rem' ] }`, would otherwise
+		// throw when `.match()` is called on the array.
+		expect( getSpacingPresetCssVar( [ '1rem' ] ) ).toBe( undefined );
+	} );
+	it( 'should return undefined for other non-string values', () => {
+		expect( getSpacingPresetCssVar( { top: '1rem' } ) ).toBe( undefined );
+		expect( getSpacingPresetCssVar( 20 ) ).toBe( undefined );
+	} );
 } );
 
-describe( 'getSpacingPresetSlug', () => {
+describe( 'getPresetSlug', () => {
 	it( 'should return original value if 0 or default', () => {
-		expect( getSpacingPresetSlug( '0' ) ).toBe( '0' );
-		expect( getSpacingPresetSlug( 'default' ) ).toBe( 'default' );
+		expect( getPresetSlug( '0', 'spacing' ) ).toBe( '0' );
+		expect( getPresetSlug( 'default', 'spacing' ) ).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' );
+		expect( getPresetSlug( 'var:preset|spacing|20', 'spacing' ) ).toBe(
+			'20'
+		);
 	} );
 } );
 

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

@@ -12,6 +12,13 @@ import {
 	sidesVertical,
 } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { getPresetSlug, isValuePreset } from '../preset-input-control/utils';
+
+const SPACING_PRESET_TYPE = 'spacing';
+
 export const RANGE_CONTROL_MAX_SIZE = 8;
 
 export const ALL_SIDES = [ 'top', 'bottom', 'left', 'right' ];
@@ -64,10 +71,7 @@ export const VIEWS = {
  * @return {boolean} Return true if value is string in format var:preset|spacing|.
  */
 export function isValueSpacingPreset( value ) {
-	if ( ! value?.includes ) {
-		return false;
-	}
-	return value === '0' || value.includes( 'var:preset|spacing|' );
+	return isValuePreset( value, SPACING_PRESET_TYPE );
 }
 
 /**
@@ -83,7 +87,7 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
 		return value;
 	}
 
-	const slug = getSpacingPresetSlug( value );
+	const slug = getPresetSlug( value, SPACING_PRESET_TYPE );
 	const spacingSize = spacingSizes.find(
 		( size ) => String( size.slug ) === slug
 	);
@@ -126,7 +130,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
-	if ( ! value ) {
+	if ( ! value || typeof value !== 'string' ) {
 		return;
 	}
 
@@ -139,27 +143,6 @@ export function getSpacingPresetCssVar( value ) {
 	return `var(--wp--preset--spacing--${ slug[ 1 ] })`;
 }
 
-/**
- * Returns the slug section of the given spacing preset string.
- *
- * @param {string} value Value to extract slug from.
- *
- * @return {string|undefined} The int value of the slug from given spacing preset.
- */
-export function getSpacingPresetSlug( value ) {
-	if ( ! value ) {
-		return;
-	}
-
-	if ( value === '0' || value === 'default' ) {
-		return value;
-	}
-
-	const slug = value.match( /var:preset\|spacing\|(.+)/ );
-
-	return slug ? slug[ 1 ] : undefined;
-}
-
 /**
  * Converts spacing preset value into a Range component value .
  *
@@ -175,7 +158,7 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	const slug =
 		parseFloat( presetValue, 10 ) === 0
 			? '0'
-			: getSpacingPresetSlug( presetValue );
+			: getPresetSlug( presetValue, SPACING_PRESET_TYPE );
 	const sliderValue = spacingSizes.findIndex( ( spacingSize ) => {
 		return String( spacingSize.slug ) === slug;
 	} );

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

@@ -29,6 +29,8 @@ import { useSettings } from '../../components/use-settings';
  * @param {boolean}                 props.withSlider           Whether to show the slider control.
  * @param {boolean}                 props.hasBottomMargin      Whether to add bottom margin below the control.
  * @param {string}                  props.help                 Help text to display below the control.
+ * @param {string}                  props.className            Class name to add to the inner UnitControl.
+ * @param {string}                  props.placeholder          Placeholder for the inner UnitControl.
  *
  * @return {Element} Text indent control.
  */
@@ -39,6 +41,8 @@ export default function TextIndentControl( {
 	withSlider = false,
 	hasBottomMargin = false,
 	help,
+	className,
+	placeholder,
 	...otherProps
 } ) {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -73,6 +77,8 @@ export default function TextIndentControl( {
 				units={ units }
 				onChange={ onChange }
 				help={ help }
+				className={ className }
+				placeholder={ placeholder }
 			/>
 		);
 	}
@@ -93,6 +99,8 @@ export default function TextIndentControl( {
 						units={ units }
 						__unstableInputWidth={ __unstableInputWidth }
 						min={ 0 }
+						className={ className }
+						placeholder={ placeholder }
 					/>
 				</FlexItem>
 				{ withSlider && (