ellatrix · Sep 28, 2026 · Jul 31, 2026 · Aug 3, 2026 · Jul 31, 2026 · Jul 31, 2026
@@ -85,26 +85,47 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			}
 		}
 		// Do not place a caret when the target already contains one:
-		// while a focused editing host contains the target (the block
-		// supports `editableRoot`), the caret can be inside it without the
-		// target holding focus. Only a caret the rich text synchronized to
-		// the store (offsets present) is deliberate; a leftover one yields
-		// to an explicitly requested edge position (initialPosition -1).
-		const { activeElement } = ownerDocument;
+		// while an editing host contains the target (the block supports
+		// `editableRoot`), the caret can be inside it without the target
+		// holding focus. Only a caret the rich text synchronized to the
+		// store (offsets present) is deliberate; a leftover one yields to
+		// an explicitly requested edge position (initialPosition -1).
 		const selection = ownerDocument.defaultView.getSelection();
 		const { clientId: selectionClientId, offset } = getSelectionStart();
 		const hasCaret =
-			activeElement?.isContentEditable &&
-			activeElement.contains( target ) &&
-			!! selection.anchorNode &&
-			target.contains( selection.anchorNode );
+			!! selection.anchorNode && target.contains( selection.anchorNode );
 		const isDeliberate =
 			initialPosition === 0 ||
 			( offset !== undefined && selectionClientId === clientId );
 
