Comparisons Reviews

Table of contents (Summary) Blocks: A comparison

When writing long posts, a table of contents is absolutely necessary. There are many plugins on the repo which will use the heading structure to create this summary dynamically, and add it to the posts automatically:

I would like to cover today several new blocks that offer a similar functionality to the two examples above but which work as blocks.

Summary Block by Advanced Gutenberg Blocks

This plugin has no options and it has a small glitch which makes it render HTML links inside headings, as you can see below. This bug has been fixed now.

The block has added an option to collapse the entire summary table, which is a nice addition.

Unfortunately I noticed that this block is making the editor freeze when I click on it, probably due to a conflict with some other plugin, and I had to disable it. This is what is left when the plugin is deactivated (this is also something interesting to look at):

Summary Block by Advanced Gutenberg

This plugins has some very basic settings, you can have the summary open or close and you can select the color for the links:

The plugin also adds animation to the scrolling effect, which makes for a smoother user experience.

The plugin table does require manual updating if the heading structure changes after the block has been inserted:

Here’s the block in action:

Table of Contents by GhostKit

The plugin lets your choose from a few different styles and also te select which headings are going to be used to create the table of content

Here’s the block in action:

Table of contents Block by Ultimate Blocks

This block finds a good balance between features and easy of use, I would say.

It offers the option to select de “depth” of the headings we want to use for the table of contents, enabling smooth scrolling, allowing users to collapse the table and wether the table should be open by default or not.

The a recent update of this block added multiple columns and list styles:

Here’s the block in action:

Table of contents Block by Ultimate Addons Blocks

This plugin offers the most options so far, both in terms of style and regarding functionality, including detailed styling options, “smooth scroll”, speed, offset and even a “back to top” option.

Some of these typography & layout settings include responsive options, such as the line height option seen here:

Or this option to choose the width of the container and the number of columns also device-specific:

The Typographic options are staggering as well:

Here’s the block in action:

Table of Contents by LuckyWP

I found about this block recently and recided I would update this post accordingly, as I believe this is the best summary block available ad the moment for the following reasons:

  • It has be most complete features by a LONG shot, including SEO ones.
  • It seems to be very stable.
  • It works as single purpose block, that is, is not part of a larger suite/collection of blocks.
  • The block does not preview the layout in the editor, which sounds like a limitation, but it prevents lagging issues caused by the other blocks which do offer a preview.

The settings can also be accessed directly via the block, in the editor, as seen below:

If we click on that icon we will be able to override the default “global” preferences for the summary tables on the site.

I will do an in-depth review of this plugin, but you can visit the plugin’s site here for more info.

Here’s the block in action:

Wrapping it up

If you write posts longer than 3 or 4 paragraphs you will probably to add one of these summary blocks.

For the average user, how is not too technically inclined and would like to have more control over the visuals of their summary table I would recommend Ultimate Addons Blocks.

On the other hand, for more advanced users who can do their own CSS and are more sensitive to SEO issues, specially on sites with lots of content, I would definitely use Table of Contents by LuckyWP.

3 replies on “Table of contents (Summary) Blocks: A comparison”

One issue I have with these TOC is that I have to restyle them in every post. We have a collection of Physiotherapy fact sheets and styling every TOC is getting very tiresome. Is there a way to be able to style them centrally? I tried to make the TOC a reusable block, but that was messy. Deleting the TOC in the post sometimes deleted the content of the reusable block. Therefore I abandoned this approach as well.

Do you have a solution for this problem?

Thank you for your comment, Diego. If the block doesn’t offer a “set as default styles” option, you could use a little custom CSS for this.

Which specific block is your preferred one and what styles did you need to change? If you add a question in that block’s support forum and share the link here, I’m happy to take a look.

Thanks Alvaro. I heeded your advice and installed and configured the LuckyWP Table of Contents plugin. It has an option to inherit the color scheme from the WordPress theme, which works nicely. The table of content looks nice. The automatic addition of thr TOC to posts or pages etc, which can be configured case by case, is also very handy. My problem is solved thanks to your comparison. Thank you! Cheers, Diego

Leave a Reply