I put together a plugin that auto registers ACF field groups as Gutenberg blocks. This allows new editor blocks to be inserted without extra boilerplate code in theme files. Simply activate the ‘Auto Block’ setting on a field group, configure the options and presto – the block will be available in the Gutenberg editor.
I also make heavy use of flexible layouts to create ‘page builders’ in templates, and included a new action that will convert existing layouts into stand-alone block-ready field groups. This has been very helpful in upgrading older projects.
You can find the plugin over at GitHub: https://github.com/benplum/ACF-Auto-Blocks. It goes without saying that this will require the latest 5.8 beta release. Feedback or ideas are always welcome!
Thanks for that!
I’m trying to convert an existing “page builder” structure into blocks, but I keep getting “conversion error” when I click on “convert to block” for all existing layouts in the flexible content field.
I’m not sure it’s not my fault, though, as I’m a bit unsure how to go about using the plugin.
I’ve enabled “auto blocks” in the settting area of the flexible content field, I’ve assigned a block key (and added a template file of the same name to the theme root), I’ve picked an icon and enabled multiple blocks, resusable blocks, and all alignments.
On save the chosen Icon and block-selector will appear in the admin interface, but no actual content is displayed. As mentioned above, attempting to convert a layout by choosing “convert to block” in the backend layout options menu will lead to a js-error window “conversion error”.
Also, I notice that a new condition for the display of the flexible field (show if block equals all) is added everytime the field gruop is saved…
I tracked the problem down to the convert_layout method. It’s constantly throwing a 500 error as AJAX response if any of the “acf_” functions (like acf_get_field_id) are called. Is there anything that needs to be done to the installation or ACF before using this plugin?
acf_get_field_id was removed at some point. I just pushed an update (1.0.5) that will resolve the issue.
A quick note: You probably don’t want to enable auto blocks in the field group that contains the source flexible content field. Those settings will be added when creating a new field group from the layout.
Thanks! Now it works.
The following is only partly related, but I was wondering about the possibility of a migration option that would not just create the field structures but also allow to translate the flexible field layout order and contents of layouts into acf-blocks.
I’m still early in my learning about Gutenberg and its way of doing things, but what I think I’ve understood is that, so far, most of the processing is done in JS on the client side, including saving acf custom field values, which makes programatically generating blocks from layout-content difficult. Changes to the block api are intended but there’s no eta.
While researching this, I came accross the following recent post linking to an experimental php block-serializer in the gutenber plugin, and now I’m wondering if that may not present a solution to automatic migration of acf flexible layouts into blocks.
If possible, given this plugin’s purpose, I thought this may be of interest.
I think the concept of translating existing flexible layout instances into block instances should be possible. Gutenberg blocks are stored in post content as HTML comments that conform to a consistent and predictable format, so editing/updating via PHP is certainly doable.
I think the challenge is how to actually implement the process. A few questions that come to mind: What happens if the user hasn’t yet converted all layouts in the source field to stand-alone auto blocks? Would we drop the new blocks at the beginning or end of any existing post content? Should the conversion be a post-by-post process for the user, or a global edit/update from a single admin screen?
I’m not sure how much time I’ll have to dedicate to a solution but would love to continue the conversation!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2022 Advanced Custom Fields.