Add Accordion block example using bento-accordion

[westonruter]

There's a Gutenberg issue open to add an Accordion block: WordPress/gutenberg#21584

Requirements (from WordPress/gutenberg#21584 (comment)) for the frontend JS for this block include:

• Breaks down without JS (no progressive enhancement)
• Can't be navigated with the keyboard
• Generally it's all <div>s and not even the hint of care for accessibility

These are all satisfied by Bento amp-accordion (the first with ampproject/amphtml#20609).

Similarly in WordPress/gutenberg#21584 (comment):

our UI components are React based intended for admin UI, an accordion block would be something implemented entirely differently and optimized for the front-end.

So with the Bento amp-accordion there's a React component to be used in the editor context, and then a Custom Element to be used on the frontend, both of which are optimized for their respective use cases.

This would be another useful example to show how amp-accordion would be an elegant way to implement the Accordion block in Gutenberg.

[swissspidy]

Curious how this compares to a simple details/summary element usage like Coocks uses

[westonruter]

It's true that the functionality is not nearly as advanced as is included in amp-base-carousel. The things that Bento amp-accordion offers that details in CoBlocks lacks:

1. The ability to have only a single section open at a time (via expand-single-section attr).
2. The ability to animate the opening/closing of sections via the animate attribute. However, this seems like a bad idea for performance since it means animating the height.
3. The ability to persist the state of which section is expanded (not yet supported in Bento).

---

CoBlocks has this curious toggle for IE support:

[swissspidy]

IE11 doesn't support <details>/<summary>, so it allows loading a JS polyfill for it: https://github.com/godaddy-wordpress/coblocks/blob/e029232f088c95454671615f6bf2898a21fc4053/src/js/coblocks-accordion-polyfill.js

[westonruter]

Yeah, what I mean is it's strange to me that this is presented as a user option.

[westonruter]

Interesting to see whatwg/html#6466 where browsers will automatically expand details elements when doing find-in-page if there is text that matches inside, or if there the page is linking to an anchor inside the details. Perhaps amp-accordion should be implemented with details under the hood, if that same ability isn't exposed as part of the web platform.

[swissspidy]

This just came to mind again. If we're to add more block examples, I was thinking that this repo could be turned into a monorepo containing all sorts of resources for using Bento with Gutenberg, i.e. block examples, links to docs/blog posts/tutorials. Similar to https://github.com/WordPress/gutenberg-examples and https://github.com/dseidl/awesome-gutenberg

[josepharhar]

Perhaps amp-accordion should be implemented with details under the hood, if that same ability isn't exposed as part of the web platform.

I am advocating for this here: whatwg/html#6040