Tab List

Display the tab buttons for a tabbed interface.

• Name: core/tab-list
• Category: design
• API Version: 3
• Block Type: Hybrid (static save + server enhancements)

Block Relationships

Parent blocks (direct):
– core/tabs

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• html: false
• ariaLabel: true
• visibility: false
• lock: false
• background:
  • backgroundImage: true
  • backgroundSize: true
  • gradient: true
• color:
  • background: true
  • text: true
• typography:
  • fontSize: true
  • lineHeight: true
• layout:
  • default: {"type":"flex","flexWrap":"wrap"}
  • allowVerticalAlignment: false
  • allowOrientation: false
  • allowWrap: false
• spacing:
  • padding: true
  • blockGap: true
• shadow: true

Context

Defined via the usesContext and providesContext properties in block.json.

Uses context:

• core/tabs-list

CSS Selectors

Defined via the selectors property in block.json.

• background: .wp-block-tab-list button
• border: .wp-block-tab-list button
• shadow: .wp-block-tab-list button
• color:
  • background: .wp-block-tab-list button
  • text: .wp-block-tab-list button
• spacing:
  • padding: .wp-block-tab-list button

Block Markup

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

<!-- wp:tab-list -->
<div role="tablist" class="wp-block-tab-list"><button type="button" role="tab">Tab 1</button><button type="button" role="tab">Tab 2</button></div>
<!-- /wp:tab-list -->

Source

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