ACF 5.10.x and duplicate <InnerBlocks> content in editor

[TeemuSuoranta]

As of ACF 5.10.x updates the rendering of ACF blocks is changed so that they are no longer loaded in separate ajax requests as before. This causes an incompatibility issue with this theme's way to show content in editor.

Issue

Before this theme used blocks like this:

$contents = $content;
if ($is_preview) {
  $contents .= '<InnerBlocks allowedBlocks="' . esc_attr(wp_json_encode($allowed_blocks)) . '" template="' . esc_attr(wp_json_encode($placeholder_content)) . '" />';
}

This relied that $content variable was empty in preview and as of ACF 5.10.x it is not. I went through this with ACF support and found out that displaying different content to front end and editor is not required and <InnerBlocks /> is automatically replaced with content in front end.

Fix

The way to solve this issue is to change the code simply:

$contents = '<InnerBlocks allowedBlocks="' . esc_attr(wp_json_encode($allowed_blocks)) . '" template="' . esc_attr(wp_json_encode($placeholder_content)) . '" />';

Axio Starter 6.1.0 includes a fix to this.

Are my sites affected?

If you have projects that were build on Axio Starter, you can check if you are affected with using GitHub/Bitbucket source code search:

• GitHub: Add to the top left corner search "$contents .= '<innerblocks"
• Bitbucket: Add to top left corner search "$contents .= '<innerblocks"

Why did this bug appear?

We started using ACF blocks as soon as they were included in ACF beta release. At the time documentation was not complete and we build blocks with trial and error without realising the problems with $content variable.

[TeemuSuoranta]

Props to @tsipilai for first finding this bug

[TeemuSuoranta]

Fixed in release 6.1.0