Use ref for prev heading level in DocumentOutline

WordPress · Nov 19, 2024 · 10fcd4a · 10fcd4a
1 parent b64f462
commit 10fcd4a
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useRef } 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';
@@ -127,6 +128,8 @@ export default function DocumentOutline( {
 		};
 	} );
 
+	const prevHeadingLevelRef = useRef( 1 );
+
 	const headings = computeOutlineHeadings( blocks );
 	if ( headings.length < 1 ) {
 		return (
@@ -141,8 +144,6 @@ export default function DocumentOutline( {
 		);
 	}
 
-	let prevHeadingLevel = 1;
-
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
@@ -172,15 +173,16 @@ export default function DocumentOutline( {
 				{ headings.map( ( item, index ) => {
 					// Headings remain the same, go up by one, or down by any amount.
 					// Otherwise there are missing levels.
-					const isIncorrectLevel = item.level > prevHeadingLevel + 1;
+					const isIncorrectLevel =
+						item.level > prevHeadingLevelRef.current + 1;
 
 					const isValid =
 						! item.isEmpty &&
 						! isIncorrectLevel &&
 						!! item.level &&
 						( item.level !== 1 ||
 							( ! hasMultipleH1 && ! hasTitle ) );
-					prevHeadingLevel = item.level;
+					prevHeadingLevelRef.current = item.level;
 
 					return (
 						<DocumentOutlineItem