5.9 beta - Feature request - Inner Blocks for repeater fields

[CreativeDive]

Hey Elliot,

I've tested the new inner blocks feature inside a repeater field. Currently this feature is not working correctly if we use multiple columns inside a repeater field. The same inner blocks are included in every column. It's possible to include different inner blocks for specific columns inside a repeater field?

[nick6352683]

In my case I can insert a block in an inner block which is inside a Repeater field, but those inner block cannot be edited in any way. In case you were wondering, the blocks are to create Toggles and Tabs... Currently using WYSIWYG for the content of each Tab/Toggle, and that works like a charm.

[elliotcondon]

Replying to #298 (comment) by @CreativeDive

Thanks for jumping into 5.9 testing so quickly! So, this will be due to a major limitation of the <InnerBlocks /> component which is that it may only exist once per block.

This is not a bug as such, but a flaw/limitation in the design of this component.
For more info on the component, please see this WordPress GitHub readme doc: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

I agree that we should have the ability to add multiple <InnerBlocks /> components, to create columns, and I'm looking forward to investigating this idea.

Looking at the WP "columns" block, I can confirm that only a single <InnerBlocks /> component exists, but with a LOT of funky code to allow for multiple inserter points.

Challenge accepted 👍

[elliotcondon]

Replying to #298 (comment) by @nick6352683

Thanks for the extra feedback.

[panayotoff]

Hi Elliot,
Just a suggestion - it would be great if there is an option what blocks can be nested inside <InnerBlocks /> component - ex. only core/paragraph, acf/custom-nested etc.

[elliotcondon]

Replying to #298 (comment) by @panayotoff

Good news. This is already possible! Please see the following thread for examples: #299

[elliotcondon]

📚Docs have been updated with an "InnerBlocks" example: https://www.advancedcustomfields.com/resources/acf_register_block_type/

[saltnpixels]

This looks exciting. I did notice that when the experimental jsx feature is turned on, inline script tags wont work.
So grabbing something like document.querySelector('#<?php echo $block['id']') is not an option when this is turned on?

Lastly i wish there was a way to change the output or add classes to the inner blocks... the innerblocks creates so many nested divs that if i want to create a column layout that matches my theme front, I need to play around a lot...

[elliotcondon]

Hi @saltnpixels

We just released an update 5.9.0-beta2 which fixes the inline script issue. Please be sure to check it out when you can: https://www.advancedcustomfields.com/blog/acf-pro-5-9-beta2/

As for modifying the InnerBlocks HTML, this is outside the scope of ACF. I encourage you to raise that question with the Gutenberg development team 👍

[nick6352683]

Hi Elliot,

Please note that in my Account downloads page, the link to the 5.9 beta 2 version is missing. I can download every version since 5.0, including all the beta versions, except the latest beta 2 version.

I already opened a ticket, but nothing is been done yet,

Thanks,
Nick

[nick6352683]

You fixed it... thanks Elliot !

[WyattCast44]

Hello,

Can anyone confirm that 5.9 Beta 2, with WordPress 5.4.2 has introduced a bug with the new Inner Blocks functionality? When the page renders on the front-end, the markup where the inner blocks should be is simply rendered as:

<your-block-markup>
<inner-blocks></inner-blocks>
</your-block-markup>

In the editor, the blocks render the template, but do not offer any ability to create inner blocks. No JS or WP errors were raised on front-end or in the editor.

Please let me know if anyone needs any additional details and has additional questions.

Cheers,

Wyatt 😊

[elliotcondon]

Hi @WyattCast44

We're not aware of such an issue, but will be happy to diagnose it.
Can you please post the full code to register and render your block type? I'll set that up on my local site and get to work.

P.S. Please ensure the inner blocks component is written as <InnerBlocks /> within your template.

[mwhiteley16]

Just wanted to second the vote for multiple instances of . One of my main hopes with was creating a better UI for tabbed content with ACF. Typically, I just add a WYSIWYG area for each tab (within a repeater), but with I was hoping to replace each WYSIWYG field with a unique instance so the user could actually use the block editor for tabbed content.

Keep up the amazing work Elliot!

[elliotcondon]

