Solvedgutenberg Allow multiple InnerBlocks per block

Currently InnerBlocks can only be rendered once into any block.

I can see there's been a lot of discussion around nested blocks so I'm sure there's a valid reason for this limitation but would be great to be able to be able to render multiple per block. The specific use case I'm thinking about is for a tabbed/accordion block with multiple content panes. Within each content pane you may want to have images or embeds etc.

This would be addressed in part by the inline blocks being discussed #2043 but allowing multiple InnerBlocks would provide more flexibility.

18 Answers

✔️Accepted Answer

Imagine something simple as this example...

{
    edit: () => {
        return (
            <section>
                <aside>
                    <InnerBlocks name="sidebar"/>
                </aside>
                <div className="content">
                    <InnerBlocks />
                </div>
            </section>
        );
    },
    save: () => {
        return (
            <section>
                <aside>
                    <InnerBlocks.Content name="sidebar"/>
                </aside>
                <div className="content">
                    <InnerBlocks.Content />
                </div>
            </section>
        );
    },
}

Other Answers:

Please re-open this. @willrowe has perfectly described the usecase.
And @rodrigodagostino wrote a simple syntax for it.

Named slots are really needed.

The use case that brought me here is very similar to the example that @rodrigowbazevedo presented.

Currently, if you want to have multiple blocks next to each other with the same parent element, it makes sense to have one InnerBlocks and only allow a specific child block type. This works very well for lists and list items and core/columns and core/column.

However, this does not work when the child blocks are not siblings and represent different types of content. I am currently trying to build a block which is mostly static or editable using simple fields. There are two areas in this block where I would like the user to be able to add blocks like headings, paragraphs, and lists. One is a card-like element and the other is a full width area. These two areas are separated by other elements and do not share a parent element, so the solutions offered above would not work.

Being able to target both of the areas with named InnerBlocks would allow me provide a level of customization to the user, while still being able to control the look and layout of the containing block. Other solutions to this issue would be complex and require me to create a extra, completely static, blocks instead of being able to use that same markup in one block with InnerBlocks included where the content should be dynamic, all the while still not quite accomplishing what I need.

What would it take to get this issue opened back up? It seems like the dual answers of "it's too difficult for us to pull off" and "block developers can figure out workarounds with a combination of our template system and creating additional-sub blocks that serve no other purpose" are, at least on some level, a bit at odds with each-other. The use cases for multiple Inner Block sections are virtually endless.

I know probably there's some complexity to implement it, I think it can use the concept of named slots like all major javascript frameworks have.
Sometimes is a pain in the neck to split in unnecessary blocks just to have this behavior...

More Issues: