I used the block as a way to get familiar with the interactivity API, experimented with a few different approaches, but I'd love to get some feedback before moving forward.
Screenshots
Editor
View
To Test
Check out the PR into your plugins directory, build it (npm i && npm run build), and activate the plugin.
Verify the block is working generally working as expected.
To-Do
[ ] Enable a setting for only one accordion item to be open at a time
[ ] Enable "Open by default" setting
[ ] Editor: show content only when item is selected or when "Open by default" is toggled on
[ ] Add a setting for the icon size
[ ] Add animation transition settings
[ ] Increase button hit area while still allowing for padding controls to work
[x] Add default icon behavior
[x] Add a few icon options
[x] Enable alignment
[x] Add default animation transition that respects users motion preferences
[x] Add polyfill for latest react runtime
[x] Allow heading spacing to be adjusted via block space
About An accordion is a common UX pattern with specific semantics. I based this block's structure and markup on a few examples:
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ https://designsystem.digital.gov/components/accordion/ https://www.aditus.io/patterns/accordion/
I used the block as a way to get familiar with the interactivity API, experimented with a few different approaches, but I'd love to get some feedback before moving forward.
To Test
npm i && npm run build
), and activate the plugin.To-Do