How to Add a Summary / Table of Contents Block in Gutenberg

If the posts in your site have multiple text sections and multiple headings, it makes sense to have a table of contents detailing the structure of your information. This makes it easy to navigate through the post with the help of a navigation menu.

The Summary Block in PublishPress Blocks provides this functionality through a list of links, each one pointing to the corresponding heading of the post. 

Keep reading to learn how to achieve this setup!

Step #1. Install the PublishPress Blocks Plugin

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Create a Post

Now let's create a post for our Summary block:

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” symbol to add a block or type “/”.
  • Search for the Summary block.
200813 Adv Summary 001
200813 Adv Summary 001

The inserted block will display a message: “Your current post/page has no headings. Try to add some headings and update this block later”. This tutorial starts from an empty post.

200813 Adv Summary 002
200813 Adv Summary 002

Step #3. The Post Structure

  • Write a post with the following content Structure:
1. Languages (H2)
1.1. HTML (H3)
1.2. CSS (H3)
1.3. JavaScript (H3)
1.3.1. jQuery (H4)
2. Browsers (H2)
2.1. Chrome (H3)
2.2. Firefox (H3)
2.3. Opera (H3)

Once you have finished with the post structure, let's continue …

  • Scroll up to the Summary block and click Update.
200813 Adv Summary 003
200813 Adv Summary 003

You will see a nicely indented list with all the headings and subheadings in the post. On top of the block is the alignment setting and the “refresh” button, to preview your changes, each time you add a new heading (section) to your article.

  • Toggle the Load minimized option on.
200813 Adv Summary 004
200813 Adv Summary 004
  • Add a proper title.

You can change the default color of the links if you want.

200813 Adv Summary 005
200813 Adv Summary 005
  • Click Publish twice and view the post.

The table of contents will appear collapsed on top of the post. If you click on the title, the list will display with a very nice animation. 

200813 Adv Summary 006
200813 Adv Summary 006

Step #4. The Global Settings

Every block in PublishPress Blocks has individual settings. You can also choose global settings for all the blocks of a particular type.

  • Click Adv Gutenberg in your WordPress admin menu.
  • Click the cogwheel beside the Summary block.
200813 Adv Summary 007
200813 Adv Summary 007

You can configure the default options for the summary block here. That way you will always have the same configuration across all summary blocks on your site, instead of configuring it on a per-block basis. 

200813 Adv Summary 008
200813 Adv Summary 008

I hope you liked this tutorial. For more on Table of Contents options, check this guide.

If you liked this feature, you enjoy other PublishPress Blocks including the accordion block, image slider block, testimonials display and count up block. There are also many useful extra features such as the ability to vertically align tables.

Leave a Reply

Your email address will not be published. Required fields are marked *