This is a unique block that allows you to automatically create a Table of Contents in the Gutenberg editor. After you add the block to the page or post, all your headings will be listed here.
This document will show you how to set up and use the Table of Contents block.
Set Up Table of Contents
This is a unique block that allows creating a Table of Contents automatically in the Gutenberg editor. You just need to add the block and select heading tags that need to be listed in the table.
A table of Content helps the user with a clear picture or an overview of what to expect in any particular post or page.
Looking to take a quick look or would like to see it in action click here.
It will help you ease the process of adding a table of contents, with having a need to add headings from your post and linking them manually.
So let’s see how you can achieve this with just a few clicks and some basic styling to get started with the block and see it in action –
Add Table of Content
You can find the Table of Contents block just like any other block in Gutenberg Editor, refer the below screencast –
The next step would be to add content having relevant Heading tags from H1 to H6.
You will automatically start seeing the Headings in the Table of Contents.
From the title of the Table of Contents to the styling, you can manage every aspect with little to no effort.
Update the Title and Style the Table
By default, you will see the Title as a Table of Contents, you can update it to something else as per your requirement. Like – “How to Setup your Website in 5 Easy Steps” or any other title based on the content on that page or post.
General Settings of Table of Contents
Under General settings, you can choose heading tags to generate a table.
You can also align the overall table of contents, title, list of headings, columns, and gap between the lists.
You can set the marker view to either Bullets or Numbers.
Apart from that, you can also manage smooth scrolling from the settings under the Scroll Settings option. Or even you can add a Scroll to Top button which will be displayed on the bottom-right of the page.
Refer to the below screencast to locate these settings –
Style Your Table of Contents
Under the Style module, you can set the background color, and border to your table of contents. You can also set the typography, and color for the title, and the list when it is normal and hovered.
Isn’t that super easy now?
Go ahead and try this block with the Version 1.13.0 of Spectra in your Gutenberg Editor. 🙂