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.
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.
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.
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.
- Add a proper title.
You can change the default color of the links if you want.
- 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.
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.
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.
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.
