Skip to content

Conversation

@jffng
Copy link
Contributor

@jffng jffng commented Jun 14, 2024

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.

Screenshots

Editor View
Screenshot 2024-07-12 at 6 21 08 PM Screenshot 2024-07-12 at 6 21 15 PM

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
  • Add default icon behavior
  • Add a few icon options
  • Enable alignment
  • Add default animation transition that respects users motion preferences
  • Add polyfill for latest react runtime
  • Allow heading spacing to be adjusted via block space
  • Add setting for icon position

@jffng jffng marked this pull request as ready for review July 11, 2024 22:26
@jffng jffng force-pushed the add/accordion-block branch from 0b4c17d to 91889f5 Compare July 16, 2024 20:26
@jffng
Copy link
Contributor Author

jffng commented Aug 12, 2024

Closing in favor of implementing in #16 or Core.

@jffng jffng closed this Aug 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done ✅

Development

Successfully merging this pull request may close these issues.

2 participants