Open westonruter opened 3 years ago
Curious how this compares to a simple details/summary element usage like Coocks uses
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:
expand-single-section
attr).animate
attribute. However, this seems like a bad idea for performance since it means animating the height
.CoBlocks has this curious toggle for IE support:
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
Yeah, what I mean is it's strange to me that this is presented as a user option.
Interesting to see https://github.com/whatwg/html/pull/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.
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
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: https://github.com/whatwg/html/issues/6040
There's a Gutenberg issue open to add an Accordion block: https://github.com/WordPress/gutenberg/issues/21584
Requirements (from https://github.com/WordPress/gutenberg/issues/21584#issuecomment-900372945) for the frontend JS for this block include:
These are all satisfied by Bento
amp-accordion
(the first with https://github.com/ampproject/amphtml/issues/20609).Similarly in https://github.com/WordPress/gutenberg/issues/21584#issuecomment-907081394:
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.