-		if ( ! ( hasCaret && isDeliberate ) ) {
-			placeCaretAtHorizontalEdge( target, isReverse );
+		if ( hasCaret && isDeliberate ) {
+			// The field applies the store selection when focused, so only
+			// move focus, unless an editing host containing the target has
+			// it.
+			const { activeElement } = ownerDocument;
+			const isHosted =
+				activeElement?.isContentEditable &&
+				activeElement.contains( target );
+			if ( ! isHosted ) {
+				target.focus();
+			}
+			return;
+		}
+
+		// Under the editing host the target is editable through the host
+		// and not a focus target of its own (no contenteditable attribute):
+		// place the caret at its edge directly. Focusing it then focuses
+		// the host (see RichText), which adopts the caret.
+		if ( target.isContentEditable && target.contentEditable !== 'true' ) {
+			selection.collapse(
+				target,
+				isReverse ? target.childNodes.length : 0
+			);
+			target.focus();
+			return;
 		}
+
+		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 
 	return ref;

@@ -3,7 +3,7 @@ import {
 	useRefEffect,
 	privateApis as composePrivateApis,
 } from '@wordpress/compose';
-import { isInsideRootBlock } from '../../../utils/dom';
+import { isInsideRootBlock, getBlockClientId } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
@@ -74,6 +74,21 @@ export function useFocusHandler( clientId ) {
 				// builds the multi-selection from the anchor it recorded at
 				// mousedown, so this dispatch overwriting the store anchor
 				// is harmless.
+				// A click on the selected block's inert field can focus this
+				// wrapper instead (Firefox focuses the nearest focusable
+				// ancestor). Under an engaged editing host, a caret in the
+				// selected block within this one keeps that selection.
+				const { anchorNode } =
+					node.ownerDocument.defaultView.getSelection();
+				if (
+					anchorNode &&
+					node.contains( anchorNode ) &&
+					isBlockSelected( getBlockClientId( anchorNode ) ) &&
+					node.isContentEditable
+				) {
+					return;
+				}
+
 				if ( event.target.isContentEditable ) {
 					selectBlock( clientId, null );
 					return;

@@ -11,7 +11,7 @@ import {
 	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
-import { useMergeRefs, useInstanceId } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId, useRefEffect } from '@wordpress/compose';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
 import { getBlockBindingsSource } from '@wordpress/blocks';
@@ -239,25 +239,33 @@ 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.
+	// Whether the wrapper hosts editing for this block: the selected block
+	// can host it, and any block in a multi-selection is inside the host's
+	// range and must not be an editing area of its own there.
 	const isEditingHost = useSelect(
 		( select ) => {
-			if (
-				shouldDisableEditing ||
-				! hasDefaultEditingMode ||
-				! isBlockSelected
-			) {
+			if ( shouldDisableEditing || ! hasDefaultEditingMode ) {
 				return false;
 			}
 
-			const { getSelectedBlockClientId, canHostEditableRoot } = unlock(
-				select( blockEditorStore )
-			);
-			return canHostEditableRoot( getSelectedBlockClientId() );
+			const {
+				getSelectedBlockClientId,
+				canHostEditableRoot,
+				isBlockMultiSelected,
+			} = unlock( select( blockEditorStore ) );
+
+			if ( isBlockSelected ) {
+				return canHostEditableRoot( getSelectedBlockClientId() );
+			}
+
+			return isBlockMultiSelected( clientId );
 		},
-		[ shouldDisableEditing, hasDefaultEditingMode, isBlockSelected ]
+		[
+			shouldDisableEditing,
+			hasDefaultEditingMode,
+			isBlockSelected,
+			clientId,
+		]
 	);
 
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
@@ -366,7 +374,7 @@ function RichTextWrapper(
 		// 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' ) {
+		if ( ! isSelected || element?.contentEditable === 'false' ) {
 			return;
 		}
 
@@ -462,6 +470,59 @@ function RichTextWrapper(
 		anchorRef.current?.focus();
 	}
 
+	// Under the editing host the element is not a focus target (no tabindex
+	// and no contenteditable attribute, see below), so `focus()` on it would
+	// do nothing. Keep it working: place the caret in the element and focus
+	// the host instead.
+	const focusUnderHostRef = useRefEffect(
+		( element ) => {
+			if ( ! isEditingHost ) {
+				return;
+			}
+
+			const { ownerDocument } = element;
+			const { focus: nativeFocus } = element;
+
+			element.focus = ( options ) => {
+				const host = element.parentElement?.closest(
+					'[contenteditable="true"]'
+				);
+
+				// The host disengaged in this commit, ahead of this
+				// override's removal: the element is a focus target again.
+				if ( ! host ) {
+					nativeFocus.call( element, options );
+					return;
+				}
+
+				const selection = ownerDocument.defaultView.getSelection();
+
+				if ( ! element.contains( selection.anchorNode ) ) {
+					selection.collapse( element, 0 );
+				}
+
+				if (
+					ownerDocument.activeElement !== host ||
+					! ownerDocument.hasFocus()
+				) {
+					const range = selection.getRangeAt( 0 ).cloneRange();
+					host.focus( { preventScroll: true, ...options } );
+					// Gecko moves the selection when an editing host takes
+					// focus instead of adopting the one within it.
+					if ( ! element.contains( selection.anchorNode ) ) {
+						selection.removeAllRanges();
+						selection.addRange( range );
+					}
+				}
+			};
+
+			return () => {
+				delete element.focus;
+			};
+		},
+		[ isEditingHost ]
+	);
+
 	// 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
@@ -473,7 +534,11 @@ function RichTextWrapper(
 	// focusability.
 	let tabIndex = props.tabIndex;
 	if ( isEditingHost ) {
-		tabIndex = props.tabIndex ?? 0;
+		// The field must not be a focus target under the host: iOS focuses a
+		// focusable child on tap, thrashing focus with the host and canceling
+		// native selection gestures (double tap to select a word). Block
+		// props pass tabIndex 0, so remove it explicitly.
+		tabIndex = null;
 	} else if ( ! shouldDisableEditing && props.tabIndex === 0 ) {
 		tabIndex = null;
 	}
@@ -554,8 +619,15 @@ function RichTextWrapper(
 					} ),
 					anchorRef,
 					setAnchorElement,
+					focusUnderHostRef,
 				] ) }
-				contentEditable={ ! shouldDisableEditing }
+				contentEditable={
+					// Under the editing host the field is editable through the
+					// host, not an editing host of its own. The attribute must
+					// be absent, not "inherit": Gecko treats the invalid value
+					// as non-editable.
+					isEditingHost ? undefined : ! shouldDisableEditing
+				}
 				suppressContentEditableWarning
 				className={ clsx(
 					'block-editor-rich-text__editable',

@@ -100,16 +100,14 @@ export function useTypewriter() {
 				: ( caretRect.top - 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
-			// trigger percentage of the page, do not scroll the page.
-			// The typewriter effect should not kick in until an empty page has been
-			// filled with the initial trigger percentage or the user scrolls
-			// intentionally down.
+			// If the scroll position is at the start and the caret is
+			// positioned within the initial trigger percentage of the page, do
+			// not scroll the page. The typewriter effect should not kick in
+			// until an empty page has been filled with the initial trigger
+			// percentage or the user scrolls intentionally down.
 			if (
 				scrollY === 0 &&
-				relativeScrollPosition < initialTriggerPercentage &&
-				isLastEditableNode()
+				relativeScrollPosition < initialTriggerPercentage
 			) {
 				// Reset the caret position to maintain.
 				caretRect = currentCaretRect;
@@ -174,58 +172,22 @@ export function useTypewriter() {
 		}
 
 		/**
-		 * Returns the editable element owning the selection: the active
-		 * element, or, when a focused editing host contains the node
-		 * (a selected block supports `editableRoot`), the editable
-		 * element containing the selection.
+		 * Checks if the current situation is eligible for scroll:
+		 * - The component must contain the selection.
+		 * - The selection must be within editable content.
 		 */
-		function getActiveEditableElement() {
-			const { activeElement } = ownerDocument;
-
-			if ( ! activeElement ) {
-				return null;
-			}
-
-			if (
-				! activeElement.isContentEditable ||
-				! activeElement.contains( node )
-			) {
-				return activeElement;
-			}
-
+		function isSelectionEligibleForScroll() {
 			const { anchorNode } = defaultView.getSelection();
 
-			if ( ! anchorNode ) {
-				return null;
+			if ( ! anchorNode || ! node.contains( anchorNode ) ) {
+				return false;
 			}
 
 			const element =
 				anchorNode.nodeType === anchorNode.ELEMENT_NODE
 					? anchorNode
 					: anchorNode.parentElement;
-			return element?.closest( '[contenteditable="true"]' ) ?? null;
-		}
-
-		/**
-		 * Checks if the current situation is eligible for scroll:
-		 * - The component must contain the selection.
-		 * - The active element must be contenteditable.
-		 */
-		function isSelectionEligibleForScroll() {
-			const activeEditableElement = getActiveEditableElement();
-			return (
-				!! activeEditableElement &&
-				node.contains( activeEditableElement ) &&
-				activeEditableElement.isContentEditable
-			);
-		}
-
-		function isLastEditableNode() {
-			const editableNodes = node.querySelectorAll(
-				'[contenteditable="true"]'
-			);
-			const lastEditableNode = editableNodes[ editableNodes.length - 1 ];
-			return lastEditableNode === getActiveEditableElement();
+			return !! element?.isContentEditable;
 		}
 
 		// When the user scrolls or resizes, the scroll position should be

@@ -100,12 +100,24 @@ export function getClosestTabbable(
 		focusableNodes.reverse();
 	}
 
-	// Consider as candidates those focusables after the current target. It's
-	// assumed this can only be reached if the target is focusable (on its
-	// keydown event), so no need to verify it exists in the set.
-	focusableNodes = focusableNodes.slice(
-		focusableNodes.indexOf( target ) + 1
-	);
+	// Consider as candidates those focusables after the current target.
+	const targetIndex = focusableNodes.indexOf( target );
+
+	if ( targetIndex !== -1 ) {
+		focusableNodes = focusableNodes.slice( targetIndex + 1 );
+	} else {
+		// The target is not focusable (the selected block's editable under
+		// the editing host has no tabindex): take the focusables on the
+		// navigation side of it in document order, not its descendants.
+		focusableNodes = focusableNodes.filter( ( focusableNode ) => {
+			const position = target.compareDocumentPosition( focusableNode );
+			const mask = isReverse
+				? target.DOCUMENT_POSITION_PRECEDING
+				: target.DOCUMENT_POSITION_FOLLOWING;
+			// eslint-disable-next-line no-bitwise
+			return !! ( position & mask ) && ! target.contains( focusableNode );
+		} );
+	}
 
 	let targetRect;