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

Liam’s a veteran WordPress developer based in Bath, UK. He’s a fan of all things devops, gaming and coffee, but is still working on his espresso skills. Just don’t ask him to try latte art… the results are never good.

View other posts by Liam Gladdy

For plugin support, please contact our support team directly, as comments aren't actively monitored.

• Tom Jardine-Smith says:

  December 1, 2023 at 9:46 am

  I’m attempting to opt-in to Block API v3 following the instructions above, but the block editor still doesn’t get iframed. My custom ACF blocks are the only blocks registered, and I’ve added supports mode false and acf mode preview (see example block.json below) to all my blocks. That’s all I did initially, but when that didn’t work I also added apiVersion 3 to the json, as suggested in WordPress core docs. Still no joy. Can anyone point me in the right direction?

  My example block.json: { "name": "acf/accordions", "title": "Accordions", "description": "Collapsable accordions to use for content such as FAQs", "style": [ "file:./accordions.css" ], "category": "text", "icon": "list-view", "keywords": ["accordions", "faqs", "collapsable", "minimise"], "supports": { "anchor": true, "align": false, "mode": false }, "acf": { "mode": "preview", "renderTemplate": "accordions.php" }, "apiVersion": 3 }

  Log in to Reply
• dam1 says:

  February 1, 2024 at 5:47 pm

  Hi @Tom You might have figured out by now but to have the iframe block editor, you need to have only v3 blocks. If you have atleast one block that is not v3, it will not render it in the iframe: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/#version-3-wordpress-6-3

  Log in to Reply