ACF Blocks and WordPress Blocks v3

WordPress 6.3 introduced a significant change in Blocks API v3, with the post editor now using iframes to contain each block if all registered blocks use the Block API version 3 or higher and there are no classic meta boxes below the block editor. This has led to questions about whether or not ACF Blocks are compatible with the latest version of the WordPress Blocks API.

This was discussed in some detail during our ACF Blocks-focused session of ACF Chat Friday, but in brief, the ACF edit form cannot be supported inside the v3 iframe, as third-party jQuery libraries can’t be controlled or modified to support targeting inside an iframe. This means they’re unable to function correctly. This would impact ACF Blocks using fields like Google Maps or Select fields with the Select2 style, as well as fields which use jQuery libraries for interactivity, like the Color Picker and Date Picker.

In addition, adding ACF’s full CSS library is required for the edit form to display correctly. Adding this as a dependency of each ACF Block would have significant performance impacts.

We are working on a solution for this, but there are a number of technical challenges to overcome and it may take some time.

In the meantime, you can still opt in to v3 of the WordPress blocks API. To do so you will need to disable the inline edit form view for the block. This means users can only edit the fields for the block in the restricted-width sidebar.

You can do this by adding the following code to your block.json file. Doing so will disable the edit form button, and force your block into preview mode.

{
    …
    "supports": {
        "mode": "false",
        …
    },
    "acf": {
        "mode": "preview",
… 
    },
}

For more on the future of ACF Blocks, make sure to watch the video replay of our discussion in the player below. You can also register for the next session of ACF Chat Fridays or reach out to us on Twitter.

About the Author