Table Of Contents – Gutenberg Blocks

This block allows access to large contents of the post/page through the heading of the contents. This makes it easier for visitors to directly go to the specific section on the page or the post.

How To Add The Table Of Contents Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Table Of Contents or you can search for it if it doesn’t pop up quickly for you.

How To Configure The Table Of Contents Block #

To configure the Table Of Contents block, switch to the ‘Content’ tab.

General #

• Header Layout – You can choose Fill or Outline design from here.
• Header Alignment – Aligns the content of header to left, center or right.
• Table Type – Choose the way you want to display the content inside the table. Following options are available for this setting:
  • Ordered
  • Unordered
• Order List Type – This setting is enabled upon selecting the table type as ordered. Following options are available for this setting:
  • None
  • Number
  • Uppercase Letters
  • Lowercase Letters

• Select Headings – Choose which headings should be allowed in the hierarchy of the table of contents.
• Section HTML Tag – This can be used to select the parent HTML tag for the block, depending on the placement of the block on the website.

Smooth Scroll #

You can choose to enable the smooth scroll option.

Scroll offset– Using this option you can set the scroll offset as per your choice.

Background #

You can select a background type for the block from here. The options available are:

• Color
• Image
• Video

How To Style The Table Of Contents Block #

Switch to the ‘Style’ tab to customize every element of the Table Of Contents block.

Heading #

• Color Settings – Select the colors of text & background of the heading for Normal and Hover states.

• Typography – Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Heading.

• Padding – Set the padding of the heading separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.

• Margin – Set the margin of the heading separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.

• Border – Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
• Border Width: Set a width for the border from here.
• Border Color: You can give color to the border from here.
• Border Radius: You can give border-radius to the box from here.

Collapsible #

Enabling collapsible content will display a dropdown icon beside the header title, which allows you to hide or show content.

Body #

• Color Settings – Select the colors of text & background of the body for Normal and Hover states.
• Typography – Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Body.
• Padding – Set the padding of the body separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.
• Margin – Set the margin of the body separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.
• Border – Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
• Border Width: Set a width for the border from here.
• Border Color: You can give color to the border from here.
• Border Radius: You can give border-radius to the box from here.

Advanced #

Following Settings gets applied to the whole block.

• Spacing – This allows you to set the width of the block.
• Padding – The Padding tab offers options to customize the padding of the block separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.
• Margin – The Margin tab offers options to customize the margin of the block separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.
• Border – Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
• Border Width: Set a width for the border from here.
• Border Color: You can give color to the border from here.
• Border Radius: You can give border-radius to the box from here.
• Z Index – Set z index for the table of contents.