Only host editable roots among fully editable siblings

Consolidate the hosting conditions into canHostEditableRoot, shared by
the hook and the selection observer (whose copy had drifted and lacked
the editing mode check), and require every sibling in the list to have
the default editing mode. A host makes all its content editable by
inheritance: with an override-enabled pattern paragraph selected, the
pattern's read-only content became editable, and clicking it set off a
focus chain that moved the selection to the paragraph, so the button's
link edit was applied to the wrong block.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: ellatrix

packages/block-editor/src/components/writing-flow/use-editable-root.js

@@ -13,6 +13,53 @@ import { store as blockEditorStore } from '../../store';
 import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
 import { unlock } from '../../lock-unlock';
 
+/**
+ * Returns true when the writing flow wrapper can host editing for the given
+ * block: it supports `editableRoot`, is edited visually in the default
+ * editing mode, and has sibling blocks for a native selection to extend
+ * into, all of them editable.
+ *
+ * @param {Object} select   Bound block editor store selectors.
+ * @param {string} clientId Block client ID.
+ *
+ * @return {boolean} Whether an editing host can host the block.
+ */
+export function canHostEditableRoot( select, clientId ) {
+	const {
+		getBlockName,
+		getBlockEditingMode,
+		getBlockMode,
+		getBlockRootClientId,
+		getBlockOrder,
+	} = select;
+
+	if (
+		! clientId ||
+		getBlockEditingMode( clientId ) !== 'default' ||
+		// Not when the block is edited as HTML: there is no rich text to
+		// host then, only a textarea, which the editing host would
+		// interfere with.
+		getBlockMode( clientId ) !== 'visual' ||
+		! hasBlockSupport( getBlockName( clientId ), 'editableRoot', false )
+	) {
+		return false;
+	}
+
+	// Only host when the block has sibling blocks for a native selection to
+	// extend into, all of them editable. A lone block (e.g. a single
+	// paragraph nested in an HTML block) is edited on its own element, and
+	// read-only siblings (e.g. pattern content without overrides enabled)
+	// must not become editable by inheriting from the host.
+	const siblings = getBlockOrder( getBlockRootClientId( clientId ) );
+	return (
+		siblings.length > 1 &&
+		siblings.every(
+			( siblingClientId ) =>
+				getBlockEditingMode( siblingClientId ) === 'default'
+		)
+	);
+}
+
 /**
  * Returns true when the writing flow wrapper should be contentEditable: the
  * selected block supports `editableRoot`.
@@ -21,32 +68,10 @@ import { unlock } from '../../lock-unlock';
  */
 export function useHasEditableRoot() {
 	return useSelect( ( select ) => {
-		const {
-			getSelectedBlockClientId,
-			getBlockName,
-			getBlockEditingMode,
-			getBlockMode,
-			getBlockRootClientId,
-			getBlockOrder,
-		} = select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return (
-			!! clientId &&
-			getBlockEditingMode( clientId ) === 'default' &&
-			// Not when the block is edited as HTML: there is no rich text
-			// to host then, only a textarea, which the editing host would
-			// interfere with.
-			getBlockMode( clientId ) === 'visual' &&
-			hasBlockSupport(
-				getBlockName( clientId ),
-				'editableRoot',
-				false
-			) &&
-			// Only host when the block has sibling blocks for a native
-			// selection to extend into. A lone block (e.g. a single
-			// paragraph nested in an HTML block) is edited on its own
-			// element, not through a canvas-wide editing host.
-			getBlockOrder( getBlockRootClientId( clientId ) ).length > 1
+		const selectors = select( blockEditorStore );
+		return canHostEditableRoot(
+			selectors,
+			selectors.getSelectedBlockClientId()
 		);
 	}, [] );
 }

packages/block-editor/src/components/writing-flow/use-selection-observer.js

@@ -8,13 +8,13 @@ import {
 	privateApis as richTextPrivateApis,
 } from '@wordpress/rich-text';
 import { isSelectionForward } from '@wordpress/dom';
-import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
+import { canHostEditableRoot } from './use-editable-root';
 import { unlock } from '../../lock-unlock';
 
 const { ownsSelection } = unlock( richTextPrivateApis );
@@ -132,18 +132,15 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
+	const blockEditorSelectors = useSelect( blockEditorStore );
 	const {
 		getBlockParents,
 		getBlockSelectionStart,
 		isMultiSelecting,
-		getBlockName,
-		getBlockMode,
 		getSelectionStart,
 		getSelectionEnd,
 		getSelectedBlockClientId,
-		getBlockRootClientId,
-		getBlockOrder,
-	} = useSelect( blockEditorStore );
+	} = blockEditorSelectors;
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -212,21 +209,10 @@ export default function useSelectionObserver() {
 						// always move it), which must not re-enable the wrapper
 						// after another block has been selected.
 						collapsedClientId === getSelectedBlockClientId() &&
-						// Not while the block is edited as HTML: its content is
-						// a textarea, not rich text, which the editing host
-						// would interfere with.
-						getBlockMode( collapsedClientId ) === 'visual' &&
-						hasBlockSupport(
-							getBlockName( collapsedClientId ),
-							'editableRoot',
-							false
-						) &&
-						// Only host when the block has sibling blocks for a
-						// native selection to extend into; a lone block is
-						// edited on its own element.
-						getBlockOrder(
-							getBlockRootClientId( collapsedClientId )
-						).length > 1
+						canHostEditableRoot(
+							blockEditorSelectors,
+							collapsedClientId
+						)
 					) {
 						setContentEditableWrapper( node, true );