Add a separate useSelect for getting the block data using the ClientId

WordPress · Feb 26, 2025 · c5a2b95 · c5a2b95
1 parent 4881c61
commit c5a2b95
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
@@ -110,25 +110,29 @@ export default function DocumentOutline( {
 	hasOutlineItemsDisabled,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { title, isTitleSupported, blockData } = useSelect( ( select ) => {
+	const { title, isTitleSupported } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
-		const { getClientIdsWithDescendants, getBlock } =
-			select( blockEditorStore );
-		const clientIds = getClientIdsWithDescendants();
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 		return {
 			title: getEditedPostAttribute( 'title' ),
 			isTitleSupported: postType?.supports?.title ?? false,
-			blockData: clientIds.map( ( id ) => getBlock( id ) ),
 		};
 	} );
+	const blocks = useSelect( ( select ) => {
+		const { getClientIdsWithDescendants, getBlock } =
+			select( blockEditorStore );
+		const clientIds = getClientIdsWithDescendants();
+		// Note: Don't modify data inside the `Array.map` callback,
+		// all compulations should happen in `computeOutlineHeadings`.
+		return clientIds.map( ( id ) => getBlock( id ) );
+	} );
 
 	const prevHeadingLevelRef = useRef( 1 );
 
 	const headings = useMemo(
-		() => computeOutlineHeadings( blockData ),
-		[ blockData ]
+		() => computeOutlineHeadings( blocks ),
+		[ blocks ]
 	);
 
 	if ( headings.length < 1 ) {