search

swissspidy / gutenberg-bento

An exploratory plugin for using Bento components in Gutenberg
Apache License 2.0
11 stars 2 forks source link

Add Accordion block example using `bento-accordion` #10

Open westonruter opened 3 years ago

westonruter commented 3 years ago

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:

  • 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 https://github.com/ampproject/amphtml/issues/20609).

Similarly in https://github.com/WordPress/gutenberg/issues/21584#issuecomment-907081394:

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 commented 3 years ago

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

westonruter commented 3 years ago

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:

image

swissspidy commented 3 years ago

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 commented 3 years ago

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

westonruter commented 3 years ago

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.

swissspidy commented 3 years ago

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 commented 2 years ago

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