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

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

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 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 +35,5 @@ export default ( props ) => ( element ) => {
 		__experimentalUndo();
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 import { useContext, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import BlockContext from '../block-context';
 
 const DEFAULT_BLOCK_CONTEXT = {};

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

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { ToolbarItem, DropdownMenu, Slot } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { orderBy } from '../../../utils/sorting';
 
 const POPOVER_PROPS = {

package/src/components/rich-text/format-toolbar-container.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';

package/src/components/rich-text/get-rich-text-values.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { RawHTML, StrictMode, Fragment } from '@wordpress/element';
 import {
 	getSaveElement,
 	__unstableGetBlockProps as getBlockProps,
 } from '@wordpress/blocks';
 import { RichTextData } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
 import InnerBlocks from '../inner-blocks';
 import { Content } from './content';
 

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

@@ -1,19 +1,12 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
-
-/**
- * WordPress dependencies
- */
 import {
 	useRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	forwardRef,
-	createContext,
 	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
@@ -23,13 +16,13 @@ import { Popover } from '@wordpress/components';
 import { getBlockBindingsSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 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 +34,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 +93,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 +236,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 +360,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 +423,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 +457,8 @@ export function RichTextWrapper(
 								forwardedRef={ anchorRef }
 							/>
 						</Popover.__unstableSlotNameProvider>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
@@ -433,17 +522,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 +600,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/rich-text/multiline.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ENTER } from '@wordpress/keycodes';
 import { create, split, toHTMLString } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
 import { RichTextWrapper } from './';
 import { store as blockEditorStore } from '../../store';
 import { useBlockEditContext } from '../block-edit';

package/src/components/rich-text/prevent-event-discovery.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { insert } from '@wordpress/rich-text';
 
 export function preventEventDiscovery( value ) {

package/src/components/rich-text/toolbar-button.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Fill, ToolbarButton } from '@wordpress/components';
 import { displayShortcut } from '@wordpress/keycodes';
 

package/src/components/rich-text/use-mark-persistent.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useLayoutEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 export function useMarkPersistent( { html, value } ) {

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { renderToString } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 

package/src/components/rich-text/with-deprecations.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
 import { __unstableCreateElement } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import RichTextMultiline from './multiline';
 
 export function withDeprecations( Component ) {

package/src/components/selection-scroll-into-view/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 
 /**

package/src/components/skip-to-selected-block/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 

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/hooks/use-spacing-sizes.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../../use-settings';
 import { RANGE_CONTROL_MAX_SIZE } from '../utils';
 

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	BaseControl,
 	__experimentalHStack as HStack,
@@ -8,10 +5,6 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import useSpacingSizes from './hooks/use-spacing-sizes';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
@@ -132,8 +125,8 @@ export default function SpacingSizesControl( {
 		ALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';
 
 	const label = sprintf(
-		// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
-		_x( '%1$s %2$s', 'spacing' ),
+		// translators: 1: Type of spacing being modified (Padding, Margin, etc.). 2: The side of the block being modified (Top, Bottom, Left, etc.).
+		_x( '%1$s %2$s', 'spacing control label' ),
 		labelProp,
 		sideLabel
 	).trim();

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import SpacingInputControl from './spacing-input-control';
 import {
 	LABELS,

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import SpacingInputControl from './spacing-input-control';
 import {
 	ALL_SIDES,

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import SpacingInputControl from './spacing-input-control';
 import { LABELS, getPresetValueFromCustomValue } from '../utils';
 

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

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { sprintf, _x } from '@wordpress/i18n';
 import { __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import PresetInputControl from '../../preset-input-control';
 import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';

package/src/components/spacing-sizes-control/linked-button.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';

package/src/components/spacing-sizes-control/test/index.js

@@ -19,21 +19,9 @@
  * The tests ensure that when the SpacingSizesControl is refactored to use
  * PresetInputControl, the existing user experience and behavior is preserved.
  */
-
-/**
- * External dependencies
- */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import SpacingSizesControl from '../index';
 
 // Mock useSelect

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	ALL_SIDES,
 	getCustomValueFromPreset,
@@ -8,12 +5,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 +79,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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	sidesAll,
@@ -11,6 +8,9 @@ import {
 	sidesTop,
 	sidesVertical,
 } from '@wordpress/icons';
+import { getPresetSlug, isValuePreset } from '../preset-input-control/utils';
+
+const SPACING_PRESET_TYPE = 'spacing';
 
 export const RANGE_CONTROL_MAX_SIZE = 8;
 
@@ -64,10 +64,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 +80,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 +123,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 +136,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 +151,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;
 	} );