How to Add Table of Contents with a Gutenberg Block

Updated: October 15, 2021

Navigation is an important aspect of a website. And navigation is not limited to menu. Table of contents a.k.a ToC is another navigation form which you can use if you have a long article. Adding table of contents to a long article will make it easier for your readers to navigate between sections on your article. In WordPress, there are several ways to add table of contents, depending on how you want the table of contents to be generated and where to place. If you want to manually add the table of contents to an article, using a Gutenberg block is a great option. In this post, we will show you how to add table of contents to an article using a Gutenberg block from Kadence Blocks. Kadence Blocks is a WordPress plugin that offers a set of Gutenberg blocks. There are 12 blocks offered by Kadence Blocks, including the Table of Contents.

The Table of Contents block from Kadence Blocks offers plenty of customization options. In addition to standard setting like include/exclude heading levels, you can also customize the elements of the table of contents such as the list items and title. You can set things like the typography (font family, font size, font color, and so on), background color, set the scroll offset, and so on.

How to Add Table of Contents with a Gutenberg Block Using Kadence Blocks

First and foremost, you need to install the Kadence Blocks plugin on your WordPress site. Kadence Blocks is a freemium plugin. The Table of Contents block is available on the free version so that you don’t need to spend a dime to add the table of contents. The free version of Kadence Blocks is available on WordPress.org. If you are new to WordPress, you can read this article to learn how to install a plugin. Activate the Kadence Blocks plugin right away once installed.

Next, open the post where you want to add the table of contents to in Gutenberg. Specify an area where you want to add the table of contents and add a new block and select Table of Content.

The block will generate the table of contents right after you add it. You can go to the settings panel to make the settings. Under the Block tab, there are 8 settings block you can open.

  • Allowed Headers

You can open this block to include/exclude the heading levels. You can simply switch the toggle on each heading level to include/exclude it.

  • Title Settings

You can open this block to customize the title of the table of contents. If you don’t want to use a title on your ToC, you can simply disable it. The customization options you can set include typography, text color, padding, and so on.

  • Collapsible Settings

If you want to offer your readers the ability to collapse the ToC, you can open this setting block.

  • List Settings

You can open this block to customize the list items of the ToC. You can set things like the color of the items, typography, the gap between items, link style, and so on.

  • Container Settings

Container refers to the block where the ToC lies on. You can open the Container Settings block to set the background of the ToC, padding, border width, border color, and border radius. There is also an option to add box shadow if you like it.

  • Scroll Settings

The Scroll Settings block contains setting options to enable smooth scrolling and highlight a heading when scrolling in active area.

  • Non static content

This setting block offers a setting option to search for headings in non-static content.

  • Advanced

Have CSS skills? You can open this block to add custom CSS to your ToC.

That’s it. You can update your post once done customizing the ToC.

Is there an alternative to Kadence Blocks to add table of contents using a Gutenberg block? There are some. One of which is the SimpleTOC plugin. The plugin offers a single Gutenberg block with the same functionality as the Table of Contents block belong to Kadence Blocks. However, it offers fewer customization options.

Or if your WordPress site is built with Elementor Pro, you can create a global widget out of the Table of Contents widget and use the Elementor Blocks for Gutenberg plugin to use global widget in Gutenberg. Read this article to learn more.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.