Gutenberg Image impedes ACF block data saving

• knuch

• July 24, 2019 at 5:39 pm

Hi,
I realise that the blog post I opened last month was in the wrong forum.

https://support.advancedcustomfields.com/forums/topic/gutenberg-image-impedes-acf-block-data-saving/

I’ll copy the content here for good measure. Feel free to close one of the topics (As I don’t seem to be able to do so)

Versions
ACF – 5.8.2
WordPress – 5.2.1

Problem
Custom blocks with ACF fields cannot be correctly saved when placed after a core/image block (even if several other core blocks are placed in-between.

Behavior identified:
The first of our ACF custom block that follows any core/image block is having issues converting its ACF fields IDs to the corresponding aliases. As long as it was previously saved, everything is fine, but as soon as we update any value in the custom block while the image is before, then the values are not saved correctly.

Test case

• Install a fresh WP install
• Manually install ACF 5.8.1
• Register the following block in twentynineteen/functions.php:

  function register_acf_block_types() {
  	// register a testimonial block.
  	acf_register_block_type(array(
  			"name"              => "testimonial",
  			"title"             => __("Testimonial"),
  			"description"       => __("A custom testimonial block."),
  			"render_template"   => "template-parts/block-testimonial.php",
  			"category"          => "formatting",
  			"icon"              => "admin-comments",
  			"keywords"          => array( "testimonial", "quote" ),
  	));
  }
  // Check if function exists and hook into setup.
  if( function_exists("acf_register_block_type") ) {
  	add_action("acf/init", "register_acf_block_types");
  }

• add rendering to twentynineteen/template-parts/block-testimonial.php:

  php
  <?php
  $separator = "<br/>----------<br/>";
  echo "<b>" . $block["name"] . "</b>";
  echo $separator;
  echo $block["data"]["title"];
  echo $separator;
  echo $block["data"]["_title"];
  echo $separator;
  

• add an ACF group through the interface for this block
• edit a page
• add our custom block
• save
• add an image before
• edit block
• save
• the block is not correctly saved

No specific error has been thrown in the javascript console during the tests, and all http calsl to the WP Ajax admin have been successful. Tested on chrome / Edge and Windows / MacOS

The data format that should be recieved after saving and refreshing:

What is recieved:

This data has the exact same format as what the block receives while editing the custom blocks in Gutenberg and switching between edit mode and view mode. Normally, when saving and reloading, these values are translated to the aliases of our ACFs, as shown in the first screenshot, but in this particular situation, it is not the case.

Video demo