The Table of Contents Block lists the headings on a page and links to each one. While a visitor scrolls, it marks the section on screen, so they always know where they are.

Use it on long guides, documentation, handbooks, legal pages and blog posts. It reads the headings by itself, so the list stays right when you edit the page.

How to Add a Table of Contents Block

Step 1: Add the Table of Contents Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the + button to open the block inserter.
3. Search for Table of Contents under ShapeBlock Pro.
4. Insert the block where the list should appear. The editor preview shows the headings already on the page.

Step 2: Configure the Table of Contents Block

Select the block and open its settings in the right-hand sidebar. The tabs are:

• Settings: The title, which headings to list, the list view, scrolling and the toggle.
• Layout: Padding, the space between items, the indent and the height of the list.
• Style: Colours, borders and typography.
• Advanced: Spacing, background and position of the whole block, plus the shared ShapeBlock Pro options.

Settings Tab

1. Title

• Show the Title: Turn it off for a plain list. The toggle needs the title, so it goes too.
• Title: The text above the list.
• Title HTML Tag: H2 to H6 or a plain div. The block never lists its own title.

2. Headings

• Include Headings: The heading levels to list, H1 to H6. H2 and H3 are on by default.
• Exclude Selector: Headings inside this CSS selector are left out, for example .sidebar, .no-toc. A heading or block with the class sbp-toc-exclude is always left out, wherever it is.
• Content Selector: The part of the page to read, for example #content or .post-body. Leave it empty to read the content the block sits in.
• No Headings Message: Shown when the page has no headings. Leave it empty to hide the whole block then.

3. List

• List View: Bullets, Numbers (1, 1.1, 1.2), Icon or None. With Icon, choose the icon below it.
• Hierarchical: Lower headings sit indented under the heading above them. Turn it off for one flat list.

4. Scrolling

• Smooth Scroll: Glides to the heading after a click. Visitors who ask their device for less motion jump straight there.
• Mark the Current Section: Highlights the heading of the section on screen. In a list with its own scrollbar, the marked line stays in view.
• Scroll Offset: The space to leave above the heading, in pixels. Set it to about the height of a sticky header. The default is 100.

5. Toggle

• Enable the Toggle: A button beside the title opens and closes the list.
• Start Closed On: Never, All Devices, Tablet and Mobile, or Mobile. Mobile is the default, so a long list does not push the article down a phone screen.
• Button Position: End or Start of the title row.
• Open Icon and Close Icon: Your own icons for the button. Empty: an arrow.

Layout Tab

• Padding: The space inside the box. Responsive settings are available.
• Title Padding and List Padding: The space inside the title row and around the list. Handy when the title has its own background. Responsive settings are available.
• Space Under the Title: The space between the title, its line and the list.
• Space Between Items: The gap between the lines of the list.
• Indent: How far lower headings move in (with Hierarchical on).
• List Max Height: For a long list: give it a height, such as 320px, and it scrolls by itself.

Style Tab

• Box: Background or gradient, border, border radius and box shadow. Set the border width to 0 for no border.
• Title: Colour, background, line colour and width, button colour, alignment and typography.
• List Items: Colour, hover colour, current section colour, text decoration and typography.
• Marker: Colour, size and the space after it, for bullets, numbers or icons.

Advanced Tab

The Advanced tab provides spacing, background and position controls for the whole block, plus the ShapeBlock Pro extensions (Responsive, Display Conditions and Motion Effects).

Tips

• Beside a long article, put the block in a short column and turn on the Row’s sticky position, so the list stays on screen while the article scrolls.
• Several lists on one page can each use their own Content Selector.
• The list is built in the visitor’s browser from the headings on the page, and the block gives a heading without an id a new one.
• Keep headings short: they are the lines of the list.

Live demo: see the Table of Contents Block in action on the Table of Contents demo page.