Gutenberg - Multiple InnerBlocks in one block-type

Question

I am trying to make custom columns block since the wordpress default used by gutenberg is not what I need.

So i have looked up how it works, its uses InnerBlocks block with a layout definition, but there is no way to specify the html tag and the class for the columns so it's useless for me.

Then I have decided to loop out columns using map, which works fine, then i added inside each column the InnerBlocks component to allow inserting other blocks to the column, but the problem is that in each column the content of InnerBlocks is shared, so I have tried to set key property for each InnerBlock and column to be unique and their content is still shared (no i am not using shared block).

It looks like gutenberg is using the same instance of InnerBlocks in each column.

I am trying to build a block type where you can add dynamically columns and into each column add "cards" with some information.

To give some idea what am i doing, here is the return of the edit function:

<section className="infonav">
            <div className="infonav__container">
                <div>
                    <button onClick={onAddBox}>{__('Add column', 'zmg-blocks')}</button>
                </div>
                <div className="infonav__row">
                    {[...new Array(columns).keys()].map((item, index) => {
                        return (
                                <div className="infonav__row__col" key={"info_cols"+index}>
                                    <div>
                                        <button onClick={onRemoveBox.bind(index)}>
                                            {__('Remove', 'zmg-blocks')}
                                        </button>
                                    </div>
                                    <InnerBlocks key={"info_boxes"+index}/>
                                </div>
                        );
                    })}
                </div>
            </div>
        </section>

Thank you

Answer 1

Seems like gutenberg Innerblocks can only be used once in a block

Note: A block can render at most a single InnerBlocks and InnerBlocks.Content element in edit and save respectively. To create distinct arrangements of nested blocks, create a separate block type which renders its own InnerBlocks and assign as the sole allowedBlocks type.

Source: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

You need a create another custom block(for the column only) along with this block which also uses Innerblock inside it so that other blocks can be nested inside. You can make use of allowedBlocks to only allow your custom column in this block