Accordion

Displays a foldable layout that groups content in collapsible sections.

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

Block Relationships

Allowed inner blocks:
– core/accordion-item

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• anchor: true
• html: false
• align: "wide", "full"
• background:
  • backgroundImage: true
  • backgroundSize: true
  • gradient: true
• color:
  • background: true
  • gradients: 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

Context

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

Provides context:

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

Block Markup

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

<!-- 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">Accordion 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>Accordion  Panel Content</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:accordion-panel -->
    </div>
    <!-- /wp:accordion-item -->
</div>
<!-- /wp:accordion -->

Source

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