Support

Account

Register Login

Home › Forums › Gutenberg › How to allow Inner Blocks with ACF in Gutenberg

Solving

How to allow Inner Blocks with ACF in Gutenberg

  • Hello! I’ve been playing around with ACF’s solution to custom Gutenberg blocks and I love the flexibility… however I’m having trouble figuring out how to allow other blocks to be used inside.

    For example, I want to create a simple container block which allows for customizing the background, padding, etc. for any other block (like an image or paragraph, for example).

    All I could find was this… any idea on how to hook it up with ACF’s method?:

    https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/inner-blocks/README.md

  • This was already suggested to Elliot on Github, and the answer we got back was that this is something he is going to look into later on, once he finishes v5.8 I guess…

    Personally, and for the time being, any container needs that I have for, like sections, tabs, etc… are put on hold, except one, called “section”, where I wrap a WYSIWYG field with the container code, and as a compromise for now, I will be using shortcodes that my theme and plugins provide to populate the content of that section. Not an ideal solution, but that’s the best I could do until ACF allows inner blocks, and my guess is that this has to be a new field type that needs to be created…

    Anyone else willing to share their solutions regarding this issue, will be greatly appreciated, at least by me…

  • Just chiming in to add my support for adding Inner Blocks as a feature for ACF Blocks! I’m looking to use blocks to create sections, too. This would be immeasurably useful. I’ll keep playing around on my own, and if I come up with any better alternatives, I will post them here.

  • I ran into this issue as well for a general wrapper block with default options, ACF support for innerblocks would be awesome!

  • Yes, please! The plugin won’t reach its potential until this is implemented.

  • Oh, I can see I’m not the only seeking desperately for a way to get a wrapper in ACF block!
    I hope it’ll be soon implemented ’cause this feature could really get ACF to the highest levels!

    Go Elliot Go!!! 🙂

  • Much needed feature, glad to see I’m not alone in wanting this.

    Honestly I’m surprised Gutenberg didn’t ship with a row/container block. Good thing we have ACF and Elliot to save us! 😉

  • I’d really love to see this feature! Everything else is working great. If anyone finds a workaround in the mean time please share.

  • FWIW, this is admittedly very very hackish, but the way I’ve been handling this until a better solution comes in is to create a custom block (called “Section”) which has an option to set to either open or close. I then put that block before and after (set to “open” and then “close” respectively) the blocks I want to “wrap” in a section container. Then in the block template I simply render either an opening HTML tag or a closing HTML tag. I also add additional (conditional) fields to set background colour/padding and other customizable things.

  • @ryan62 I have been thinking about the same thing! It’s a critical need right now. I can’t believe it’s so hard!!

    Please, Elliott and team, THIS IS A REALLY URGENT NEED!

  • Chiming in here, I would LOVE to see this. To have a container block using ACF’s super straightforward registration function would be amazing. If Gutenberg coding didn’t scare me so much, I’d try my hand at creating a very simple container block, just to have something…

  • Ok so I got a reply from Elliott on this.

    Basically, he sees no possible way to add InnerBlock capability to a dynamically-generated block.

    As you would know, all ACF blocks have to be degnerated dynamically, and as such there are limitations on what can be done, and to his mind, InnerBlocks can’t be done.

    He’s open to what others may know beyond that, but frankly, that’s a little scary! I can’t see a rock solid solution if we can’t do this. There are so many applications that really need it, to my mind.

    So I guess, thinking caps on, people!!

    A

  • @alicam

    Hm, so we’re probably not getting this? 99% of the websites nowadays need this thing, so we have to come up with something. There’s no point in replacing a page builder without this feature.

  • Absolutely necessary feature…

  • While waiting, I used “create-guten-block” from https://ahmadawais.com/create-guten-block-toolkit/ to make a “parent” block. For now it works great, some small admin bug with UI (paragraph go over the “+” add block button) but it saves me some times for now!

  • Just an update that it is 100% possible to create a dynamic block that allows inner blocks. Maybe it wasn’t in the earlier stages but I can confirm it works.

    I’ve already let Elliot know and I really hope he can get this in 5.8. It seems very simple since ACF blocks beta already has everything else in place.

    https://twitter.com/jivedig/status/1105207424703713280?s=21

  • Appreciating that this may not be the solution everyone’s been looking for but if you’ve been primarily building Gutenblocks using the ACF method and don’t really want to get involved in the complexity of building ES6 style native blocks (I don’t know how else to distinguish them) like I have, then the simplest way I’ve found to create a container block is using this library: https://github.com/ahmadawais/create-guten-block

    Provided you’ve updated node and npm then the instructions are really very simple to follow. It does all the Babel shenanigans for you so you don’t even have to worry about the myriad dependencies that you’d normally have to fight with to make your own build process. You literally just cd into the plugins directory and type:

    npx create-guten-block my-container

    and then cd into the created plugin and do npm start and activate your plugin.

    I’ve just made a little container block which allows InnerBlocks and limits those InnerBlocks to specific ACF style blocks I’ve already built in about 10 minutes.

    The first few paragraphs of this tutorial are enough to get a simple version working once you’ve used the above to generate your block plugin: https://www.ibenic.com/enable-inner-blocks-gutenberg/

  • Hey,

    is there a new answer from Elliot about the block wrapper? Does Elliot work on it or not?

  • Elliot’s last response on the matter that I know of, is that he is going to look at it at the end of the year, BUT, he also warned us that, by doing so, this will open a “can of worms”, which worries me a bit.

    With the latest Gutenberg developments, I don’t think we “really” need inner-blocks anymore. If you install the latest Gutenberg plugin, which will override the core’s version, we can do anything we desire… BTW, the core’s Gut. version is v5.3, while the plugin right now is at v6.2.

    The Cover block can now accept all blocks, and not just heading, paragraph and button anymore. As a background in a Cover block, as usual we can have color, image or video. We can use the cover as a container – no problems.

    The Group block, can only have background colors, but soon it will also support also images, videos and even gradient colors. They are currently working on this…

    I’m not sure about this, but I think that these background options will also be available to the Columns block.

    So, for the time being, my recommendation install the Gutenberg plugin, and is to place your ACF blocks inside a Group or Cover block, and in the meantime let’s wait an see how Gutenberg and ACF Pro will progress with their developments.

  • I think the best way for ACF is to come up with a solution to extend the core blocks with additional custom fields. That would be great! because we could extend the background options with great things like background animations and more.

    What do you think about this @Elliot ? 😀

  • Hi everyone,
    just wanted to chime in and tell you that I’ve managed to use ACF with innerblocks. My use case is a “Text” Block which wrapps all other textish blocks (paragraph, heading, list) for a common wrapper (container, margins/paddings – all design reasons).
    I’m using this helper methods and the editor.BlockEdit und blocks.getSaveElement hooks to overwrite the save & edit components of acf blocks. You can see it in this gist.

    It’s kinda hacky, works only until ACF 5.8.2 (have to find out what’s breaking it in 5.8.3). But with mode set to preview, the fields only showing in the sidebar and some styling I managed to get it working for editors/normal users.

    I’m also working on adding custom fields to core blocks – have a proof of concept which adds fields to core/paragraph but not saving correctly atm. If anyone wants to help/the code I’ll set it up as a github repo.

  • Ran into this today as well. I found this plugin: https://wordpress.org/plugins/sbgd-wrapper-block/, that added a wrapper around blocks. Would love to see ACF add in a solution just like this.

  • Here you can see how you can allow inner blocks for an ACF wrapper block.

    It’s a workaround, but it works 🙂

    https://gist.github.com/gaambo/633bcd83a9596762218ffa65d0cfe22a

  • Is there any progress for this feature yet? Would really like to use it, but working with a work around block made natively seems a workaround involving a lot of extra time.

  • I need too this feature.

Viewing 25 posts - 1 through 25 (of 31 total)
1 2

The topic ‘How to allow Inner Blocks with ACF in Gutenberg’ is closed to new replies.