手风琴

显示一个可折叠布局，将内容分组到可折叠部分中。

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

块关系

允许的内部块：
– core/accordion-item

属性

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

支持

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

• anchor: true
• html: false
• align: "wide", "full"
• background:
  • backgroundImage: true
  • backgroundSize: true
  • gradient: true
• color:
  • background: true
  • gradients: true
  • link: true
  • heading: true
  • button: true
• spacing:
  • padding: true
  • margin: ["top","bottom"]
  • blockGap: true
• shadow: true
• layout: true
• ariaLabel: true
• interactivity: true
• typography:
  • fontSize: true
  • lineHeight: true
• contentRole: true
• listView: true

上下文

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

提供上下文：

• core/accordion-icon-position → 属性 iconPosition
• core/accordion-show-icon → 属性 showIcon
• core/accordion-heading-level → 属性 headingLevel

块标记

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

<!-- wp:accordion -->
<div role="group" class="wp-block-accordion">
    <!-- wp:accordion-item -->
    <div class="wp-block-accordion-item">
        <!-- wp:accordion-heading -->
        <h3 class="wp-block-accordion-heading has-icon has-icon-right">
            <button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">手风琴标题</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
        </h3>
        <!-- /wp:accordion-heading -->
        <!-- wp:accordion-panel -->
        <div role="region" class="wp-block-accordion-panel">
            <!-- wp:paragraph -->
            <p>手风琴面板内容</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:accordion-panel -->
    </div>
    <!-- /wp:accordion-item -->
</div>
<!-- /wp:accordion -->

来源

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