suppress

<p>Add the <strong>Table of Contents Block</strong> anywhere in your Gutenberg editor. It scans H2–H6 headings in the post content and builds a nested, clickable table of contents. Links automatically work by adding IDs to headings.</p>
<p>No configuration needed. Works on single posts and pages (not archives or category listings).</p>
<ul>
<li>No theme editing required<br />
You can activate the plugin on any site.</li>
<li>Compatible with Gutenberg / Classic Editor<br />
It processes the final rendered HTML.</li>
<li>SEO-friendly<br />
IDs are based on sanitize_title(), the same function WP uses for slugs.</li>
<li>Works with headings that already have IDs<br />
It does not overwrite existing IDs.</li>
</ul>
<p><strong>Example:</strong><br />
– Structure Your Content – Write your post or page using semantic headings (H2, H3, etc.)—just like you normally would.<br />
– Insert the Table of Contents Block – Add the “Table of Contents Block” anywhere in your editor (e.g., right after the introduction).<br />
– Let It Work Automatically – The plugin scans your headings, builds a hierarchical, scroll-linked table of contents in real time, and updates dynamically as you edit.</p>
<h3>Key Features</h3>
<ul>
<li>Server-side generated Table of Contents</li>
<li>Automatically detects H2–H6 headings</li>
<li>Generates nested lists based on heading hierarchy</li>
<li>Automatically adds IDs to headings when missing</li>
<li>Lightweight and simple</li>
<li>Useful for:
<ul>
<li>Adding a Table of Contents to a post or page</li>
<li>Generating heading IDs</li>
<li>Linking to sections within content</li>
</ul>
</li>
</ul>
<h3>Why use this plugin?</h3>
<ul>
<li>Smart Parsing: Supports H2 through H6 headings</li>
<li>Clean Output: Uses standard HTML lists for maximum theme compatibility</li>
<li>Non-intrusive: Does not modify existing heading IDs</li>
<li>Lightweight & Fast</li>
</ul>


Supplyist TOC Block

A simple Gutenberg block that automatically generates a nested table of contents from post headings.

Robert

<p>TOC Builder by RobertIvan is a Table of Contents plugin that automatically generates a navigation menu from your content’s headings. It includes an admin interface for configuration and is suitable for long-form content, documentation sites, and blogs.</p>
<h4>Core Features</h4>
<ul>
<li><strong>Auto-Detection</strong> – Automatically scans content for headings (H1-H6)</li>
<li><strong>Smooth Scroll</strong> – Animated scrolling to sections</li>
<li><strong>SpyScroll</strong> – Highlights the current section in the TOC while scrolling</li>
<li><strong>Gutenberg Ready</strong> – Includes a native block with live preview in the editor</li>
<li><strong>Configurable</strong> – Customize position, colors, heading levels, and more</li>
<li><strong>Performance</strong> – Assets loading and caching optimized</li>
<li><strong>Responsive</strong> – Compatible with desktop, tablet, and mobile devices</li>
</ul>
<h4>Admin Interface</h4>
<p>TOC Builder by RobertIvan features an admin settings page for configuration:</p>
<p><strong>Design System</strong></p>
<ul>
<li>Gradient color scheme</li>
<li>Animations and transitions</li>
<li>Card-based layout</li>
<li>System typography</li>
</ul>
<p><strong>WordPress Sidebar Menu Structure</strong></p>
<ul>
<li>Dedicated Sidebar Menu – Menu in WordPress sidebar with a custom icon</li>
<li>General Settings – Core TOC functionality with live preview</li>
<li>Appearance Settings – Visual customization options (coming soon)</li>
<li>Advanced Settings – Options for developers (coming soon)</li>
<li>Premium Features – Planned functionality</li>
<li>Bookmarkable URLs – Direct URLs for each section</li>
</ul>
<p><strong>User Experience</strong></p>
<ul>
<li>Live Preview – Preview updates based on selected heading levels</li>
<li>Heading Selection – Click on heading boxes (H1-H6) to toggle selection</li>
<li>Visual Hierarchy – Preview shows TOC structure based on heading selections</li>
<li>Interactive Demo – Collapsible TOC preview with hide/show functionality</li>
<li>Visual Feedback – Checkboxes with gradient backgrounds when selected</li>
<li>2-Column Layout – Settings on left, sticky live preview on right (desktop)</li>
<li>Responsive Design – Stacked layout on smaller screens</li>
</ul>
<h4>Future Architecture</h4>
<p>The admin interface is designed to accommodate upcoming features:</p>
<ul>
<li>Custom color schemes and typography options</li>
<li>Advanced CSS customization</li>
<li>Performance optimization controls</li>
<li>Analytics and tracking capabilities</li>
<li>Pre-built design templates</li>
<li>Multi-language support infrastructure</li>
</ul>
<h4>Suitable For</h4>
<ul>
<li>Long-form blog posts and articles</li>
<li>Documentation and knowledge bases</li>
<li>Educational content and tutorials</li>
<li>Product guides and manuals</li>
<li>Any content with multiple headings</li>
</ul>
<h3>Technical Details</h3>
<h4>File Structure</h4>
<p>toc-master/<br />
├── assets/<br />
│   ├── css/<br />
│   │   ├── style.css              (Frontend TOC styles)<br />
│   │   └── admin-premium.css      (Admin interface styles)<br />
│   └── js/<br />
│       ├── script.js              (Frontend functionality)<br />
│       ├── admin-settings.js      (Admin interface interactions)<br />
│       └── block.js               (Gutenberg block)<br />
├── includes/<br />
│   ├── class-toc-generator.php    (Core TOC generation logic)<br />
│   ├── class-toc-settings.php     (Settings page with UI)<br />
│   └── class-toc-block.php        (Gutenberg block registration)<br />
└── toc-builder.php                (Main plugin file)</p>
<h4>Admin Interface Architecture</h4>
<p>The settings pages use a component-based architecture:</p>
<ul>
<li>CSS Design System – CSS custom properties, modular components, responsive breakpoints</li>
<li>WordPress Sidebar Navigation – Individual pages for each settings section</li>
<li>Live Preview System – TOC rendering with dynamic heading selection</li>
</ul>
<h4>Color Palette</h4>
<p>Primary Colors:<br />
* Primary Gradient: #4F46E5 <span aria-hidden="true" class="wp-exclude-emoji">→</span> #7C3AED<br />
* Accent Cyan: #06B6D4<br />
* Accent Purple: #A855F7</p>
<p>Neutral Colors:<br />
* Gray Scale: #F1F5F9 <span aria-hidden="true" class="wp-exclude-emoji">→</span> #0F172A<br />
* Success: #10B981<br />
* Warning: #F59E0B</p>
<h3>Support</h3>
<p>For support, feature requests, and bug reports, please visit the plugin’s support forum on WordPress.org.</p>
<h3>Credits</h3>
<p>Developed with ❤️ for the WordPress community.</p>


TOC Builder by RobertIvan

A Table of Contents generator for WordPress with admin interface.

Supplyist TOC Block vs TOC Builder by RobertIvan