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?
sorry for late reply. yes. according to acf6 you now should use register_block_type (instead of acf_register_block_type) and load the block.json file. Example:
{
"name" : "lmdm/tabitem",
"title" : "Tab-Inhalt",
"description" : "Tab-Inhalt",
"category" : "widgets",
"icon" : "<svg width=\"80px\" height=\"80px\" viewBox=\"0 0 80 80\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"icon-tab-item\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M31.0453442,11.6287145 L31.0453442,27 L75,27 L75,75 L5,75 L5,27 L10.2507421,27 L10.2507421,11.6287145 L31.0453442,11.6287145 Z\" id=\"Rectangle\" stroke=\"#000000\" stroke-width=\"4\"></path>\n <rect id=\"Rectangle\" fill=\"#000000\" x=\"13\" y=\"35\" width=\"54\" height=\"32\"></rect>\n </g>\n</svg>",
"keywords" : ["tabs","navi","accordion","accordeon"],
"parent" : ["lmdm/tabgroup"],
"supports" : {
"align" : false,
"align_text" : true,
"multiple" : true,
"color" : {
"background": false
},
"jsx" : true
},
"acf": {
"mode": "preview",
"renderTemplate": "index.php"
}
}
@dsouzaj86 @nicmare, can you provide a little insight on my template?
while I can very see the logic you propose (great kudos to you), I’m a little lost on how to apply it to the type of template I need.
Basically, I need this type of markup output
<div id="demoTab">
<ul class="resp-tabs-list">
<li> Tab 1 </li>
<li> .... </li>
<li> .... </li>
</ul>
<div class="resp-tabs-container">
<div> tab content with <InnerBlocks /></div>
<div> ....... </div>
<div> ....... </div>
</div>
</div>
and it escapes me how to obtain it without repeaters.
Do you think it’s possible in the first place? Can you help me shed some light?
thanks in advance,
Alessio
@alessietto simplified you need to change your markup.
this is my first block type “tabgroup”:
<div class="tabgroup" id="<?php echo $block_id; ?>">
<InnerBlocks allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'tabitem' ) ) );?>" template="<?php echo esc_attr( wp_json_encode( array(array('tabitem')) ) );?>" />
</div>
this is my second block type “tabitem” which is a child of tab_group:
<div class="tabitem">
<InnerBlocks />
</div>
tabitem needs the json-key:
"parent" : ["tabgroup"]
or if you work oldschool with php array:
"parent" => array("tabgroup")
in the end you need to order the items and play with visibility via css like:
.tabwrapper { display:flex }
.tabitem { order: 0 }
.tabgroup { order: 1 }
check this article to understand the logic
