Table of Contents

Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here.

• Name: core/table-of-contents
• Category: design
• API Version: 3
• Block Type: Hybrid (static save + server enhancements)
• Keywords: document outline, summary

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• anchor: true
• ariaLabel: true
• html: false
• color:
  • text: true
  • background: true
  • gradients: true
  • link: true
• spacing:
  • margin: true
  • padding: true
• typography:
  • fontSize: true
  • lineHeight: true
• interactivity:
  • clientNavigation: true

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

<!-- wp:table-of-contents {"headings":[{"content":"Heading text","level":2,"link":"#heading-id-1"},{"content":"A sub-heading","level":3,"link":"#heading-id-2"}]} -->
<nav class="wp-block-table-of-contents"><ol><li><a class="wp-block-table-of-contents__entry" href="#heading-id-1">Heading text</a><ol><li><a class="wp-block-table-of-contents__entry" href="#heading-id-2">A sub-heading</a></li></ol></li></ol></nav>
<!-- /wp:table-of-contents -->

Source

• block.json (reference)
• Source directory — browse edit.js, save.js, index.php, and more.