Tabs

Display content in a tabbed interface to help users navigate detailed content with ease.

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

Block Relationships

Allowed inner blocks:
– core/tab-list
– core/tab-panels

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• align: true
• anchor: true
• color:
  • text: true
  • background: true
• layout:
  • allowEditing: false
• html: false
• interactivity: true
• spacing:
  • blockGap: true
  • margin: true
  • padding: true
• typography:
  • fontSize: true

Context

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

Uses context:

• core/tabs-list
• core/tabs-id

Block Markup

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

<!-- wp:tabs -->
<div class="wp-block-tabs"><!-- 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 -->

<!-- wp:tab-panels -->
<div class="wp-block-tab-panels"><!-- wp:tab-panel {"label":"Tab 1"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p>Panel 1</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel -->

<!-- wp:tab-panel {"label":"Tab 2"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p>Panel 2</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel --></div>
<!-- /wp:tab-panels --></div>
<!-- /wp:tabs -->

Source

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