ToC block: re-enable + use static markup and only support core Headin…

…g and Page Break blocks (#29739)

Re-enables the Table of Contents block, which was first merged over a year ago in #21234. The block is using static markup and only supports the core Heading and Page Break blocks, using a much cleaner and performant implementation. It is also using <ol> for the lists.

Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>

.github/CODEOWNERS

@@ -20,6 +20,7 @@
 /packages/block-library/src/page-list           @tellthemachines
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski
+/packages/block-library/src/table-of-contents   @ZebulanStanphill
 
 # Duotone
 /lib/block-supports/duotone.php                       @ajlende

docs/reference-guides/core-blocks.md

@@ -798,7 +798,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
 -	**Name:** core/table-of-contents
 -	**Category:** layout
 -	**Supports:** ~~html~~
--	**Attributes:** onlyIncludeCurrentPage
+-	**Attributes:** headings, onlyIncludeCurrentPage
 
 ## Tag Cloud
 

lib/blocks.php

@@ -38,7 +38,7 @@ function gutenberg_reregister_core_block_types() {
 				'social-links',
 				'spacer',
 				'table',
-				// 'table-of-contents',
+				'table-of-contents',
 				'text-columns',
 				'verse',
 				'video',
@@ -107,7 +107,6 @@ function gutenberg_reregister_core_block_types() {
 				'site-logo.php'                    => 'core/site-logo',
 				'site-tagline.php'                 => 'core/site-tagline',
 				'site-title.php'                   => 'core/site-title',
-				// 'table-of-contents.php'          => 'core/table-of-contents',
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
 				'term-description.php'             => 'core/term-description',

packages/block-library/src/heading/edit.js

@@ -42,10 +42,13 @@ function HeadingEdit( {
 	} );
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.generateAnchors,
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
 		};
 	}, [] );
 

packages/block-library/src/index.js

@@ -99,6 +99,7 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as table from './table';
+import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
@@ -175,7 +176,6 @@ export const __experimentalGetCoreBlocks = () => [
 	socialLinks,
 	spacer,
 	table,
-	// tableOfContents,
 	tagCloud,
 	textColumns,
 	verse,
@@ -269,6 +269,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 			[
 				// Experimental blocks.
 				postAuthorName,
+				tableOfContents,
 				...( window.__experimentalEnableListBlockV2
 					? [ listItem ]
 					: [] ),

packages/block-library/src/list/transforms.js

@@ -208,6 +208,13 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/table-of-contents' ],
+			transform: () => {
+				return createBlock( 'core/table-of-contents' );
+			},
+		},
 	],
 };
 

packages/block-library/src/table-of-contents/block.json

@@ -8,13 +8,19 @@
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",
 	"attributes": {
+		"headings": {
+			"type": "array",
+			"items": {
+				"type": "object"
+			}
+		},
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",
 			"default": false
 		}
 	},
-	"usesContext": [ "postId" ],
 	"supports": {
 		"html": false
-	}
+	},
+	"example": {}
 }