If you’ve read my tips on creating engaging blog posts, you know there are a few ways to help readers easily find the sections they’re interested in or quickly get an idea of what the post is about. One way is using a sticky navigation bar or floating menu.
Another option is an interactive table of contents, which also acts as a navigation tool. When readers click on the topics listed in the table of contents, the page automatically scrolls to that section.
Today, I’m going to show you how to create something like that on your blog posts using just Gutenberg blocks. And that’s not all! I’ll also teach you how to make the table of contents easily accessible to readers with just one click. Let’s get started!
Post Summary & Navigation
Why Use Gutenberg Blocks for TOC?
While it’s easy to just install a table of contents plugin and be done with it, I prefer creating my own for a few reasons.
- First, they often look generic and offer limited customization options. I can’t fully express my brand or style with them.
- Second, these plugins typically show only the headings, and what you write in the headings is all that appears in the table of contents. I like to use different words and phrases in the table of contents to help readers quickly understand what the post is about.
- Third, I want to keep my site lightweight by installing fewer plugins, which helps improve performance. The goal is to provide information and insights to readers quickly and easily.
Creating your own table of contents has its downsides, too, of course.
For example, manually assigning fragment identifiers and creating links can be very time-consuming, especially if you have a lot of sections or headings to link.
Another downside is that you have to build the table of contents from scratch using basic Gutenberg blocks. Gutenberg doesn’t have a specific table of contents block that you can just customize. You’ll need to use different blocks like table, paragraph, list, or group blocks to create the table of contents you have in mind.
How to Build a TOC in Gutenberg
There are plenty of ways to create a table of contents with the basic blocks in Gutenberg. To keep things simple, I’ll walk you through the basics and share a cool feature that lets readers jump back to the table of contents, no matter where they are in the article.
Here’s the good news: we don’t need to code to create a table of contents with Gutenberg. However, it’s helpful to have a basic understanding of HTML IDs and Fragment Identifiers.
Step 1
Insert a Table & Fill in With Details
Gutenberg has a Table block that helps create the structure for your table of contents. Just insert the table and add details like a brief summary of each section or topic covered in the post. You can adjust the number of rows and columns based on your content or how you want to organize the topics.
It’s important that each line or paragraph in the table matches a heading or section in the blog post. Later, we’ll turn those lines into links. When readers click on them, the page will scroll to the right section, making it easier for them to navigate the post.
The next step is to give HTML ids to the sections of your blog post that you want readers to easily find when they click on items in the table.
These sections can be anything in the editor, like headings, images, or even just a paragraph block. However, the most common blocks to assign HTML ids to are the headings.
To assign an HTML id, select a block and open its settings. Scroll down to the Advanced section and click on it to expand. You’ll see a box called “HTML Anchor.” Just type the HTML id you want to give to that block.
For example, if you have several H2 headings in your blog post, you can give each one a unique HTML id. For the first heading, you might use “first-topic,” for the second one, try “second-topic,” and for the third, you could use “third-subtopic,” and so on. Just remember, each HTML id in your blog post should be unique.
In my case, when I assign an HTML id to my headings, I simply copy the text from the heading and paste it into the HTML Anchor text box. This way, I don’t have to think about creating a custom HTML id for each heading.
Once you paste the heading text into the HTML Anchor box, it will automatically format correctly and be ready to use as a fragment identifier. For example, if your heading says “This is the First Topic,” the HTML Anchor text box will show “This-is-the-First-Topic.”
After assigning HTML ids, we’re ready to turn the text inside our table into links that, when clicked, will take us to different sections of the blog posts.
To do this, highlight the text in the table you want to turn into a link. Then, click the link icon on the toolbar. A text box will pop up where you can paste the matching HTML id as a fragment identifier, starting with a ‘#’. For example, “#This-is-the-First-Topic”. Press enter, and the text will turn into a link with the fragment identifier.
Keep doing this until every line in the table is linked to its corresponding section in the blog post. After that, the navigation feature of your table of contents should be ready to go.
It’s a good idea to test each link to make sure they scroll to the right section when clicked. If everything works, you can move on to the next step.
One thing that frustrates me when reading other blogs is how hard it is to get back to the table of contents after clicking a topic. I often have to scroll up multiple times just to see it again. Some blogs have a “scroll to top” button, but it doesn’t always take me directly to the table of contents, which is annoying.
To avoid this frustration for our readers, we can add a sticky “back to table of contents” link or button after the table of contents, so they can return with just one click. To do that:
- Add a group block right after the table of contents.
- Inside the group block, insert a paragraph block with the text “back to TOC.”
- Select the group block and go to its settings.
- Change the position option to ‘sticky’ so it stays at the top of the screen as the reader scrolls.
- Adjust the styling of the group block to make the “back to TOC” more visible.
- Set the background color to be semi-transparent or slightly visible.
- Increase the padding of the paragraph block to give it a cleaner look.
- Finally, make the paragraph block “back to TOC” a link so it navigates readers back to the table of contents when clicked. To do this, add the fragment identifier ‘#toc’ to the link and assign the HTML id ‘toc’ to the table block of the table of contents.
Good to know: To make the “back TOC” button look better like it does in this post, try using a Row block instead of a Group block, and a Buttons block instead of a Paragraph block for the link. You can adjust the padding and margin of these blocks to move things around and make your post look cleaner.
To check if the “back to table of contents” feature is working, scroll down and see if the ‘back to TOC’ button stays at the top of the screen. When you click it, the table of contents should reappear.
Also, make sure there isn’t a sticky header, as it might cause issues and prevent the feature from working properly.
Step 6
Make the Table of Contents Look Better
Once the functionality is working, make sure to style your table of contents and the sticky ‘back to TOC’ button to match your design. Adjust the colors to fit your brand, and consider making the ‘back to TOC’ button smaller so it doesn’t take up too much space in the reading area.
Important: Save TOC as a Pattern
To save time from creating the table of contents over and over, save it as a pattern along with the sticky ‘back to TOC’ button.
This way, you can quickly add the table of contents and ‘back to TOC’ feature to future blog posts by just inserting them and editing the content. You won’t need to redo the design each time—just update the text and fragment identifiers.
And don’t forget: make sure to disable the sync checkbox when saving your table of contents as a pattern!
The ‘back to TOC’ feature, however, can be saved as a pattern with sync turned on because there’s nothing to change in it unless you update the HTML id of your table of contents.
More Features & Design
If you think an interactive TOC is helpful, you’ll probably like my other design tips too. They’re not just for looks—they also help make posts easier to read and more interesting for our audience.
Check them out in my guide to designing engaging blog posts!
Love this? Pin it and share it with your friends!
