选项卡

以选项卡界面显示内容，帮助用户轻松导航详细的内容。

• 名称： core/tabs
• 类别： 设计
• API 版本： 3
• 块类型： 混合（静态保存 + 服务器增强）

块关系

允许的内部块：
– core/tab-list
– core/tab-panels

属性

通过 block.json 中的 attributes 属性定义。

支持

通过 block.json 中的 supports 属性定义。

• align：true
• anchor：true
• background:
  • backgroundImage：true
  • backgroundSize：true
  • gradient：true
• color:
  • text：true
  • background：true
  • heading：true
  • button：true
  • link：true
• layout:
  • allowEditing：false
• html：false
• interactivity：true
• spacing:
  • blockGap：true
  • margin：true
  • padding：true
• dimensions:
  • minWidth：true
• shadow：true
• typography:
  • fontSize：true
  • lineHeight：true

上下文

通过 block.json 中的 usesContext 和 providesContext 属性定义。

使用的上下文：

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

块标记

这是一个 混合块。它保存静态标记，服务器在渲染期间可能会对其进行增强。

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

<!-- wp:tab-panels -->
<div class="wp-block-tab-panels"><!-- wp:tab-panel {"label":"选项卡 1"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p>面板 1</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel -->

<!-- wp:tab-panel {"label":"选项卡 2"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p>面板 2</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel --></div>
<!-- /wp:tab-panels --></div>
<!-- /wp:tabs -->

来源

• block.json (参考)
• 源代码目录 — 浏览 edit 和 save 源文件、index.php 等。