Special Block

Table of Contents Block

The Table of Contents block for WordPress generates a clickable outline of the headings within your content. It not only improves readability and engagement, but it has added benefits for your website’s SEO.

Free Download

Learn More

Block Updates

v3.6.3 – December 28, 2022
- New: The Table of Contents block can now have a title #2346

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 1: Abstract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 2: History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 3: Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 4: Additional Thoughts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Conclusion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Styling Options

Style your block with the following inspector and toolbar options:

Hide or Show Heading Controls
Scrolling Options
Multiple Columns Option
Column Gap, Row Gap, Icon Gap, Indentation Options
List Type Options
Block Background, Size & Spacing, Borders & Shadows Options
Dynamic Content
Transform & Transition Effects
Motion Effects

Best Used With

Customize your call to action to your website’s needs with the following blocks:

Here are some other samples of our block

You may also check out how these samples were designed by checking the info box below the sample.

How to Wireframe a Website Using Gutenberg

Published on March 2, 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum nunc orci, ut sagittis magna rutrum ut. Duis malesuada sed diam id varius. Sed dictum tempus luctus. Aenean vel luctus mauris. Fusce sem risus, tempus sed felis sit amet, rutrum elementum libero. Ut euismod nisl ac sapien lobortis semper. Donec non elit at sapien convallis suscipit. Nullam maximus ipsum magna, sit amet aliquet eros fringilla a. Nulla porta enim lobortis, laoreet dui eu, euismod neque.

2-Column layout with nested Heading, Subtitle and Text on the right and a Table of Contents Block with Background on the left

How to achieve this design

Copy Block Code

Jump to the section by clicking on the section title below:

2-Column table of contents block nested inside a columns/container block with a container

How to achieve this design

Copy Block Code

Table of contents block nested inside an accordion block inside a columns/Container block with a container

How to achieve this design

Copy Block Code

What is Wireframing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Why You Should Wireframe Your Web Design Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Wireframes in Gutenberg using Stackable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Types of Wireframes

Hero Wireframes

Features List Wireframes

Call to Action Wireframes

Testimonial Wireframes

Services Wireframes

Metric Wireframes

Discover a whole new experience of web design

No matter who you are, blogger, merchant, designer, developer, we guarantee you’ll want Stackable.

SEE PRICING

TRY PREMIUM DEMO

Cookie	Duration	Description
__cfduid	1 month	The cookie is used by cdn services like CloudFare to identify individual clients behind a shared IP address and apply security settings on a per-client basis. It does not correspond to any user ID in the web application and does not store any personally identifiable information.
__fs_session	2 hours	Used by Freemius secure checkout. To enable secure online payments, licensing, fulfillment, and more. These cookies are added when a user opens the checkout. Those are essential cookies for security, fraud detection & prevention, and completion of a purchase. Here’s a link to the Freemius privacy policy and its checkout cookie policy. If you wish to opt-out of Freemius’ cookies setting please go to their cookie policy and follow their opt-out instructions.
viewed_cookie_policy	1 year	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
XSRF-TOKEN	session	Used by Freemius account dashboard. To enable secure logging in to user accounts. These cookies are added when a user opens the login page. Those are essential cookies for security, fraud detection & prevention. Here’s a link to the Freemius privacy policy and its checkout cookie policy. If you wish to opt-out of Freemius’ cookies setting please go to their cookie policy and follow their opt-out instructions.

Cookie	Duration	Description
_fbp	3 months	This cookie is set by Facebook to deliver advertisement when they are on Facebook or a digital platform powered by Facebook advertising after visiting this website.
ANONCHK	10 minutes	Used by Bing Ads. Bing is a web search engine owned and operated by Microsoft.
fr	3 months	The cookie is set by Facebook to show relevant advertisments to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook pixel or Facebook social plugin.
IDE	1 year 24 days	Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
MUID	1 year 24 days	Used by Microsoft as a unique identifier. The cookie is set by embedded Microsoft scripts. The purpose of this cookie is to synchronize the ID across many different Microsoft domains to enable user tracking.
personalization_id	2 years	This cookie is set by twitter.com. It is used integrate the sharing features of this social media. It also stores information about how the user uses the website for tracking and targeting.
SRM_B	1 year 24 days	This cookie is installed by Microsoft Bing
test_cookie	15 minutes	This cookie is set by doubleclick.net. The purpose of the cookie is to determine if the user's browser supports cookies.

Cookie	Duration	Description
_clck	1 year	Used by Microsoft Clarity. The cookie is set by embedded Microsoft Clarity scripts. The purpose of this cookie is for heatmap and session recording.
_ga	2 years	This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors.
_ga_99R5Y0M7GE	2 years	This cookie is installed by Google Analytics to store anonymized statistics
_gat_UA-115448764-1	1 minute	The cookie is used by Google Tag Manager
_gid	1 day	This cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the wbsite is doing. The data collected including the number visitors, the source where they have come from, and the pages viisted in an anonymous form.
_gid	2 years	This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors.
CLID	1 year	Used by Microsoft Clarity. The cookie is set by embedded Microsoft Clarity scripts. The purpose of this cookie is for heatmap and session recording.
MR	1 week	This cookie is installed by Microsoft Clarity
SM	session	This cookie is installed by Microsoft Clarity.

Cookie	Duration	Description
_gat	1 minute	This cookies is installed by Google Universal Analytics to throttle the request rate to limit the colllection of data on high traffic sites.
YSC	session	This cookies is set by Youtube and is used to track the views of embedded videos.

Cookie	Duration	Description
PREF*	8 months	A cookie that YouTube uses to store information such as a user’s preferred page configuration and playback preferences like autoplay, shuffle content, and player size.
VISITOR_INFO1_LIVE	8 months	A cookie that YouTube sets that measures your bandwidth to determine whether you get the new player interface or the old.

Resources

Table of Contents Block

Block Updates

Introduction

Chapter 1: Abstract

Chapter 2: History

Chapter 3: Main Content

Chapter 4: Additional Thoughts

Conclusion

Styling Options

Best Used With

Here are some other samples of our block

How to Wireframe a Website Using Gutenberg