Support

Account

Home Forums Add-ons Repeater Field Use InnerBlocks inside Repeater field

Solving

Use InnerBlocks inside Repeater field

  • Is there a way to use InnerBlocks inside a repeater?
    In my example, I have tabs and I want to use InnerBlocks as the tab content.
    If I use InnerBlocks inside the repeater loop it duplicates the content to all tabs.

  • I believe I’m right in saying that you can only include the <InnerBlocks /> tag once per block, so it wouldn’t really working in the repeater situation.

    However, I believe you can still get the desired result with a slightly different approach. You’ll just need to use two custom blocks instead.

    The first block, “tab group”, will look something like this:

    <div class="group"> <InnerBlocks /> </div>

    The second block, “tab item”, will look something like this:

    <div class="item"> <InnerBlock /> </div>

    The key is when you set the “tab group” block up that you define 'allowed_blocks' to only allow “tab item” (acf/tab-item). Also, you can set the “tab item” up with 'parent' to only allow it as an option when inside a “tab group”. Now, when you’re in the editor, you can firstly create a group block and then add as many unique item blocks to the group. Basically the same as a repeater!

  • Any plans on implementing it in a later release? Anyone know something? This feature would be great!

  • Hi! Having same “problem” here, this feature would be really great!

    Is there any issue open?

    Thanks in advance.

  • Doesn’t @dsouzaj86 ‘s answer solve this?

    It isn’t a limitation of ACF, but of Gutenberg at this point. You can only have 1 <InnerBlocks /> within a block.

    It seems like the solution suggestion is the exact way of working around this with ACF.

  • was looking for the exact same case. building my own tabbed content block.
    the approach of @dsouzaj86 works pretty well. I tried it. thank you very much! Only thing i don’t get is the parent property to allow appearing the tab-content only in tab-group. at the moment i can place it everywhere.
    tab-group:
    <InnerBlocks allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/tab-item' ) ) );?>" />

    tab-item:
    <InnerBlocks parent="<?php echo esc_attr( wp_json_encode( array( 'acf/tab-group' ) ) );?>" />

    seems parent gets ignored.

  • okay i think i got it now. parent attribute needs to be placed in acf_register_block_type:

    		acf_register_block_type(array(
    			'name'              => 'tab_item',
    			'title'             => __('Tab-Inhalt','hns'),
    			'description'       => __('Tab-Inhalt','hns'),
    			'render_template'   => 'template-parts/blocks/tabs/tab-item.php',
    			'category'          => 'widgets',
    			'keywords'          => array( 'tabs','navi'),
    			'mode'              => 'preview',
                'parent'            => array('tabs_group'),
    			'supports'          => array(
    				'align'     => false,
    				'align_text' => true,
    				'multiple' => true,
    				'jsx' => true, // innerblocks
    				//'align_content' => true, // oben, mittig, unten
    			),
    		));
  • I would vote for this to be included in a repeater, not sure how hard it can be but there are a lot of native blocks that now support multiple inner blocks

  • I’m using @dsouzaj86 approach for an accordion. Does anyone know how to get the parent group block ID from within the child block?

    Looking for something like:

    <div id="accordion-<?php echo $block[id]"; ?> data-parent="<?php echo $parentblock[id]; ?>">
         Accordion content
    </div>
  • Is this still working the solution @nicmare?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.