A server-rendered Table of Contents block for WordPress.
Add one block. Get an accessible, SEO-friendly outline from your headings.
Docs · Download · Issues · GPLv2 or later
- Zero config — insert the block; the outline builds itself.
- Server-rendered — the list is in the first HTML response (SEO + screen readers).
- Accurate anchors — matching
ids are injected into headings; custom HTML anchors win. - Accessible — a
<nav>landmark, keyboard-friendly collapse,aria-currentwhile you read. - Focused — one block done well, not a block library.
- Live preview in the editor as you add or edit headings
- H1–H6 (H1 off by default), numbered or bulleted, five style presets
- Smooth scroll + offset for sticky headers (
prefers-reduced-motionrespected) - Collapse/expand, sticky outline, scroll-spy highlight
- Auto-insert (top of content or after the first heading)
[tocflow]shortcode for classic content- Skip a heading with the class
no-toc - Optional ItemList JSON-LD
- Settings + Docs & Support screens in wp-admin
The plugin slug, folder, and text domain are tocflow. Display name: TOCflow. See docs/NAMING.md.
Current version: 1.0.2.
- Download
tocflow.zipfrom Releases. - In WordPress: Plugins → Add New → Upload Plugin.
- Activate. Optional: Settings → TOCflow.
Or clone this repo into wp-content/plugins/tocflow, run npm install && npm run build, and activate.
- Edit a post that has Heading blocks.
- Insert Table of Contents (usually right after the intro).
- In the sidebar: title, heading levels, list style, preset, collapse, sticky.
[tocflow]
[tocflow title="On this page" ordered="1" style="boxed"]
| Doc | Who it is for |
|---|---|
| Support site | Users, buyers, reviewers |
| User guide | Site owners |
| Developer SOP | Contributors |
| Support policy | Buyers / WordPress.org users |
| Security · Privacy | Vulnerability reports and data handling |
| Marketplace kit | WordPress.org and CodeCanyon |
| Changelog | Release history |
| WordPress.org rules | Plugin Directory FAQ + guidelines |
Requires Node.js 20+ (see .nvmrc).
git clone https://github.com/matthummel-pa/tocflow.git
cd tocflow
npm install
npm run start # watch
# npm run build # production
npm run lint:js
npm run lint:css
npx --package=@wordpress/env wp-env start # optional local WordPressThe compiled build/ directory is gitignored — build at least once before activating the plugin.
PHP: composer install then composer phpcs. See docs/DEVELOPER_SOP.md and CONTRIBUTING.md.
GPLv2 or later — the whole plugin (PHP, JavaScript, CSS, and images), same family as WordPress.
Copyright © 2026 Matt Hummel.