@mwhiteley16 Thanks mate! I'm looking forward to the multiple InnerBlocks challenge. We see this as a "must have" and will hope to develop a custom solution in the coming versions 🙌.

[DjuriSchiffer]

@elliotcondon First of al, great work with this plugin. It works really, really well! In the reply from above, you state that the multiple InnerBlocks is coming to future versions... any change this wil be shipped with v5.9, or do we have to wait a bit longer?

[elliotcondon]

@DjuriSchiffer We only just added InnerBlocks support in 5.9. Adding support for multiple InnerBlocks components will require a lot of work, as this is not something that the WordPress API can yet do.

[seanmadrid]

Hello,

Can anyone confirm that 5.9 Beta 2, with WordPress 5.4.2 has introduced a bug with the new Inner Blocks functionality? When the page renders on the front-end, the markup where the inner blocks should be is simply rendered as:

<your-block-markup>
<inner-blocks></inner-blocks>
</your-block-markup>

In the editor, the blocks render the template, but do not offer any ability to create inner blocks. No JS or WP errors were raised on front-end or in the editor.

Please let me know if anyone needs any additional details and has additional questions.

Cheers,

Wyatt 😊

I am also experiencing this issue @elliotcondon.

register code:

add_action('acf/init', 'gberg_acf_block_types');

function gberg_acf_block_types() {

    if(function_exists('acf_register_block_type')){

        $bwTemplate = WP_PLUGIN_DIR . "/brinkenberg/block/content-bilingual-wrapper.php";

        acf_register_block_type(array(
            'name'              => 'bilingual wrapper',
            'title'             => __('Bilingual Wrapper'),
            'description'       => __(''),
            'category'          => 'formatting',
            'icon'              => brinkBlockIcon('format-chat'),
            'mode'              => 'edit',
            'supports'          => array(
                'align' => true,
                'mode' => false,
                '__experimental_jsx' => true
                
            ),
            'render_template' => $bwTemplate
        ));

    }
}

template code:

<div class="bilingual-wrapper">
	<InnerBlocks />
</div>

[elliotcondon]

@seanmadrid I've just tested your code, but was unable to replicate any issue producing the markup <inner-blocks></inner-blocks>. The only problem I see with your block configuration is that the mode is set to "edit", which prevents ACF from rendering the block preview and subsequently the <InnerBlocks /> component.

[bstroshane]

Hi @elliotcondon! Is there an update on the status of multiple inner blocks? Specifically for use in repeater fields?
Eagerly awaiting this update!

[elliotcondon]

Hi @bstroshane 👋. ETA for multiple InnerBlocks Components is early to mid 2021. Sorry we won't have anything sooner, just so much going on here at ACF!

[CreativeDive]

@elliotcondon is this helpful for adding multiple innerBlocks to the repeater field? https://make.wordpress.org/core/2020/11/18/new-createblocksfrominnerblockstemplate-block-api/

[elliotcondon]

Hi @CreativeDive. Looks interesting, but my interpretation of the new functionality is not a multiple innerblocks solution.

[CreativeDive]

@elliotcondon It is a pity to hear that. I think multiple innerBlocks for the repeater field is the most wanted feature for ACF at this moment. :-)

[nick6352683]

If multiple InnerBlocks are impossible or very difficult to do, how about support for native blocks, as an example the Gutenberg's Group block?

So that could be a field type, just like a Text, TextArea, Image, etc... Once we choose a Group Block as a subfield in a Repeater field, theoretically we could put any available block in there while editing the post/page, while in preview mode of course.

Mind you that I'm suggesting this alternate "poor man's" option, without giving too much thought about the ui implications, if there will be any.

And to change the subject little bit, I'm wondering if the changes to the Toolbar Component will affect ACF in any way (the alignwide and alignfull buttons along with the Matrix button for example) - https://make.wordpress.org/core/2020/11/18/changes-to-toolbar-components-in-wordpress-5-6/

[CreativeDive]

@nick6352683 I've already tried to embed the group core block in a repeater field. But it dosen't work. Each value of the group block is the same like the other group block embedded in the other rows.

[elliotcondon]

Replying to #298 (comment) by @nick6352683

