Blog · Gutenberg
Table of Contents block for WordPress
Auto-generated table of contents from headings on the page, with smooth scroll and active-link highlighting.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Auto-generated table of contents from headings on the page, with smooth scroll and active-link highlighting.
Inspector panels on this block: Heading Levels, Behaviour, Size & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “List Style” options: None, Bullets, Numbers.
Where to find it
Gutenberg inserter → Blog → search “Table of Contents” (block name `blockenberg/table-of-contents` in block.json). Style it in the sidebar after insert.
How to use Table of Contents block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Table of Contents”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Heading Levels. Set “H2”, “H3”, “H4”, “H5”.
- Check the published page. The view script reads HTML data attributes: data-collapsed, data-include, data-indent, data-list-style, data-max-height, data-offset, data-smooth. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| H2 | On/off toggle in the inspector. On by default. Saved as `includeH2`. |
| H3 | On/off toggle in the inspector. On by default. Saved as `includeH3`. |
| H4 | On/off toggle in the inspector. Off by default. Saved as `includeH4`. |
| H5 | On/off toggle in the inspector. Off by default. Saved as `includeH5`. |
| H6 | On/off toggle in the inspector. Off by default. Saved as `includeH6`. |
| TOC Title | Text field in the inspector. block.json default: Table of Contents. Saved as `tocTitle`. |
| Collapsible | On/off toggle in the inspector. On by default. Saved as `collapsible`. |
| Collapsed by Default | On/off toggle in the inspector. Off by default. Saved as `defaultCollapsed`. |
| Smooth Scroll | On/off toggle in the inspector. On by default. Saved as `smoothScroll`. |
| Scroll Offset (px) — for fixed headers | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `scrollOffset`. |
| Sticky Position | On/off toggle in the inspector. Off by default. Saved as `sticky`. |
| Indent Nested Levels | On/off toggle in the inspector. On by default. Saved as `indentNested`. |
| List Style | Select control; the chosen value is saved on the block. Options: None; Bullets; Numbers. block.json default: none. Saved as `listStyle`. |
| Max Width (0 = full) | Numeric range control in the inspector. Range 0–900. block.json default: 0. Saved as `maxWidth`. |
| Max Height — scroll inside (0 = none) | Numeric range control in the inspector. Range 0–800. block.json default: 0. Saved as `maxHeight`. |
| Padding (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `padding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `borderRadius`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-collapsed, data-include, data-indent, data-list-style, data-max-height, data-offset, data-smooth.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Auto-generated table of contents from headings on the page, with smooth scroll and active-link highlighting — that is the job of Table of Contents, not a generic content block.
- Use it when you need the editor control labeled “H2”, which exists on this block’s inspector.
- It matches pages about toc, table of contents, navigation.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Table of Contents block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Table of Contents”. It sits under Blog. After insert, open Heading Levels and set “H2”, “H3”, “H4”, “H5”.
What makes Table of Contents different from other Blockenberg blocks?
Auto-generated table of contents from headings on the page, with smooth scroll and active-link highlighting. Inspector labels on this block include “H2”, “H3”, “H4”, “H5”.
Is the Table of Contents Gutenberg block free?
Yes. Table of Contents ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Table of Contents to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Heading Levels, Behaviour, Size & Layout).
Related blog blocks
Chapter Navigation
Multi-part guide and series navigation with progress, prev/next, and chapter list.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Glossary
A–Z alphabetical glossary / dictionary with a clickable alphabet navigation bar, terms grouped by first letter, and expandable or always-visible definitions.
Taxonomy List
Display categories, tags or custom taxonomy as a styled list, grid, chips or cards — with icons, counts and links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Table of Contents from the Gutenberg inserter.