From d01d2406d19f9397cad025a0fb9d686bdd7413d7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 23 Sep 2024 10:35:37 +1000 Subject: [PATCH 1/3] Table of Contents: Try maintaining block example attributes --- .../src/table-of-contents/edit.js | 2 +- .../src/table-of-contents/hooks.js | 28 +++++++++++++------ .../src/table-of-contents/index.js | 22 +++++++++++++++ 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 121a8d7c8fc31..99c04f4d0f1b5 100644 --- 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 index ef24d8167381a..046efadd23e93 100644 --- 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 index 408538a7dcadb..888f022eb267d 100644 --- 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 } ); From 3985779905d51589a7b3a8b9d3a2b1507bff5f68 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 23 Sep 2024 11:51:53 +1000 Subject: [PATCH 2/3] Revert "Table of Contents: Try maintaining block example attributes" This reverts commit d01d2406d19f9397cad025a0fb9d686bdd7413d7. --- .../src/table-of-contents/edit.js | 2 +- .../src/table-of-contents/hooks.js | 28 ++++++------------- .../src/table-of-contents/index.js | 22 --------------- 3 files changed, 9 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 99c04f4d0f1b5..121a8d7c8fc31 100644 --- 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, headings ); + useObserveHeadings( clientId ); 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 index 046efadd23e93..ef24d8167381a 100644 --- a/packages/block-library/src/table-of-contents/hooks.js +++ b/packages/block-library/src/table-of-contents/hooks.js @@ -6,8 +6,7 @@ import fastDeepEqual from 'fast-deep-equal/es6'; /** * WordPress dependencies */ -import { store as blocksStore } from '@wordpress/blocks'; -import { useRegistry, useSelect } from '@wordpress/data'; +import { useRegistry } from '@wordpress/data'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { useEffect } from '@wordpress/element'; import { addQueryArgs, removeQueryArgs } from '@wordpress/url'; @@ -145,24 +144,13 @@ function observeCallback( select, dispatch, clientId ) { } } -export function useObserveHeadings( clientId, headings ) { +export function useObserveHeadings( clientId ) { 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( () => { - 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 ] ); + // 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 ] ); } diff --git a/packages/block-library/src/table-of-contents/index.js b/packages/block-library/src/table-of-contents/index.js index 888f022eb267d..408538a7dcadb 100644 --- a/packages/block-library/src/table-of-contents/index.js +++ b/packages/block-library/src/table-of-contents/index.js @@ -19,28 +19,6 @@ 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 } ); From 1613438920cb028d02bb901e79f5cf93fa6e44e6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 23 Sep 2024 11:57:28 +1000 Subject: [PATCH 3/3] Use innerBlocks to enforce example --- .../src/table-of-contents/block.json | 53 ++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json index 451d245d867b0..5eb6e729d3f03 100644 --- a/packages/block-library/src/table-of-contents/block.json +++ b/packages/block-library/src/table-of-contents/block.json @@ -62,6 +62,57 @@ } } }, - "example": {}, + "example": { + "innerBlocks": [ + { + "name": "core/heading", + "attributes": { + "level": 2, + "content": "Heading" + } + }, + { + "name": "core/heading", + "attributes": { + "level": 3, + "content": "Subheading" + } + }, + { + "name": "core/heading", + "attributes": { + "level": 2, + "content": "Heading" + } + }, + { + "name": "core/heading", + "attributes": { + "level": 3, + "content": "Subheading" + } + } + ], + "attributes": { + "headings": [ + { + "content": "Heading", + "level": 2 + }, + { + "content": "Subheading", + "level": 3 + }, + { + "content": "Heading", + "level": 2 + }, + { + "content": "Subheading", + "level": 3 + } + ] + } + }, "style": "wp-block-table-of-contents" }