Accordion Item

Wraps the heading and panel in one unit.

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

Block Relationships

Parent blocks (direct):
– core/accordion

Allowed inner blocks:
– core/accordion-heading
– core/accordion-panel

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• html: false
• color:
  • background: true
  • gradients: true
• interactivity: true
• spacing:
  • margin: ["top","bottom"]
  • padding: true
  • blockGap: true
• shadow: true
• layout:
  • allowEditing: false
• typography:
  • fontSize: true
  • lineHeight: true
• contentRole: true

Context

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

Provides context:

• core/accordion-open-by-default → attribute openByDefault

Block Markup

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

<!-- 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 -->

Source

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