Support

Account

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

Solved

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?

  • 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

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

You must be logged in to reply to this topic.