Developing block with multiple child blocks such as columns or tabs - wordpress

Question

I am working to develop a custom block that allows the user to add tabs, and then populate each tab with as much content as desired using other gutenberg blocks. Its my understanding that there can only be a single instance of InnerBlocks in the edit / save function - even though that seems at first like how you would implement the functionality I am looking for (a single instance of InnerBlocks.Content for each tab.
So far, I have been unable to find a good resource on the high level methodology for implementing tabs or columns as a custom gutenberg block. I have reviewed some of the wordpress block library column code, however I find it to be pretty complex and abstract for beginner development of custom blocks.
I am hoping to receive guidance from a high level on how one would achieve the functionality I am looking for. Below I have included my very simple tabs block code for reference.
const { __ } = window.wp.i18n;
const { registerBlockType } = window.wp.blocks;
const { InnerBlocks, RichText } = window.wp.blockEditor;
registerBlockType('myplugin/tabs', {
title: __('Tabs', 'myplugin'),
category: 'widgets',
attributes: {
tabs: {
type: 'array',
default: []
}
},
edit: function ({
className,
attributes,
setAttributes,
}) {
let { tabs } = attributes;
return (
<div className={className}>
<button onClick={() => setAttributes({ tabs: [...tabs, { title: 'New Tab' }] })}>Add a tab</button>
{tabs.map((tab, i) => {
return (
<div key={i}>
<div>
<RichText
tagName="div"
value={tab.title}
onChange={(value) => {
tabs[i].title = value;
setAttributes({ tabs })
}}
/>
</div>
<div>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
/>
</div>
</div>
)
})}
</div>
)
},
save: function ({
attributes,
}) {
const { tabs } = attributes;
return (
<div>
{tabs.map((tab, i) => {
return (
<div key={i}>
<div>
{tab.title}
</div>
<div>
<InnerBlocks.Content />
</div>
</div>
)
})}
</div>
)
}
});

Answer 1

The pattern for creating blocks with multiple nested children is as follows. First define 2 block types, a parent and a child. Gutenberg core Block Columns is an example of this, there is "Columns Block" as the parent and then there is "Column Block" as the child block.
The use of the parent and child block enable us as developers to work around the restriction of only 1 InnerBlock region per block. It enables the structure using tabs as an example where we have:
/tabs-parent-block
/tab-child-block-1
/tab-child-block-2
/tab-child-block-3
These child blocks could still be within 1 InnerBlocks section which enables the user to add more child blocks. You can restrict the block types for child block to your custom tab child block using the <InnerBlocks allowedBlockType={ ALLOWED_BLOCK_TYPES } />.
What about a situation where putting all the child blocks in one area isn't practical? That is something I'm still experimenting with myself. It doesn't seem to matter for things like tabs because the parent/child approach should work. But what if it doesn't and you really need to have a parent block that has entirely different regions like for a page layout?
The reference shared in an earlier answer is relevant, this script registers 2 blocks which work together in the parent/child block pattern: https://github.com/Ultimate-Blocks/Ultimate-Blocks/blob/master/src/blocks/tabbed-content/components/tab.js
Notice that the first block registered is a singular tab (child block) ub/tab, the second block registered is the parent block ub/tab-block. In the parent block the save() function saves only the child tabs using <InnerBlocks.Content />.

Answer 2

The way to do this is to define another block which then to include in the parent block.
You can check out this plugin: https://github.com/Ultimate-Blocks/Ultimate-Blocks/tree/master/src/blocks/tabbed-content