ACF Field – Add Gutenberg Blocks Wrapper

• graphix

• May 24, 2019 at 5:01 am

I’m working on a theme that uses ACF Gutenberg Blocks as a custom editor. I created a “Advanced Editor” block that uses a Repeater field to add columns to a row (i.e. there’s 12 columns in a row and I can select how many rows each column spans). Each column has some special settings and can have a class assigned to them, all of which makes my website development process much easier. However, while this is great for me as a developer, I’d really like to be able to improve the editing experience for non-developers (i.e. my clients). I’ll elaborate with screenshots below.

Here is what one of my Advanced Editor Blocks looks like in the WordPress Admin:

The “mode” is currently set to “auto”, so when it is clicked it jumps into editing mode (which, to provide the most flexibility, I’ve added a WYSIWYG field in for each column):

Jumping between the preview of the block, to the column content as a WYSIWYG editor isn’t the most intuitive in this case (columns change from a horizontal to vertical orientation). Having the column WYSIWYG editor appear in the sidebar isn’t a viable option (it’s impossible to use the WYSIWYG editor that small).

What I’d love to do is have an ACF field that accepts Gutenberg blocks (i.e. paragraph, heading, img) to be added within it. This would be similar to the “Columns” block that already exists in Gutenberg but would give a bit more flexibility. I imagine that clicking into a column would also mean that the settings for that column would need to be displayed somewhere, perhaps the sidebar (here’s another post that recommends that functionality). If anyone has any questions, please feel free to ask.

• kanlukasz

• October 9, 2020 at 7:30 pm

You did it in a smart way. I like this.
Of course, now that Gutenberg is released we can achieve it in several ways.

If we are talking about ACF only, it’s also possible in a simple way now! You can only create an ACF empty block with an InnerBlock included, and all options in this block (eg Button Group) will be visible in the sidebar.

As a result, we get something like “gutenberg block options”

The problem I am seeing is performance. If you have a lot of inner blocks like container > row > col > content, you have a lot of Ajax queries. As a result, loading this in wp-admin is slow.