Support

Account

Home Forums Gutenberg ACF Block Columns with InnerBlocks

Solved

ACF Block Columns with InnerBlocks

  • I’m attempting to create a two column ACF block that will allow an author to add a block(s) inside each column, similar to the WP core columns block except that my ACF block will use bootstrap classes/custom markup.

    I have come to the understanding from other posts that <InnerBlocks /> can only be used once in a block due to limitations of Gutenberg, not ACF itself. But perhaps I’m looking at outdated information?

    If <InnerBlocks /> is limited to one per block, how does the core columns block handle adding inner blocks into the two columns?

  • core columns blockexample of the core block with two columns

  • Did you find a way to do this?

  • @lumpysimon unfortunately I never did 🙁

  • Thanks for letting me know – I’m completely stuck with this too.

  • @lumpysimon you’re welcome!

    The ACF documentation still says only one inner block is allowed
    and the gutenberg developer guide says the same thing here “Note: A single block can only contain one InnerBlocks component.

    That is confusing though, because it seems like the core columns block does uses multiple innerblocks. I haven’t taken the time to look into how the core columns block handles it – must be something other than innerblocks – worth looking into!

  • @lumpysimon I ended up googling a little bit since I haven’t looked at this in a while – this may be a good workaround! https://support.advancedcustomfields.com/forums/topic/used-innerblocks-multiple-in-one-acfblock/

  • Aha, that looks interesting, thanks! I’ll play around with that later this week and see how it goes.

  • The core columns block doesn’t use multiple innerblocks. The core columns block is just nested blocks so core/columns is a block and core/column is another block nested within it then blocks get further nested within the column block.

    Buttons work the same way core/buttons is a block and core/button is a block nested within it.

    For columns, you’d probably be better off trying to utilize the core/columns block and set it up with a innerblocks template that uses it vs. creating your own columns in ACF but there may be a reason you’re avoiding use of the core block. It’s just “backing up” your idea of where InnerBlocks would start and enveloping the container in it and working off the nested block concept vs. framing it as any block-based area would be its own innerblocks area. Not sure if this helps or just makes things worse haha

  • @wpfieldwork thanks for the response! I think that is helpful – I’m going to go ahead and mark this as resolved, hopefully it will help others that are curious about this too!

    Back when I first opened this topic, my situation was that I had to integrate specific markup from a front-end team that was being used for columns and the core block wouldn’t work for our case. I forget the work around I did since it’s been a while, but I will keep this in mind for the future!

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

You must be logged in to reply to this topic.