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?

  • 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"
      }
    }
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.