Table of Contents: Try maintaining block example attributes

WordPress · Sep 23, 2024 · d01d240 · d01d240
1 parent da16125
commit d01d240
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
@@ -49,7 +49,7 @@ export default function TableOfContentsEdit( {
 	clientId,
 	setAttributes,
 } ) {
-	useObserveHeadings( clientId );
+	useObserveHeadings( clientId, headings );
 
 	const blockProps = useBlockProps();
 	const instanceId = useInstanceId(

diff --git a/packages/block-library/src/table-of-contents/hooks.js b/packages/block-library/src/table-of-contents/hooks.js
@@ -6,7 +6,8 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * WordPress dependencies
  */
-import { useRegistry } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useEffect } from '@wordpress/element';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
@@ -144,13 +145,24 @@ function observeCallback( select, dispatch, clientId ) {
 	}
 }
 
-export function useObserveHeadings( clientId ) {
+export function useObserveHeadings( clientId, headings ) {
 	const registry = useRegistry();
+	const blockType = useSelect(
+		( select ) =>
+			select( blocksStore ).getBlockType( 'core/table-of-contents' ),
+		[]
+	);
+	const isExample =
+		JSON.stringify( blockType.example.attributes.headings ) ===
+		JSON.stringify( headings );
+
 	useEffect( () => {
-		// Todo: Limit subscription to block editor store when data no longer depends on `getPermalink`.
-		// See: https://github.com/WordPress/gutenberg/pull/45513
-		return registry.subscribe( () =>
-			observeCallback( registry.select, registry.dispatch, clientId )
-		);
-	}, [ registry, clientId ] );
+		if ( ! isExample ) {
+			// Todo: Limit subscription to block editor store when data no longer depends on `getPermalink`.
+			// See: https://github.com/WordPress/gutenberg/pull/45513
+			return registry.subscribe( () =>
+				observeCallback( registry.select, registry.dispatch, clientId )
+			);
+		}
+	}, [ registry, clientId, isExample ] );
 }
diff --git a/packages/block-library/src/table-of-contents/index.js b/packages/block-library/src/table-of-contents/index.js
@@ -19,6 +19,28 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	example: {
+		attributes: {
+			headings: [
+				{
+					content: 'Heading',
+					level: 2,
+				},
+				{
+					content: 'Subheading',
+					level: 3,
+				},
+				{
+					content: 'Heading',
+					level: 2,
+				},
+				{
+					content: 'Subheading',
+					level: 3,
+				},
+			],
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );