Document outline: Show heading blocks when template-lock is enabled (#…

…69073) * Document outline: Show heading blocks when template-lock is enabled This PR updates the Document Outline to show heading blocks from both the template and the post content when the option "Show template" is enabled. Co-authored-by: carolinan <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: SainathPoojary <[email protected]> Co-authored-by: singhakanshu00 <[email protected]> Co-authored-by: rinkalpagdar <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 27, 2025 · 0ec29dd · 0ec29dd
1 parent 5c38661
commit 0ec29dd
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -83,16 +83,13 @@ function EmptyOutlineIllustration() {
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return blocks.flatMap( ( block = {} ) => {
-		if ( block.name === 'core/heading' ) {
-			return {
-				...block,
-				level: block.attributes.level,
-				isEmpty: isEmptyHeading( block ),
-			};
-		}
-		return computeOutlineHeadings( block.innerBlocks );
-	} );
+	return blocks
+		.filter( ( block ) => block.name === 'core/heading' )
+		.map( ( block ) => ( {
+			...block,
+			level: block.attributes.level,
+			isEmpty: isEmptyHeading( block ),
+		} ) );
 };
 
 const isEmptyHeading = ( heading ) =>
@@ -113,22 +110,31 @@ export default function DocumentOutline( {
 	hasOutlineItemsDisabled,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { blocks, title, isTitleSupported } = useSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
+	const { title, isTitleSupported } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
 		return {
 			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
 			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} );
+	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 = computeOutlineHeadings( blocks );
+	const headings = useMemo(
+		() => computeOutlineHeadings( blocks ),
+		[ blocks ]
+	);
+
 	if ( headings.length < 1 ) {
 		return (
 			<div className="editor-document-outline has-no-headings">