/ Tools

Accordion

A versatile accordion block that can show and hide any type of child content.

Version 0.4.0

Download
GitHub

Demo

Documentation

An accordion is a UX pattern that groups a set of related sections of content into Headers and expandable Panels containing content. They serve to reduce the amount of information presented at once, preventing long scrolls and allowing users to focus on a single section of information.

Some benefits of using this particular block implementation include:

  • User can style the Header and Panel separately, while still maintaining the accessibility and semantic requirements of an accordion.
  • Allows configuration of which items are open by default, if the drawers autoclose when another item is opened, and the icon.
  • Uses the WordPress Interactivity API and tag processor to handle interactivity in the front-end, without needing to load extra client side JS.
  • HTML semantics and WCAG authoring best practices are followed.

As of v0.4.0, the Accordion Block consists of four separate but interrelated blocks:

  • Accordion Group
    • Accordion Item
      • Header
      • Panel
Block NameBlock SupportsAttributesAllowed Child Blocks
Accordion GroupBackground
Border
Color
Spacing
Typography
Shadow		autoclose (bool)
allowedBlocks (array)		Accordion Item
Accordion ItemBorder
Color
Spacing
Shadow		openByDefault (boolean)Accordion Header
Accordion Panel
Accordion HeaderBorder
Color
Spacing
Shadow
Typography		icon (string, boolean)
iconPosition (string)
level (number)
levelOptions (array)
title (rich-text)
textAlignment (string)		None
Accordion PanelBorder
Color
Spacing
Shadow
Typography		allowedBlocks (array)
templateLock (string, boolean)
openByDefault (boolean)
isSelected (boolean)		All