RichText: separate fallback instance ID for selection retrieval (Word…

…Press#60277) Co-authored-by: ellatrix <[email protected]> Co-authored-by: jsnajdr <[email protected]>
n2erjo00 · Mar 28, 2024 · 447e0b1 · 447e0b1
1 parent fe4d8cb
commit 447e0b1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -13,7 +13,7 @@ import {
 	createContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
 	removeFormat,
@@ -52,6 +52,8 @@ import { canBindBlock } from '../../hooks/use-bindings-attributes';
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
 
+const instanceIdKey = Symbol( 'instanceId' );
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -117,6 +119,8 @@ export function RichTextWrapper(
 ) {
 	props = removeNativeProps( props );
 
+	const instanceId = useInstanceId( RichTextWrapper );
+
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
@@ -139,7 +143,9 @@ export function RichTextWrapper(
 			isSelected =
 				selectionStart.clientId === clientId &&
 				selectionEnd.clientId === clientId &&
-				selectionStart.attributeKey === identifier;
+				( identifier
+					? selectionStart.attributeKey === identifier
+					: selectionStart[ instanceIdKey ] === instanceId );
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
 		}
@@ -153,6 +159,7 @@ export function RichTextWrapper(
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
 		clientId,
 		identifier,
+		instanceId,
 		originalIsSelected,
 		isBlockSelected,
 	] );
@@ -213,6 +220,13 @@ export function RichTextWrapper(
 			const selection = {};
 			const unset = start === undefined && end === undefined;
 
+			const baseSelection = {
+				clientId,
+				[ identifier ? 'attributeKey' : instanceIdKey ]: identifier
+					? identifier
+					: instanceId,
+			};
+
 			if ( typeof start === 'number' || unset ) {
 				// If we are only setting the start (or the end below), which
 				// means a partial selection, and we're not updating a selection
@@ -227,8 +241,7 @@ export function RichTextWrapper(
 				}
 
 				selection.start = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: start,
 				};
 			}
@@ -243,15 +256,22 @@ export function RichTextWrapper(
 				}
 
 				selection.end = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: end,
 				};
 			}
 
 			selectionChange( selection );
 		},
-		[ clientId, identifier ]
+		[
+			clientId,
+			getBlockRootClientId,
+			getSelectionEnd,
+			getSelectionStart,
+			identifier,
+			instanceId,
+			selectionChange,
+		]
 	);
 
 	const {

diff --git a/packages/block-editor/src/components/rich-text/with-deprecations.js b/packages/block-editor/src/components/rich-text/with-deprecations.js
@@ -3,7 +3,6 @@
  */
 import { forwardRef } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
 import { __unstableCreateElement } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -36,12 +35,10 @@ export function withDeprecations( Component ) {
 		}
 
 		const NewComponent = props.multiline ? RichTextMultiline : Component;
-		const instanceId = useInstanceId( NewComponent );
 
 		return (
 			<NewComponent
 				{ ...props }
-				identifier={ props.identifier || instanceId }
 				value={ value }
 				onChange={ onChange }
 				ref={ ref }