Accordion + InnerBlocks

[swissspidy]

The Bento Accordion component has strict requirements for the expected element structure:

• A Bento Accordion accepts one or more <section> elements as its direct children.
• Each <section> must contain exactly two direct children.
• The first child in a <section> is the heading for that section of the Bento Accordion. It must be a heading element such as <h1>-<h6> or <header>.
• The second child in a <section> is the expandable/collapsible content.
• A click or tap on a <section> heading expands or collapses the section.
• A Bento Accordion with a defined id preserves the collapsed or expanded state of each section while the user remains on your domain.

This works fine for the web component, but in the editor when using the React component with InnerBlocks, it is quite restrictive.