@wordpress/block-library 7.5.0 → 7.6.0

package/build/table-of-contents/edit.js

@@ -17,10 +17,18 @@ var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
 
+var _compose = require("@wordpress/compose");
+
 var _data = require("@wordpress/data");
 
+var _dom = require("@wordpress/dom");
+
 var _i18n = require("@wordpress/i18n");
 
+var _url = require("@wordpress/url");
+
+var _icon = _interopRequireDefault(require("./icon"));
+
 var _list = _interopRequireDefault(require("./list"));
 
 var _utils = require("./utils");
@@ -37,14 +45,15 @@ var _utils = require("./utils");
  * Internal dependencies
  */
 
+/** @typedef {import('./utils').HeadingData} HeadingData */
+
 /**
  * Table of Contents block edit component.
  *
  * @param {Object}                       props                                   The props.
  * @param {Object}                       props.attributes                        The block attributes.
- * @param {boolean}                      props.attributes.onlyIncludeCurrentPage
- *                                                                               Whether to only include headings from the current page (if the post is
- *                                                                               paginated).
+ * @param {HeadingData[]}                props.attributes.headings               A list of data for each heading in the post.
+ * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).
  * @param {string}                       props.clientId
  * @param {(attributes: Object) => void} props.setAttributes
  *
@@ -53,96 +62,157 @@ var _utils = require("./utils");
 function TableOfContentsEdit(_ref) {
   let {
     attributes: {
+      headings = [],
       onlyIncludeCurrentPage
     },
     clientId,
     setAttributes
   } = _ref;
-  const blockProps = (0, _blockEditor.useBlockProps)(); // Local state; not saved to block attributes. The saved block is dynamic and uses PHP to generate its content.
-
-  const [headings, setHeadings] = (0, _element.useState)([]);
-  const [headingTree, setHeadingTree] = (0, _element.useState)([]);
+  const blockProps = (0, _blockEditor.useBlockProps)();
+  const disabledRef = (0, _compose.useDisabled)();
+  const listBlockExists = (0, _data.useSelect)(select => !!select(_blocks.store).getBlockType('core/list'), []);
   const {
-    listBlockExists,
-    postContent
-  } = (0, _data.useSelect)(select => ({
-    listBlockExists: !!select(_blocks.store).getBlockType('core/list'),
-    // FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-    // Blocks can be loaded into a *non-post* block editor.
-    // eslint-disable-next-line @wordpress/data-no-store-string-literals
-    postContent: select('core/editor').getEditedPostContent()
-  }), []); // The page this block would be part of on the front-end. For performance
-  // reasons, this is only calculated when onlyIncludeCurrentPage is true.
-
-  const pageIndex = (0, _data.useSelect)(select => {
-    if (!onlyIncludeCurrentPage) {
-      return null;
-    }
+    __unstableMarkNextChangeAsNotPersistent,
+    replaceBlocks
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  /**
+   * The latest heading data, or null if the new data deeply equals the saved
+   * headings attribute.
+   *
+   * Since useSelect forces a re-render when its return value is shallowly
+   * inequal to its prior call, we would be re-rendering this block every time
+   * the stores change, even if the latest headings were deeply equal to the
+   * ones saved in the block attributes.
+   *
+   * By returning null when they're equal, we reduce that to 2 renders: one
+   * when there are new latest headings (and so it returns them), and one when
+   * they haven't changed (so it returns null). As long as the latest heading
+   * data remains the same, further calls of the useSelect callback will
+   * continue to return null, thus preventing any forced re-renders.
+   */
+
+  const latestHeadings = (0, _data.useSelect)(select => {
+    var _editorSelectors$getP;
 
     const {
       getBlockAttributes,
-      getBlockIndex,
       getBlockName,
-      getBlockOrder
-    } = select(_blockEditor.store);
-    const blockIndex = getBlockIndex(clientId);
-    const blockOrder = getBlockOrder(); // Calculate which page the block will appear in on the front-end by
-    // counting how many <!--nextpage--> tags precede it.
-    // Unfortunately, this implementation only accounts for Page Break and
-    // Classic blocks, so if there are any <!--nextpage--> tags in any
-    // other block, they won't be counted. This will result in the table
-    // of contents showing headings from the wrong page if
-    // onlyIncludeCurrentPage === true. Thankfully, this issue only
-    // affects the editor implementation.
-
-    let page = 1;
-
-    for (let i = 0; i < blockIndex; i++) {
-      const blockName = getBlockName(blockOrder[i]);
+      getClientIdsWithDescendants,
+      __experimentalGetGlobalBlocksByName: getGlobalBlocksByName
+    } = select(_blockEditor.store); // FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+    // Blocks can be loaded into a *non-post* block editor, so to avoid
+    // declaring @wordpress/editor as a dependency, we must access its
+    // store by string. When the store is not available, editorSelectors
+    // will be null, and the block's saved markup will lack permalinks.
+    // eslint-disable-next-line @wordpress/data-no-store-string-literals
 
-      if (blockName === 'core/nextpage') {
-        page++;
-      } else if (blockName === 'core/freeform') {
-        var _getBlockAttributes$c;
+    const editorSelectors = select('core/editor');
+    const pageBreakClientIds = getGlobalBlocksByName('core/nextpage');
+    const isPaginated = pageBreakClientIds.length !== 0; // Get the client ids of all blocks in the editor.
+
+    const allBlockClientIds = getClientIdsWithDescendants(); // If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
 
-        // Count the page breaks inside the Classic block.
-        const pageBreaks = (_getBlockAttributes$c = getBlockAttributes(blockOrder[i]).content) === null || _getBlockAttributes$c === void 0 ? void 0 : _getBlockAttributes$c.match(/<!--nextpage-->/g);
+    let tocPage = 1;
 
-        if (pageBreaks !== null && pageBreaks !== undefined) {
-          page += pageBreaks.length;
+    if (isPaginated && onlyIncludeCurrentPage) {
+      // We can't use getBlockIndex because it only returns the index
+      // relative to sibling blocks.
+      const tocIndex = allBlockClientIds.indexOf(clientId);
+
+      for (const [blockIndex, blockClientId] of allBlockClientIds.entries()) {
+        // If we've reached blocks after the Table of Contents, we've
+        // finished calculating which page the block is on.
+        if (blockIndex >= tocIndex) {
+          break;
+        }
+
+        if (getBlockName(blockClientId) === 'core/nextpage') {
+          tocPage++;
         }
       }
     }
 
-    return page;
-  }, [clientId, onlyIncludeCurrentPage]);
-  (0, _element.useEffect)(() => {
-    let latestHeadings;
+    const _latestHeadings = [];
+    /** The page (of a paginated post) a heading will be part of. */
 
-    if (onlyIncludeCurrentPage) {
-      const pagesOfContent = postContent.split('<!--nextpage-->');
-      latestHeadings = (0, _utils.getHeadingsFromContent)(pagesOfContent[pageIndex - 1]);
-    } else {
-      latestHeadings = (0, _utils.getHeadingsFromContent)(postContent);
+    let headingPage = 1;
+    /**
+     * A permalink to the current post. If the core/editor store is
+     * unavailable, this variable will be null.
+     */
+
+    const permalink = (_editorSelectors$getP = editorSelectors === null || editorSelectors === void 0 ? void 0 : editorSelectors.getPermalink()) !== null && _editorSelectors$getP !== void 0 ? _editorSelectors$getP : null;
+    let headingPageLink = null; // If the core/editor store is available, we can add permalinks to the
+    // generated table of contents.
+
+    if (typeof permalink === 'string') {
+      headingPageLink = isPaginated ? (0, _url.addQueryArgs)(permalink, {
+        page: headingPage
+      }) : permalink;
     }
 
-    if (!(0, _lodash.isEqual)(headings, latestHeadings)) {
-      setHeadings(latestHeadings);
-      setHeadingTree((0, _utils.linearToNestedHeadingList)(latestHeadings));
+    for (const blockClientId of allBlockClientIds) {
+      const blockName = getBlockName(blockClientId);
+
+      if (blockName === 'core/nextpage') {
+        headingPage++; // If we're only including headings from the current page (of
+        // a paginated post), then exit the loop if we've reached the
+        // pages after the one with the Table of Contents block.
+
+        if (onlyIncludeCurrentPage && headingPage > tocPage) {
+          break;
+        }
+
+        if (typeof permalink === 'string') {
+          headingPageLink = (0, _url.addQueryArgs)((0, _url.removeQueryArgs)(permalink, ['page']), {
+            page: headingPage
+          });
+        }
+      } // If we're including all headings or we've reached headings on
+      // the same page as the Table of Contents block, add them to the
+      // list.
+      else if (!onlyIncludeCurrentPage || headingPage === tocPage) {
+        if (blockName === 'core/heading') {
+          const headingAttributes = getBlockAttributes(blockClientId);
+          const canBeLinked = typeof headingPageLink === 'string' && typeof headingAttributes.anchor === 'string' && headingAttributes.anchor !== '';
+
+          _latestHeadings.push({
+            content: (0, _dom.__unstableStripHTML)(headingAttributes.content),
+            level: headingAttributes.level,
+            link: canBeLinked ? `${headingPageLink}#${headingAttributes.anchor}` : null
+          });
+        }
+      }
     }
-  }, [pageIndex, postContent, onlyIncludeCurrentPage]);
-  const {
-    replaceBlocks
-  } = (0, _data.useDispatch)(_blockEditor.store);
+
+    if ((0, _lodash.isEqual)(headings, _latestHeadings)) {
+      return null;
+    }
+
+    return _latestHeadings;
+  }, [clientId, onlyIncludeCurrentPage, headings]);
+  (0, _element.useEffect)(() => {
+    if (latestHeadings !== null) {
+      // This is required to keep undo working and not create 2 undo steps
+      // for each heading change.
+      __unstableMarkNextChangeAsNotPersistent();
+
+      setAttributes({
+        headings: latestHeadings
+      });
+    }
+  }, [latestHeadings]);
+  const headingTree = (0, _utils.linearToNestedHeadingList)(headings);
   const toolbarControls = listBlockExists && (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
     onClick: () => replaceBlocks(clientId, (0, _blocks.createBlock)('core/list', {
+      ordered: true,
       values: (0, _element.renderToString)((0, _element.createElement)(_list.default, {
         nestedHeadingList: headingTree
       }))
     }))
   }, (0, _i18n.__)('Convert to static list'))));
   const inspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Table of Contents settings')
