We're relying on a lot of code to track unique IDs for each of the individual sections that are controlled by the open/close all toggle so that we can include an aria-controls attribute.

I want to make sure it's actually valuable for people using screen readers.

This is only one thing I've read, but it didn't inspire confidence: https://heydonworks.com/article/aria-controls-is-poop/

The spacebar is used on a <summary> element to toggle its parent <details> open/closed. Because of this, we do this horribly hacky thing to prevent the default behavior in the editor, but still insert a space:

This works, though it can be annoying because there's a slight lag before the space is inserted. If you're typing at any kind of pace at all, you may need to go back and correct the spaces.

The answer may be to use different markup in the editor, though it's nice to present the component as it will be presented on the front-end.

Maybe we could consider presenting different markup when the block is focused in the editor?

Could be a block style, or could be a plugin setting - add option to exclude all CSS from the block.

It would be great to be rid of all the JavaScript nonsense in favor of the default behavior of these tags. (See https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/.)

There are some limitations that will need to be considered, and another thing to determine is if a {Toggle} All button would be easy enough to implement with this approach.

Translated strings should be made available in the document so that the script can use them when toggling the button text.

We need to determine what is necessary to ship this as a complete plugin

May be related to Cannot update a component (EditorProvider) while rendering a different component (edit). To locate the bad setState() call inside edit, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

The block(s) should ship with as few styles as possible so that it integrates smoothly with the theme.

Version - site

• 1.0.0 - piviohealth.com
• 1.1.0 - sedarweb.org
• 1.0.0 - swanislandbasin.org
• 1.0.0 - pcouncil.org

My expectation is that the summary element should be available to style via theme.json.

Example:

"happyprime/show-hide-section": {
      "elements": {
	      "summary": {
		      "typography": {
			      "fontWeight": "700"
		      }
	      }
      }
},