These are some big and great ideas. Thanks for posting the suggestion, but I feel this might be pushing the scope of ACF a bit too far. Treating Gutenberg Components as Field Types is a really interesting idea, but sounds like a challenge for a fresh new plugin.

Please allow us to focus on maintaining a solid PHP framework for custom fields, and we will also continue to improve our PHP framework for block types too 👍.

[djmonzyk]

Hi @elliotcondon - You mentioned having potential support for multiple InnerBlocks tags in early to mid 2021. I'm in the midst of building a UI where this would come in very handy, so I thought I'd check on progress.... Thanks!

[cbirdsong]

One of my main hopes with was creating a better UI for tabbed content with ACF. Typically, I just add a WYSIWYG area for each tab (within a repeater), but with I was hoping to replace each WYSIWYG field with a unique instance so the user could actually use the block editor for tabbed content.

I thought I’d share the workaround I came up with for a similar scenario. I made two ACF blocks with InnerBlocks, Accordion Item and Accordion Container. Accordion Item has custom fields to set the label for the expand/collapse control. Accordion Container has block styles that can switch between different designs for the whole set and only exists as a frame for multiple Accordion Items.

To make editing smoother, I experimented with using the allowedBlocks parameter to only allow Accordion Items as children of the Accordion Container, but I encountered some weird issues where the child Accordion Item blocks were inheriting this restriction and I had to disable it. Instead I created a block pattern of an Accordion Container with four child Accordion Items, which is enough to get content editors started, and it’s easy enough to duplicate Accordion Item blocks if they need to add more.

[CreativeDive]

@elliotcondon do you could share an update about the progress of the possibility of multiple inner blocks with us, please? My understanding is, this is depending on the limitation of the innerblocks component right? And there is nothing you can do to make this possible for us, because the conditions for this have to be created in the Gutenberg core first?

[nick6352683]

One bit of advice, about using the WYSIWYG field. There are very good chances that TinyMCE will be removed from the core at the end of the year, or in the near future after that, or in a few years after that.... the exact time is not known yet. The longer this happens, the more sites and pages that are using the WYSIWYG field will be effected (with data loss) when the time comes.

I used to use the WYSIWYG field throughout my blocks, and replaced them with Inner Blocks as soon as Elliot made that option available. Now we have a decision to make with repeater fields, for things like building Accordions, Tabs, etc... I am now using the Textarea field instead of the WYSIWYG, just to have less work down the road. Yes, if multiple inner blocks would be available to us, I would still need to do some work in replacing the Textarea fields, but at least it would be my choice to do so, and at my leisure time.

Unless if eventually TinyMCE will be available in a plugin format, or if Elliot will include that package in ACF, I would avoid using it... but again, that's just me !

[alanbrown-ca]

I would consider this my most sought after feature in ACF. Just wanted to voice my support for this request.

[benediktdertinger]

Hi @elliotcondon any news regarding releasing this feature? This would make ACF so powerful and even more awesome! <3

[pjoulot]

That's so sad that we cannot use multiple , I was so happy when I discovered it but basically useless for me if I cannot use it multiple times. I hope this feature will arrive soon :)

I guess this issue should be renamed since we're already with 9.11

[lgladdy]

We're still aware of this feature request and continue to evaluate ways to provide this functionality with each new WordPress and Gutenberg release - but it remains a limitation of WordPress that one block can only contain one innerBlock component. (https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/)

Gutenberg is continuing to bring new features which might help fill some of the void of this functionality in the meantime, such as block patterns, allowed blocks and template locks - Potentially even things like the row block, depending on your use case.

[CHEWX]

Completed? Any more info? @CreativeDive

[lgladdy]

@CHEWX To be fair, we can probably close this as wont-fix.

I can't see a way WordPress will ever be able to solve this, because it's fundamentally against the principles of blocks and the way their data is stored.

In the vast majority of cases, users will likely just need to rethink their implementation here and use either multiple blocks at the root level, or multiple blocks (which could be ACF Blocks) inside one <InnerBlock />

With templates and templateLock (and the upcoming contentLock in 6.1), I can't imagine a use case which isn't possible at this point.

[CreativeDive]

I couldn't have described it better.