+    title: (0, _i18n.__)('Settings')
   }, (0, _element.createElement)(_components.ToggleControl, {
     label: (0, _i18n.__)('Only include current page'),
     checked: onlyIncludeCurrentPage,
@@ -157,14 +227,16 @@ function TableOfContentsEdit(_ref) {
   if (headings.length === 0) {
     return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Placeholder, {
       icon: (0, _element.createElement)(_blockEditor.BlockIcon, {
-        icon: "list-view"
+        icon: _icon.default
       }),
       label: "Table of Contents",
       instructions: (0, _i18n.__)('Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.')
     })), inspectorControls);
   }
 
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("nav", blockProps, (0, _element.createElement)("ul", null, (0, _element.createElement)(_list.default, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("nav", blockProps, (0, _element.createElement)("ol", {
+    ref: disabledRef
+  }, (0, _element.createElement)(_list.default, {
     nestedHeadingList: headingTree
   }))), toolbarControls, inspectorControls);
 }

package/build/table-of-contents/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/edit.js"],"names":["TableOfContentsEdit","attributes","onlyIncludeCurrentPage","clientId","setAttributes","blockProps","headings","setHeadings","headingTree","setHeadingTree","listBlockExists","postContent","select","blocksStore","getBlockType","getEditedPostContent","pageIndex","getBlockAttributes","getBlockIndex","getBlockName","getBlockOrder","blockEditorStore","blockIndex","blockOrder","page","i","blockName","pageBreaks","content","match","undefined","length","latestHeadings","pagesOfContent","split","replaceBlocks","toolbarControls","values","inspectorControls","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport { createBlock, store as blocksStore } from '@wordpress/blocks';\nimport {\n\tPanelBody,\n\tPlaceholder,\n\tToggleControl,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { renderToString, useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TableOfContentsList from './list';\nimport { getHeadingsFromContent, linearToNestedHeadingList } from './utils';\n\n/**\n * Table of Contents block edit component.\n *\n * @param {Object}                       props                                   The props.\n * @param {Object}                       props.attributes                        The block attributes.\n * @param {boolean}                      props.attributes.onlyIncludeCurrentPage\n *                                                                               Whether to only include headings from the current page (if the post is\n *                                                                               paginated).\n * @param {string}                       props.clientId\n * @param {(attributes: Object) => void} props.setAttributes\n *\n * @return {WPComponent} The component.\n */\nexport default function TableOfContentsEdit( {\n\tattributes: { onlyIncludeCurrentPage },\n\tclientId,\n\tsetAttributes,\n} ) {\n\tconst blockProps = useBlockProps();\n\n\t// Local state; not saved to block attributes. The saved block is dynamic and uses PHP to generate its content.\n\tconst [ headings, setHeadings ] = useState( [] );\n\tconst [ headingTree, setHeadingTree ] = useState( [] );\n\n\tconst { listBlockExists, postContent } = useSelect(\n\t\t( select ) => ( {\n\t\t\tlistBlockExists: !! select( blocksStore ).getBlockType(\n\t\t\t\t'core/list'\n\t\t\t),\n\t\t\t// FIXME: @wordpress/block-library should not depend on @wordpress/editor.\n\t\t\t// Blocks can be loaded into a *non-post* block editor.\n\t\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\t\tpostContent: select( 'core/editor' ).getEditedPostContent(),\n\t\t} ),\n\t\t[]\n\t);\n\n\t// The page this block would be part of on the front-end. For performance\n\t// reasons, this is only calculated when onlyIncludeCurrentPage is true.\n\tconst pageIndex = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! onlyIncludeCurrentPage ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockIndex,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockOrder,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst blockIndex = getBlockIndex( clientId );\n\t\t\tconst blockOrder = getBlockOrder();\n\n\t\t\t// Calculate which page the block will appear in on the front-end by\n\t\t\t// counting how many <!--nextpage--> tags precede it.\n\t\t\t// Unfortunately, this implementation only accounts for Page Break and\n\t\t\t// Classic blocks, so if there are any <!--nextpage--> tags in any\n\t\t\t// other block, they won't be counted. This will result in the table\n\t\t\t// of contents showing headings from the wrong page if\n\t\t\t// onlyIncludeCurrentPage === true. Thankfully, this issue only\n\t\t\t// affects the editor implementation.\n\t\t\tlet page = 1;\n\t\t\tfor ( let i = 0; i < blockIndex; i++ ) {\n\t\t\t\tconst blockName = getBlockName( blockOrder[ i ] );\n\t\t\t\tif ( blockName === 'core/nextpage' ) {\n\t\t\t\t\tpage++;\n\t\t\t\t} else if ( blockName === 'core/freeform' ) {\n\t\t\t\t\t// Count the page breaks inside the Classic block.\n\t\t\t\t\tconst pageBreaks = getBlockAttributes(\n\t\t\t\t\t\tblockOrder[ i ]\n\t\t\t\t\t).content?.match( /<!--nextpage-->/g );\n\n\t\t\t\t\tif ( pageBreaks !== null && pageBreaks !== undefined ) {\n\t\t\t\t\t\tpage += pageBreaks.length;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn page;\n\t\t},\n\t\t[ clientId, onlyIncludeCurrentPage ]\n\t);\n\n\tuseEffect( () => {\n\t\tlet latestHeadings;\n\n\t\tif ( onlyIncludeCurrentPage ) {\n\t\t\tconst pagesOfContent = postContent.split( '<!--nextpage-->' );\n\n\t\t\tlatestHeadings = getHeadingsFromContent(\n\t\t\t\tpagesOfContent[ pageIndex - 1 ]\n\t\t\t);\n\t\t} else {\n\t\t\tlatestHeadings = getHeadingsFromContent( postContent );\n\t\t}\n\n\t\tif ( ! isEqual( headings, latestHeadings ) ) {\n\t\t\tsetHeadings( latestHeadings );\n\t\t\tsetHeadingTree( linearToNestedHeadingList( latestHeadings ) );\n\t\t}\n\t}, [ pageIndex, postContent, onlyIncludeCurrentPage ] );\n\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst toolbarControls = listBlockExists && (\n\t\t<BlockControls>\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tcreateBlock( 'core/list', {\n\t\t\t\t\t\t\t\tvalues: renderToString(\n\t\t\t\t\t\t\t\t\t<TableOfContentsList\n\t\t\t\t\t\t\t\t\t\tnestedHeadingList={ headingTree }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Convert to static list' ) }\n\t\t\t\t</ToolbarButton>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n\n\tconst inspectorControls = (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Table of Contents settings' ) }>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Only include current page' ) }\n\t\t\t\t\tchecked={ onlyIncludeCurrentPage }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { onlyIncludeCurrentPage: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={\n\t\t\t\t\t\tonlyIncludeCurrentPage\n\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t'Only including headings from the current page (if the post is paginated).'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'Toggle to only include headings from the current page (if the post is paginated).'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n\n\t// If there are no headings or the only heading is empty.\n\t// Note that the toolbar controls are intentionally omitted since the\n\t// \"Convert to static list\" option is useless to the placeholder state.\n\tif ( headings.length === 0 ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<Placeholder\n\t\t\t\t\t\ticon={ <BlockIcon icon=\"list-view\" /> }\n\t\t\t\t\t\tlabel=\"Table of Contents\"\n\t\t\t\t\t\tinstructions={ __(\n\t\t\t\t\t\t\t'Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{ inspectorControls }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<nav { ...blockProps }>\n\t\t\t\t<ul>\n\t\t\t\t\t<TableOfContentsList nestedHeadingList={ headingTree } />\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t\t{ toolbarControls }\n\t\t\t{ inspectorControls }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/edit.js"],"names":["TableOfContentsEdit","attributes","headings","onlyIncludeCurrentPage","clientId","setAttributes","blockProps","disabledRef","listBlockExists","select","blocksStore","getBlockType","__unstableMarkNextChangeAsNotPersistent","replaceBlocks","blockEditorStore","latestHeadings","getBlockAttributes","getBlockName","getClientIdsWithDescendants","__experimentalGetGlobalBlocksByName","getGlobalBlocksByName","editorSelectors","pageBreakClientIds","isPaginated","length","allBlockClientIds","tocPage","tocIndex","indexOf","blockIndex","blockClientId","entries","_latestHeadings","headingPage","permalink","getPermalink","headingPageLink","page","blockName","headingAttributes","canBeLinked","anchor","push","content","level","link","headingTree","toolbarControls","ordered","values","inspectorControls","value","icon"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport { createBlock, store as blocksStore } from '@wordpress/blocks';\nimport {\n\tPanelBody,\n\tPlaceholder,\n\tToggleControl,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { useDisabled } from '@wordpress/compose';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { renderToString, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { addQueryArgs, removeQueryArgs } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport icon from './icon';\nimport TableOfContentsList from './list';\nimport { linearToNestedHeadingList } from './utils';\n\n/** @typedef {import('./utils').HeadingData} HeadingData */\n\n/**\n * Table of Contents block edit component.\n *\n * @param {Object}                       props                                   The props.\n * @param {Object}                       props.attributes                        The block attributes.\n * @param {HeadingData[]}                props.attributes.headings               A list of data for each heading in the post.\n * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).\n * @param {string}                       props.clientId\n * @param {(attributes: Object) => void} props.setAttributes\n *\n * @return {WPComponent} The component.\n */\nexport default function TableOfContentsEdit( {\n\tattributes: { headings = [], onlyIncludeCurrentPage },\n\tclientId,\n\tsetAttributes,\n} ) {\n\tconst blockProps = useBlockProps();\n\tconst disabledRef = useDisabled();\n\n\tconst listBlockExists = useSelect(\n\t\t( select ) => !! select( blocksStore ).getBlockType( 'core/list' ),\n\t\t[]\n\t);\n\n\tconst {\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\treplaceBlocks,\n\t} = useDispatch( blockEditorStore );\n\n\t/**\n\t * The latest heading data, or null if the new data deeply equals the saved\n\t * headings attribute.\n\t *\n\t * Since useSelect forces a re-render when its return value is shallowly\n\t * inequal to its prior call, we would be re-rendering this block every time\n\t * the stores change, even if the latest headings were deeply equal to the\n\t * ones saved in the block attributes.\n\t *\n\t * By returning null when they're equal, we reduce that to 2 renders: one\n\t * when there are new latest headings (and so it returns them), and one when\n\t * they haven't changed (so it returns null). As long as the latest heading\n\t * data remains the same, further calls of the useSelect callback will\n\t * continue to return null, thus preventing any forced re-renders.\n\t */\n\tconst latestHeadings = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetClientIdsWithDescendants,\n\t\t\t\t__experimentalGetGlobalBlocksByName: getGlobalBlocksByName,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// FIXME: @wordpress/block-library should not depend on @wordpress/editor.\n\t\t\t// Blocks can be loaded into a *non-post* block editor, so to avoid\n\t\t\t// declaring @wordpress/editor as a dependency, we must access its\n\t\t\t// store by string. When the store is not available, editorSelectors\n\t\t\t// will be null, and the block's saved markup will lack permalinks.\n\t\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\t\tconst editorSelectors = select( 'core/editor' );\n\n\t\t\tconst pageBreakClientIds = getGlobalBlocksByName( 'core/nextpage' );\n\n\t\t\tconst isPaginated = pageBreakClientIds.length !== 0;\n\n\t\t\t// Get the client ids of all blocks in the editor.\n\t\t\tconst allBlockClientIds = getClientIdsWithDescendants();\n\n\t\t\t// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.\n\t\t\tlet tocPage = 1;\n\n\t\t\tif ( isPaginated && onlyIncludeCurrentPage ) {\n\t\t\t\t// We can't use getBlockIndex because it only returns the index\n\t\t\t\t// relative to sibling blocks.\n\t\t\t\tconst tocIndex = allBlockClientIds.indexOf( clientId );\n\n\t\t\t\tfor ( const [\n\t\t\t\t\tblockIndex,\n\t\t\t\t\tblockClientId,\n\t\t\t\t] of allBlockClientIds.entries() ) {\n\t\t\t\t\t// If we've reached blocks after the Table of Contents, we've\n\t\t\t\t\t// finished calculating which page the block is on.\n\t\t\t\t\tif ( blockIndex >= tocIndex ) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tif ( getBlockName( blockClientId ) === 'core/nextpage' ) {\n\t\t\t\t\t\ttocPage++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst _latestHeadings = [];\n\n\t\t\t/** The page (of a paginated post) a heading will be part of. */\n\t\t\tlet headingPage = 1;\n\n\t\t\t/**\n\t\t\t * A permalink to the current post. If the core/editor store is\n\t\t\t * unavailable, this variable will be null.\n\t\t\t */\n\t\t\tconst permalink = editorSelectors?.getPermalink() ?? null;\n\n\t\t\tlet headingPageLink = null;\n\n\t\t\t// If the core/editor store is available, we can add permalinks to the\n\t\t\t// generated table of contents.\n\t\t\tif ( typeof permalink === 'string' ) {\n\t\t\t\theadingPageLink = isPaginated\n\t\t\t\t\t? addQueryArgs( permalink, { page: headingPage } )\n\t\t\t\t\t: permalink;\n\t\t\t}\n\n\t\t\tfor ( const blockClientId of allBlockClientIds ) {\n\t\t\t\tconst blockName = getBlockName( blockClientId );\n\t\t\t\tif ( blockName === 'core/nextpage' ) {\n\t\t\t\t\theadingPage++;\n\n\t\t\t\t\t// If we're only including headings from the current page (of\n\t\t\t\t\t// a paginated post), then exit the loop if we've reached the\n\t\t\t\t\t// pages after the one with the Table of Contents block.\n\t\t\t\t\tif ( onlyIncludeCurrentPage && headingPage > tocPage ) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( typeof permalink === 'string' ) {\n\t\t\t\t\t\theadingPageLink = addQueryArgs(\n\t\t\t\t\t\t\tremoveQueryArgs( permalink, [ 'page' ] ),\n\t\t\t\t\t\t\t{ page: headingPage }\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// If we're including all headings or we've reached headings on\n\t\t\t\t// the same page as the Table of Contents block, add them to the\n\t\t\t\t// list.\n\t\t\t\telse if (\n\t\t\t\t\t! onlyIncludeCurrentPage ||\n\t\t\t\t\theadingPage === tocPage\n\t\t\t\t) {\n\t\t\t\t\tif ( blockName === 'core/heading' ) {\n\t\t\t\t\t\tconst headingAttributes = getBlockAttributes(\n\t\t\t\t\t\t\tblockClientId\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst canBeLinked =\n\t\t\t\t\t\t\ttypeof headingPageLink === 'string' &&\n\t\t\t\t\t\t\ttypeof headingAttributes.anchor === 'string' &&\n\t\t\t\t\t\t\theadingAttributes.anchor !== '';\n\n\t\t\t\t\t\t_latestHeadings.push( {\n\t\t\t\t\t\t\tcontent: stripHTML( headingAttributes.content ),\n\t\t\t\t\t\t\tlevel: headingAttributes.level,\n\t\t\t\t\t\t\tlink: canBeLinked\n\t\t\t\t\t\t\t\t? `${ headingPageLink }#${ headingAttributes.anchor }`\n\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( isEqual( headings, _latestHeadings ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn _latestHeadings;\n\t\t},\n\t\t[ clientId, onlyIncludeCurrentPage, headings ]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( latestHeadings !== null ) {\n\t\t\t// This is required to keep undo working and not create 2 undo steps\n\t\t\t// for each heading change.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( { headings: latestHeadings } );\n\t\t}\n\t}, [ latestHeadings ] );\n\n\tconst headingTree = linearToNestedHeadingList( headings );\n\n\tconst toolbarControls = listBlockExists && (\n\t\t<BlockControls>\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tcreateBlock( 'core/list', {\n\t\t\t\t\t\t\t\tordered: true,\n\t\t\t\t\t\t\t\tvalues: renderToString(\n\t\t\t\t\t\t\t\t\t<TableOfContentsList\n\t\t\t\t\t\t\t\t\t\tnestedHeadingList={ headingTree }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Convert to static list' ) }\n\t\t\t\t</ToolbarButton>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n\n\tconst inspectorControls = (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Only include current page' ) }\n\t\t\t\t\tchecked={ onlyIncludeCurrentPage }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { onlyIncludeCurrentPage: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={\n\t\t\t\t\t\tonlyIncludeCurrentPage\n\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t'Only including headings from the current page (if the post is paginated).'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'Toggle to only include headings from the current page (if the post is paginated).'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n\n\t// If there are no headings or the only heading is empty.\n\t// Note that the toolbar controls are intentionally omitted since the\n\t// \"Convert to static list\" option is useless to the placeholder state.\n\tif ( headings.length === 0 ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<Placeholder\n\t\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\t\tlabel=\"Table of Contents\"\n\t\t\t\t\t\tinstructions={ __(\n\t\t\t\t\t\t\t'Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{ inspectorControls }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<nav { ...blockProps }>\n\t\t\t\t<ol ref={ disabledRef }>\n\t\t\t\t\t<TableOfContentsList nestedHeadingList={ headingTree } />\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t\t{ toolbarControls }\n\t\t\t{ inspectorControls }\n\t\t</>\n\t);\n}\n"]}

package/build/table-of-contents/index.js

@@ -11,12 +11,15 @@ var _edit = _interopRequireDefault(require("./edit"));
 
 var _icon = _interopRequireDefault(require("./icon"));
 
+var _save = _interopRequireDefault(require("./save"));
+
 /**
  * Internal dependencies
  */
 const metadata = {
   $schema: "https://schemas.wp.org/trunk/block.json",
   apiVersion: 2,
+  __experimental: true,
   name: "core/table-of-contents",
   title: "Table of Contents",
   category: "layout",
@@ -24,15 +27,21 @@ const metadata = {
   keywords: ["document outline", "summary"],
   textdomain: "default",
   attributes: {
+    headings: {
+      type: "array",
+      items: {
+        type: "object"
+      }
+    },
     onlyIncludeCurrentPage: {
       type: "boolean",
       "default": false
     }
   },
-  usesContext: ["postId"],
   supports: {
     html: false
-  }
+  },
+  example: {}
 };
 exports.metadata = metadata;
 const {
@@ -41,7 +50,8 @@ const {
 exports.name = name;
 const settings = {
   icon: _icon.default,
-  edit: _edit.default
+  edit: _edit.default,
+  save: _save.default
 };
 exports.settings = settings;
 //# sourceMappingURL=index.js.map

package/build/table-of-contents/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/index.js"],"names":["name","metadata","settings","icon","edit"],"mappings":";;;;;;;;;AAIA;;AACA;;AALA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAIO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,aADuB;AAEvBC,EAAAA,IAAI,EAAJA;AAFuB,CAAjB","sourcesContent":["/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport icon from './icon';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/index.js"],"names":["name","metadata","settings","icon","edit","save"],"mappings":";;;;;;;;;AAIA;;AACA;;AACA;;AANA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAIO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,aADuB;AAEvBC,EAAAA,IAAI,EAAJA,aAFuB;AAGvBC,EAAAA,IAAI,EAAJA;AAHuB,CAAjB","sourcesContent":["/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport icon from './icon';\nimport save from './save';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n\tsave,\n};\n"]}

package/build/table-of-contents/list.js

@@ -7,28 +7,35 @@ exports.default = TableOfContentsList;
 
 var _element = require("@wordpress/element");
 
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
 const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';
 
 function TableOfContentsList(_ref) {
   let {
     nestedHeadingList
   } = _ref;
-  return nestedHeadingList.map((childNode, index) => {
+  return (0, _element.createElement)(_element.Fragment, null, nestedHeadingList.map((node, index) => {
     const {
-      anchor,
-      content
-    } = childNode.heading;
-    const entry = anchor ? (0, _element.createElement)("a", {
+      content,
+      link
+    } = node.heading;
+    const entry = link ? (0, _element.createElement)("a", {
       className: ENTRY_CLASS_NAME,
-      href: anchor
+      href: link
     }, content) : (0, _element.createElement)("span", {
       className: ENTRY_CLASS_NAME
     }, content);
     return (0, _element.createElement)("li", {
       key: index
-    }, entry, childNode.children ? (0, _element.createElement)("ul", null, (0, _element.createElement)(TableOfContentsList, {
-      nestedHeadingList: childNode.children
+    }, entry, node.children ? (0, _element.createElement)("ol", null, (0, _element.createElement)(TableOfContentsList, {
+      nestedHeadingList: node.children
     })) : null);
-  });
+  }));
 }
 //# sourceMappingURL=list.js.map

package/build/table-of-contents/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/list.js"],"names":["ENTRY_CLASS_NAME","TableOfContentsList","nestedHeadingList","map","childNode","index","anchor","content","heading","entry","children"],"mappings":";;;;;;;;;AAAA,MAAMA,gBAAgB,GAAG,mCAAzB;;AAEe,SAASC,mBAAT,OAAsD;AAAA,MAAxB;AAAEC,IAAAA;AAAF,GAAwB;AACpE,SAAOA,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,SAAF,EAAaC,KAAb,KAAwB;AACrD,UAAM;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAsBH,SAAS,CAACI,OAAtC;AAEA,UAAMC,KAAK,GAAGH,MAAM,GACnB;AAAG,MAAA,SAAS,EAAGN,gBAAf;AAAkC,MAAA,IAAI,EAAGM;AAAzC,OACGC,OADH,CADmB,GAKnB;AAAM,MAAA,SAAS,EAAGP;AAAlB,OAAuCO,OAAvC,CALD;AAQA,WACC;AAAI,MAAA,GAAG,EAAGF;AAAV,OACGI,KADH,EAEGL,SAAS,CAACM,QAAV,GACD,wCACC,4BAAC,mBAAD;AACC,MAAA,iBAAiB,EAAGN,SAAS,CAACM;AAD/B,MADD,CADC,GAME,IARL,CADD;AAYA,GAvBM,CAAP;AAwBA","sourcesContent":["const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';\n\nexport default function TableOfContentsList( { nestedHeadingList } ) {\n\treturn nestedHeadingList.map( ( childNode, index ) => {\n\t\tconst { anchor, content } = childNode.heading;\n\n\t\tconst entry = anchor ? (\n\t\t\t<a className={ ENTRY_CLASS_NAME } href={ anchor }>\n\t\t\t\t{ content }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<span className={ ENTRY_CLASS_NAME }>{ content }</span>\n\t\t);\n\n\t\treturn (\n\t\t\t<li key={ index }>\n\t\t\t\t{ entry }\n\t\t\t\t{ childNode.children ? (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<TableOfContentsList\n\t\t\t\t\t\t\tnestedHeadingList={ childNode.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ul>\n\t\t\t\t) : null }\n\t\t\t</li>\n\t\t);\n\t} );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/list.tsx"],"names":["ENTRY_CLASS_NAME","TableOfContentsList","nestedHeadingList","map","node","index","content","link","heading","entry","children"],"mappings":";;;;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,gBAAgB,GAAG,mCAAzB;;AAEe,SAASC,mBAAT,OAIA;AAAA,MAJ8B;AAC5CC,IAAAA;AAD4C,GAI9B;AACd,SACC,qDACGA,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,IAAF,EAAQC,KAAR,KAAmB;AAC3C,UAAM;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX,QAAoBH,IAAI,CAACI,OAA/B;AAEA,UAAMC,KAAK,GAAGF,IAAI,GACjB;AAAG,MAAA,SAAS,EAAGP,gBAAf;AAAkC,MAAA,IAAI,EAAGO;AAAzC,OACGD,OADH,CADiB,GAKjB;AAAM,MAAA,SAAS,EAAGN;AAAlB,OAAuCM,OAAvC,CALD;AAQA,WACC;AAAI,MAAA,GAAG,EAAGD;AAAV,OACGI,KADH,EAEGL,IAAI,CAACM,QAAL,GACD,wCACC,4BAAC,mBAAD;AACC,MAAA,iBAAiB,EAAGN,IAAI,CAACM;AAD1B,MADD,CADC,GAME,IARL,CADD;AAYA,GAvBC,CADH,CADD;AA4BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport type { WPElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NestedHeadingData } from './utils';\n\nconst ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';\n\nexport default function TableOfContentsList( {\n\tnestedHeadingList,\n}: {\n\tnestedHeadingList: NestedHeadingData[];\n} ): WPElement {\n\treturn (\n\t\t<>\n\t\t\t{ nestedHeadingList.map( ( node, index ) => {\n\t\t\t\tconst { content, link } = node.heading;\n\n\t\t\t\tconst entry = link ? (\n\t\t\t\t\t<a className={ ENTRY_CLASS_NAME } href={ link }>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<span className={ ENTRY_CLASS_NAME }>{ content }</span>\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<li key={ index }>\n\t\t\t\t\t\t{ entry }\n\t\t\t\t\t\t{ node.children ? (\n\t\t\t\t\t\t\t<ol>\n\t\t\t\t\t\t\t\t<TableOfContentsList\n\t\t\t\t\t\t\t\t\tnestedHeadingList={ node.children }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ol>\n\t\t\t\t\t\t) : null }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}

package/build/table-of-contents/save.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = save;
+
+var _element = require("@wordpress/element");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _list = _interopRequireDefault(require("./list"));
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function save(_ref) {
+  let {
+    attributes: {
+      headings = []
+    }
+  } = _ref;
+
+  if (headings.length === 0) {
+    return null;
+  }
+
+  return (0, _element.createElement)("nav", _blockEditor.useBlockProps.save(), (0, _element.createElement)("ol", null, (0, _element.createElement)(_list.default, {
+    nestedHeadingList: (0, _utils.linearToNestedHeadingList)(headings)
+  })));
+}
+//# sourceMappingURL=save.js.map

package/build/table-of-contents/save.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/table-of-contents/save.js"],"names":["save","attributes","headings","length","useBlockProps"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIe,SAASA,IAAT,OAAmD;AAAA,MAApC;AAAEC,IAAAA,UAAU,EAAE;AAAEC,MAAAA,QAAQ,GAAG;AAAb;AAAd,GAAoC;;AACjE,MAAKA,QAAQ,CAACC,MAAT,KAAoB,CAAzB,EAA6B;AAC5B,WAAO,IAAP;AACA;;AACD,SACC,mCAAUC,2BAAcJ,IAAd,EAAV,EACC,wCACC,4BAAC,aAAD;AACC,IAAA,iBAAiB,EAAG,sCAA2BE,QAA3B;AADrB,IADD,CADD,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useBlockProps } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport TableOfContentsList from './list';\nimport { linearToNestedHeadingList } from './utils';\n\nexport default function save( { attributes: { headings = [] } } ) {\n\tif ( headings.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<nav { ...useBlockProps.save() }>\n\t\t\t<ol>\n\t\t\t\t<TableOfContentsList\n\t\t\t\t\tnestedHeadingList={ linearToNestedHeadingList( headings ) }\n\t\t\t\t/>\n\t\t\t</ol>\n\t\t</nav>\n\t);\n}\n"]}

package/build/table-of-contents/utils.js

@@ -3,84 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getHeadingsFromContent = getHeadingsFromContent;
-exports.getHeadingsFromHeadingElements = getHeadingsFromHeadingElements;
 exports.linearToNestedHeadingList = linearToNestedHeadingList;
 
-/**
- * @typedef WPHeadingData
- *
- * @property {string} anchor  The anchor link to the heading, or '' if none.
- * @property {string} content The plain text content of the heading.
- * @property {number} level   The heading level.
- */
-
-/**
- * Extracts text, anchor, and level from a list of heading elements.
- *
- * @param {NodeList} headingElements The list of heading elements.
- *
- * @return {WPHeadingData[]} The list of heading parameters.
- */
-function getHeadingsFromHeadingElements(headingElements) {
-  return [...headingElements].map(heading => ({
-    // A little hacky, but since we know at this point that the tag will
-    // be an H1-H6, we can just grab the 2nd character of the tag name and
-    // convert it to an integer. Should be faster than conditionals.
-    level: parseInt(heading.tagName[1], 10),
-    anchor: heading.hasAttribute('id') ? `#${heading.id}` : '',
-    content: heading.textContent
-  }));
-}
-/**
- * Extracts heading data from the provided content.
- *
- * @param {string} content The content to extract heading data from.
- *
- * @return {WPHeadingData[]} The list of heading parameters.
- */
-
-
-function getHeadingsFromContent(content) {
-  // Create a temporary container to put the post content into, so we can
-  // use the DOM to find all the headings.
-  const tempPostContentDOM = document.createElement('div');
-  tempPostContentDOM.innerHTML = content; // Remove template elements so that headings inside them aren't counted.
-  // This is only needed for IE11, which doesn't recognize the element and
-  // treats it like a div.
-
-  for (const template of tempPostContentDOM.querySelectorAll('template')) {
-    template.remove();
-  }
-
-  const headingElements = tempPostContentDOM.querySelectorAll('h1:not(:empty), h2:not(:empty), h3:not(:empty), h4:not(:empty), h5:not(:empty), h6:not(:empty)');
-  return getHeadingsFromHeadingElements(headingElements);
-}
-/**
- * @typedef WPNestedHeadingData
- *
- * @property {WPHeadingData}              heading  The heading content, anchor,
- *                                                 and level.
- * @property {number}                     index    The index of this heading
- *                                                 node in the entire nested
- *                                                 list of heading data.
- * @property {WPNestedHeadingData[]|null} children The sub-headings of this
- *                                                 heading, if any.
- */
-
 /**
  * Takes a flat list of heading parameters and nests them based on each header's
  * immediate parent's level.
  *
- * @param {WPHeadingData[]} headingList The flat list of headings to nest.
- * @param {number}          index       The current list index.
+ * @param  headingList The flat list of headings to nest.
  *
- * @return {WPNestedHeadingData[]} The nested list of headings.
+ * @return The nested list of headings.
  */
-
-
 function linearToNestedHeadingList(headingList) {
-  let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   const nestedHeadingList = [];
   headingList.forEach((heading, key) => {
     if (heading.content === '') {
@@ -89,13 +22,15 @@ function linearToNestedHeadingList(headingList) {
 
 
     if (heading.level === headingList[0].level) {
+      var _headingList;
+
       // Check that the next iteration will return a value.
       // If it does and the next level is greater than the current level,
       // the next iteration becomes a child of the current iteration.
-      if (headingList[key + 1] !== undefined && headingList[key + 1].level > heading.level) {
-        // We need to calculate the last index before the next iteration that has the same level (siblings).
-        // We then use this last index to slice the array for use in recursion.
-        // This prevents duplicate nodes.
+      if (((_headingList = headingList[key + 1]) === null || _headingList === void 0 ? void 0 : _headingList.level) > heading.level) {
+        // We must calculate the last index before the next iteration that
+        // has the same level (siblings). We then use this index to slice
+        // the array for use in recursion. This prevents duplicate nodes.
         let endOfSlice = headingList.length;
 
         for (let i = key + 1; i < headingList.length; i++) {
@@ -103,19 +38,18 @@ function linearToNestedHeadingList(headingList) {
             endOfSlice = i;
             break;
           }
-        } // We found a child node: Push a new node onto the return array with children.
+        } // We found a child node: Push a new node onto the return array
+        // with children.
 
 
         nestedHeadingList.push({
           heading,
-          index: index + key,
-          children: linearToNestedHeadingList(headingList.slice(key + 1, endOfSlice), index + key + 1)
+          children: linearToNestedHeadingList(headingList.slice(key + 1, endOfSlice))
         });
       } else {
         // No child node: Push a new node onto the return array.
         nestedHeadingList.push({
           heading,
-          index: index + key,
           children: null
         });
       }