Accordion Heading

Displays a heading that toggles the accordion panel.

• Name: core/accordion-heading
• Category: design
• API Version: 3
• Block Type: Static (saved in post content)

Block Relationships

Parent blocks (direct):
– core/accordion-item

Attributes

Defined via the attributes property in block.json.

Attribute	Type	Default	Description
openByDefault	boolean	false	—
title	rich-text	—	Source: rich-text. Selector: .wp-block-accordion-heading__toggle-title. Role: content
level	number	—	—
iconPosition	string	"right"	Enum: left, right
showIcon	boolean	true	—

Supports

Defined via the supports property in block.json.

• anchor: true
• color:
  • background: true
  • gradients: true
• align: false
• interactivity: true
• spacing:
  • padding: true
• typography:
  • fontSize: true
• shadow: true
• visibility: false
• lock: false

Context

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

Uses context:

• core/accordion-icon-position
• core/accordion-show-icon
• core/accordion-heading-level

CSS Selectors

Defined via the selectors property in block.json.

• typography:
  • letterSpacing: .wp-block-accordion-heading .wp-block-accordion-heading__toggle-title
  • textDecoration: .wp-block-accordion-heading .wp-block-accordion-heading__toggle-title

Block Markup

This is a static block. The markup is saved directly in the post content.

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

Source

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