Can't render multiple innerblocks with ACF Blocks. How do I make them unique?

Question

I'm using ACF to create two blocks, Tabs and Tab. Tabs is the container with innerblock that only allowes Tab block. Tab block has the innerblock that any block. As I've read from multiple forums this is how it's suppose to be done to allow multiple innerblocks.

However, while two innerblocks are created, they're duplicated and copies whatever the other innerblock has.

How can I make these innerblocks unique?

Tabs Block:

    <div class="tab-content-container">
        <?php $tab_index = 0; ?>
        <?php foreach ($tabs as $tab) : ?>
        <div id="<?php echo $tab_index; ?>" class="tab-content">
            <InnerBlocks allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/co-tab' ) ) );?>"
                template="<?php echo esc_attr( wp_json_encode( array(array('acf/co-tab')) ) );?>" />
        </div>
        <?php $tab_index++; ?>
        <?php endforeach; ?>
    </div>

and Tab

<div id="<?php echo $id ?>" class="<?php echo $className ?>">

    <InnerBlocks id="ib-<?php echo $id ?>"
        parent="<?php echo esc_attr( wp_json_encode( array( 'acf/co-tabs' ) ) );?>" />

</div>

Here's the entire source

https://gist.github.com/oozyy/edce63f09382bacb5071e81c8ff47392

I've tried giving the InnerBlock component an id and the parent an id, I've also tried to see if templateLock has anything to do with it.

The innerblocks just aren't unique. The expected result is that each tab has it's own unique innerblock.

Edit: Seems like this is related to the child block and not so much InnerBlock. When creating a new item, the same existing tab block is created for that new item.

Can't render multiple innerblocks with ACF Blocks. How do I make them unique?

0 Answers0