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

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

@@ -14,6 +14,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import useEditableRoot from './use-editable-root';
+import useHomeEnd from './use-home-end';
 import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
 import useArrowNav from './use-arrow-nav';
@@ -21,6 +23,7 @@ import { usePreviewModeNav } from './use-preview-mode-nav';
 import useSelectAll from './use-select-all';
 import useDragSelection from './use-drag-selection';
 import useSelectionObserver from './use-selection-observer';
+import useEditableRootEventHandlers from './use-editable-root-event-handlers';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
 import useClipboardHandler from './use-clipboard-handler';
@@ -37,8 +40,11 @@ export function useWritingFlow() {
 		before,
 		useMergeRefs( [
 			ref,
+			useEditableRootEventHandlers(),
 			useClipboardHandler(),
 			useInput(),
+			useEditableRoot(),
+			useHomeEnd(),
 			useDragSelection(),
 			useSelectionObserver(),
 			useClickSelection(),
@@ -64,7 +70,17 @@ export function useWritingFlow() {
 
 					return () => {
 						delete node.dataset.hasMultiSelection;
-						node.removeAttribute( 'aria-label' );
+						// The wrapper may remain the editing host (the
+						// collapsed block supports `editableRoot`): keep it
+						// named, as the textbox role requires.
+						if ( node.contentEditable === 'true' ) {
+							node.setAttribute(
+								'aria-label',
+								__( 'Editor canvas' )
+							);
+						} else {
+							node.removeAttribute( 'aria-label' );
+						}
 					};
 				},
 				[ hasMultiSelection ]

package/src/components/writing-flow/use-arrow-nav.js

@@ -18,8 +18,9 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getBlockClientId } from '../../utils/dom';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -141,8 +142,16 @@ export function getClosestTabbable(
 			return false;
 		}
 
-		// Skip focusable elements such as links within content editable nodes.
-		if ( node.isContentEditable && node.contentEditable !== 'true' ) {
+		// Skip focusable elements such as links within content editable
+		// nodes: nodes whose closest editable host is an editable element
+		// within a block. When an editable root (e.g. the canvas wrapper)
+		// is the editing host, everything within it is content editable,
+		// but focusables like block wrappers are not text content.
+		if (
+			node.isContentEditable &&
+			node.contentEditable !== 'true' &&
+			getBlockClientId( node.closest( '[contenteditable="true"]' ) )
+		) {
 			return false;
 		}
 
@@ -167,11 +176,15 @@ export default function useArrowNav() {
 	const {
 		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
+		getNextBlockClientId,
+		getPreviousBlockClientId,
+		getSelectedBlockClientId,
+		getSelectionStart,
 		getSettings,
 		hasMultiSelection,
 		__unstableIsFullySelected,
 	} = useSelect( blockEditorStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, multiSelect } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -198,8 +211,17 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
-				event;
+			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			// When the wrapper is contentEditable and holds focus (the
+			// selected block supports `editableRoot`), the event targets the
+			// wrapper; resolve the editable element containing the selection.
+			const target =
+				( event.target === node &&
+					getSelectionEditableElement(
+						node.ownerDocument.defaultView.getSelection(),
+						node
+					) ) ||
+				event.target;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -226,6 +248,32 @@ export default function useArrowNav() {
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
 				if ( shiftKey ) {
+					// A fully selected multi-selection has no native
+					// selection to extend (use-multi-selection cleared it),
+					// so grow or shrink it by one block at the focus end.
+					// Only without a usable native selection: a selection
+					// that is fully selected because it resolves to a
+					// nesting ancestor keeps its native selection, which
+					// the browser extends natively (and the observer
+					// promotes to the common level).
+					const selection = defaultView.getSelection();
+					if (
+						__unstableIsFullySelected() &&
+						( ! selection.rangeCount || selection.isCollapsed )
+					) {
+						const anchorClientId =
+							getMultiSelectedBlocksStartClientId();
+						const focusClientId =
+							getMultiSelectedBlocksEndClientId();
+						const nextClientId = isReverse
+							? getPreviousBlockClientId( focusClientId )
+							: getNextBlockClientId( focusClientId );
+
+						if ( nextClientId ) {
+							multiSelect( anchorClientId, nextClientId );
+							event.preventDefault();
+						}
+					}
 					return;
 				}
 
@@ -246,6 +294,26 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// A block selected without a text selection within it (e.g. an
+			// image or spacer) has no native selection to extend: start a
+			// block multi-selection with the adjacent block.
+			if (
+				shiftKey &&
+				getSelectedBlockClientId() &&
+				! getSelectionStart().attributeKey
+			) {
+				const selectedClientId = getSelectedBlockClientId();
+				const nextClientId = isReverse
+					? getPreviousBlockClientId( selectedClientId )
+					: getNextBlockClientId( selectedClientId );
+
+				if ( nextClientId ) {
+					multiSelect( selectedClientId, nextClientId );
+					event.preventDefault();
+				}
+				return;
+			}
+
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -271,13 +339,22 @@ export default function useArrowNav() {
 			const { keepCaretInsideBlock } = getSettings();
 
 			if ( shiftKey ) {
-				if (
-					isClosestTabbableABlock( target, isReverse ) &&
-					isNavEdge( target, isReverse )
-				) {
-					node.contentEditable = true;
-					// Firefox doesn't automatically move focus.
-					node.focus();
+				if ( isNavEdge( target, isReverse ) ) {
+					if ( isClosestTabbableABlock( target, isReverse ) ) {
+						setContentEditableWrapper( node, true );
+					} else if ( node.contentEditable === 'true' ) {
+						// There is no block to extend the selection into.
+						// Within an editable wrapper the selection could
+						// natively escape into surrounding editable elements
+						// (e.g. the post title), so keep it inside the block
+						// by extending it to the block's edge.
+						const selection = defaultView.getSelection();
+						selection.extend(
+							target,
+							isReverse ? 0 : target.childNodes.length
+						);
+						event.preventDefault();
+					}
 				}
 			} else if (
 				isVertical &&

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

@@ -8,12 +8,17 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =
-		useSelect( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		getBlockSelectionStart,
+		getSelectionStart,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {
@@ -30,9 +35,53 @@ export default function useClickSelection() {
 					// When selecting a single block in a document by holding the shift key,
 					// don't mark this action as multiselection.
 					if ( startClientId && startClientId !== clickedClientId ) {
-						node.contentEditable = true;
-						// Firefox doesn't automatically move focus.
-						node.focus();
+						// When the selected block has no text selection
+						// within it (e.g. an image or spacer), there is no
+						// native selection for the wrapper to adopt when it
+						// is focused, so Safari inserts a caret at the start
+						// of the wrapper and asynchronously reveals it,
+						// scrolling a scrolled-down viewport back up, which
+						// `preventScroll` does not cover. Leave focus alone
+						// in that case: the click moves it.
+						const { clientId, attributeKey } = getSelectionStart();
+						setContentEditableWrapper( node, true, {
+							focus: !! attributeKey,
+						} );
+
+						// The browser extends the selection from the native
+						// anchor. When a block is selected without a text
+						// selection within it, there is no native anchor,
+						// and browsers synthesize one at the nearest text
+						// instead, excluding the block itself. Give the
+						// browser the right anchor before it acts on the
+						// click: the near edge of the selected block, so the
+						// whole block ends up within the extended selection.
+						const { ownerDocument } = node;
+						const selection =
+							ownerDocument.defaultView.getSelection();
+						const blockElement =
+							! attributeKey &&
+							ownerDocument.getElementById(
+								`block-${ clientId }`
+							);
+
+						if (
+							blockElement &&
+							! (
+								selection.anchorNode &&
+								blockElement.contains( selection.anchorNode )
+							)
+						) {
+							const isForward =
+								// eslint-disable-next-line no-bitwise
+								blockElement.compareDocumentPosition(
+									event.target
+								) & node.DOCUMENT_POSITION_FOLLOWING;
+							selection.setPosition(
+								blockElement,
+								isForward ? 0 : blockElement.childNodes.length
+							);
+						}
 					}
 				} else if ( hasMultiSelection() ) {
 					// Allow user to escape out of a multi-selection to a
@@ -55,6 +104,7 @@ export default function useClickSelection() {
 			selectBlock,
 			isSelectionEnabled,
 			getBlockSelectionStart,
+			getSelectionStart,
 			hasMultiSelection,
 		]
 	);

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

@@ -20,7 +20,7 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
-import { setClipboardBlocks } from './utils';
+import { setClipboardBlocks, setContentEditableWrapper } from './utils';
 import { getPasteEventData } from '../../utils/pasting';
 
 export default function useClipboardHandler() {
@@ -130,7 +130,10 @@ export default function useClipboardHandler() {
 				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
 					removeBlocks( selectedBlockClientIds );
 				} else {
-					event.target.ownerDocument.activeElement.contentEditable = false;
+					setContentEditableWrapper(
+						event.target.ownerDocument.activeElement,
+						false
+					);
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {

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

@@ -8,20 +8,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-
-/**
- * Sets the `contenteditable` wrapper element to `value`.
- *
- * @param {HTMLElement} node  Block element.
- * @param {boolean}     value `contentEditable` value (true or false)
- */
-function setContentEditableWrapper( node, value ) {
-	node.contentEditable = value;
-	// Firefox doesn't automatically move focus.
-	if ( value ) {
-		node.focus();
-	}
-}
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Sets a multi-selection based on the native selection across blocks.

package/src/components/writing-flow/use-editable-root-event-handlers.js

@@ -0,0 +1,266 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
+import { BlockRefs } from '../provider/block-refs-provider';
+
+// The React `on*` props the host bridges, mapped to their DOM event type. Only
+// editing events are redirected under `editableRoot` (the wrapper becomes the
+// editing host, so keyboard, input and composition events target it instead of
+// the block); pointer and other events still reach the block and need no
+// bridging. React prop names don't map to DOM types by lowercasing in general
+// (onChange is `input`, onDoubleClick is `dblclick`), so the mapping is
+// explicit, which also locks the bridged surface to events React actually fires.
+const SUPPORTED_EVENTS = {
+	onKeyDown: 'keydown',
+	onKeyUp: 'keyup',
+	onBeforeInput: 'beforeinput',
+	onInput: 'input',
+	onCompositionStart: 'compositionstart',
+	onCompositionUpdate: 'compositionupdate',
+	onCompositionEnd: 'compositionend',
+};
+
+// The DOM event types the host listens for. Fixed, so the host attaches these
+// listeners once rather than tracking which types are in use.
+const EVENT_TYPES = Object.values( SUPPORTED_EVENTS );
+
+/**
+ * Collects the supported `on*` event handlers from a set of props, e.g. a
+ * block's merged `wrapperProps`, keyed by DOM event type. Used by the block to
+ * register them (see `useRegisterBlockEventHandlers`).
+ *
+ * @param {Object} props Props to read handlers from.
+ *
+ * @return {Object|undefined} The handlers by event type, or undefined when
+ *                            there are none.
+ */
+export function getEventHandlers( props ) {
+	let handlers;
+
+	for ( const name in SUPPORTED_EVENTS ) {
+		if ( typeof props[ name ] === 'function' ) {
+			handlers = handlers || {};
+			handlers[ SUPPORTED_EVENTS[ name ] ] = props[ name ];
+		}
+	}
+
+	return handlers;
+}
+
+// The native properties React copies onto its SyntheticEvent for each event
+// type (the *EventInterface tables in react-dom), so the wrapper exposes exactly
+// what a React handler would see and nothing more. Values are copied straight
+// from the native event; React's normalizers only paper over browsers we don't
+// support, and anything omitted stays reachable through `nativeEvent`, as in
+// React (e.g. `getTargetRanges` on a `beforeinput`).
+const EVENT_INTERFACE = [
+	'eventPhase',
+	'bubbles',
+	'cancelable',
+	'timeStamp',
+	'defaultPrevented',
+	'isTrusted',
+];
+const KEYBOARD_EVENT_INTERFACE = [
+	...EVENT_INTERFACE,
+	'view',
+	'detail',
+	'key',
+	'code',
+	'location',
+	'ctrlKey',
+	'shiftKey',
+	'altKey',
+	'metaKey',
+	'repeat',
+	'locale',
+	'getModifierState',
+	'charCode',
+	'keyCode',
+	'which',
+];
+const INPUT_EVENT_INTERFACE = [ ...EVENT_INTERFACE, 'data' ];
+const EVENT_INTERFACES = {
+	keydown: KEYBOARD_EVENT_INTERFACE,
+	keyup: KEYBOARD_EVENT_INTERFACE,
+	beforeinput: INPUT_EVENT_INTERFACE,
+	input: INPUT_EVENT_INTERFACE,
+	compositionstart: INPUT_EVENT_INTERFACE,
+	compositionupdate: INPUT_EVENT_INTERFACE,
+	compositionend: INPUT_EVENT_INTERFACE,
+};
+
+/**
+ * Builds a React `SyntheticEvent`-like object for an extension handler, which
+ * expects one. It mirrors what react-dom does: a plain object wrapping the real
+ * native event, eagerly copying the same interface properties React exposes for
+ * the event type, so a handler sees exactly React's surface and nothing more.
+ *
+ * `preventDefault` and `stopPropagation` forward to the native event, so they
+ * behave as through React; `stopPropagation` also flags the walk through block
+ * ancestors to stop. `target` is the editable inside the block rather than the
+ * real target (the editing host above it), and `currentTarget` is reassigned as
+ * the event bubbles from block to block.
+ *
+ * @param {Event}       nativeEvent The event to wrap.
+ * @param {HTMLElement} target      The element to report as the target.
+ *
+ * @return {Object} The synthetic event.
+ */
+function createBlockSyntheticEvent( nativeEvent, target ) {
+	let propagationStopped = false;
+
+	const syntheticEvent = {
+		nativeEvent,
+		type: nativeEvent.type,
+		target,
+		currentTarget: null,
+		preventDefault() {
+			nativeEvent.preventDefault();
+			syntheticEvent.defaultPrevented = true;
+		},
+		isDefaultPrevented() {
+			return syntheticEvent.defaultPrevented;
+		},
+		stopPropagation() {
+			nativeEvent.stopPropagation();
+			propagationStopped = true;
+		},
+		isPropagationStopped() {
+			return propagationStopped;
+		},
+		// The modern event system doesn't pool, so persistence is a no-op.
+		persist() {},
+		isPersistent() {
+			return true;
+		},
+	};
+
+	for ( const property of EVENT_INTERFACES[ nativeEvent.type ] ) {
+		const value = nativeEvent[ property ];
+		syntheticEvent[ property ] =
+			typeof value === 'function' ? value.bind( nativeEvent ) : value;
+	}
+
+	return syntheticEvent;
+}
+
+/**
+ * Backwards compatibility for block event handlers under `editableRoot`.
+ *
+ * When a block supports `editableRoot`, the writing flow wrapper is the
+ * contentEditable editing host, so keyboard, input and composition events
+ * target the wrapper instead of the block. React `on*` handlers a third party
+ * added to a block through `wrapperProps` (e.g. via an `editor.BlockListBlock`
+ * filter) are on the block element, below the target, so they stop firing.
+ *
+ * The block registers those handlers (see `useBlockProps`), and this hook
+ * calls them from the host: it resolves the block that owns the selection and
+ * every block ancestor, and invokes each registered handler with a synthetic
+ * event, innermost first, like a bubbling event. The listeners are attached
+ * where React attaches its own (the portal container, the iframe's document
+ * element), so a block's handler runs and its `preventDefault` /
+ * `stopPropagation` behave as they would through React, without editableRoot.
+ *
+ * This does not cover handlers a filter puts on its own wrapping element rather
+ * than the block's `wrapperProps`; the block element is the supported event
+ * surface. It can be removed once input handling is lifted to the host.
+ */
+export default function useEditableRootEventHandlers() {
+	const { hasMultiSelection, getBlockParents } =
+		useSelect( blockEditorStore );
+	const { refsMap, eventHandlers } = useContext( BlockRefs );
+	return useRefEffect(
+		( node ) => {
+			function onEvent( event ) {
+				// Only act on real events targeting the host itself, while it
+				// is the editing host for a single block and some block has a
+				// handler to call.
+				if (
+					! eventHandlers.size ||
+					event.target !== node ||
+					! event.isTrusted ||
+					node.contentEditable !== 'true' ||
+					hasMultiSelection()
+				) {
+					return;
+				}
+
+				const selection = node.ownerDocument.defaultView.getSelection();
+
+				if ( ! selection.rangeCount ) {
+					return;
+				}
+
+				const editable = getSelectionEditableElement( selection, node );
+				const clientId = getBlockClientId( editable );
+
+				if ( ! clientId ) {
+					return;
+				}
+
+				// Call the handler on the block that owns the selection and each
+				// of its block ancestors, innermost first, like a bubbling
+				// event. The hierarchy comes from the store rather than the DOM,
+				// and one synthetic event, wrapping the real event, is reused
+				// for the whole chain, its currentTarget moved from block to
+				// block. The element is only resolved for blocks with a handler.
+				const clientIds = [
+					clientId,
+					...getBlockParents( clientId, true ),
+				];
+
+				let syntheticEvent;
+				for ( const ancestorClientId of clientIds ) {
+					const handler =
+						eventHandlers.get( ancestorClientId )?.current?.[
+							event.type
+						];
+					const element = handler && refsMap.get( ancestorClientId );
+
+					if ( ! element ) {
+						continue;
+					}
+
+					if ( ! syntheticEvent ) {
+						syntheticEvent = createBlockSyntheticEvent(
+							event,
+							editable
+						);
+					}
+
+					syntheticEvent.currentTarget = element;
+					handler( syntheticEvent );
+
+					if ( syntheticEvent.isPropagationStopped() ) {
+						break;
+					}
+				}
+			}
+
+			// Attach where React attaches its own event system: the portal
+			// container, which for the iframed canvas is the document element
+			// (see `preparePortalMount` in react-dom). Listening at the same
+			// node, non-capture, means a block's handler runs in the bubbling
+			// phase after core, and its stopPropagation stops at the same point
+			// React's would, as its `on*` handler would without editableRoot.
+			const root = node.ownerDocument.documentElement;
+			const unsubscribers = EVENT_TYPES.map( ( type ) => {
+				root.addEventListener( type, onEvent );
+				return () => root.removeEventListener( type, onEvent );
+			} );
+			return () =>
+				unsubscribers.forEach( ( unsubscribe ) => unsubscribe() );
+		},
+		[ hasMultiSelection, getBlockParents, refsMap, eventHandlers ]
+	);
+}