WYSIWYG fields in ACF Blocks don't save without switching to Preview first

[DrZivil]

Description

WYSIWYG fields inside ACF Blocks (particularly when nested in repeaters or groups) silently lose their content when saving the post. The content is only persisted if the user manually switches the block to "Preview" mode before saving.

Steps to Reproduce

1. Create an ACF Block with a repeater field containing a WYSIWYG sub-field
2. Add the block to a post in the Gutenberg editor
3. Add a repeater row and type content into the WYSIWYG field
4. Click "Save" (without switching the block to Preview first)
5. Reload the page — the WYSIWYG content is gone

Expected Behavior

WYSIWYG field content should be saved regardless of whether the block is in Edit or Preview mode.

Actual Behavior

Content typed into WYSIWYG fields is lost on save unless the block is switched to Preview mode first. Other field types (text, select, etc.) save correctly.

Root Cause

In acf-pro-blocks.js, the BlockForm.componentDidAppend() method binds change detection to the block wrapper:

// ACF source (deobfuscated):
i.on("change keyup", () => {
    clearTimeout(a);
    a = setTimeout(s, 300);  // s() calls acf.serialize() → setAttributes({ data })
});

[DrZivil]

Workaround

We've built a working fix that we've been running in production. It hooks into ACF's own
wysiwyg_tinymce_init action to bridge TinyMCE's iframe
events to the block wrapper.

https://levels.dev/acf-wysiwyg-block-save-fix

JavaScript (editor-wysiwyg-sync.js)

  (function () {
      if ( typeof acf === 'undefined' ) return;

      acf.addAction( 'wysiwyg_tinymce_init', function ( ed
   ) {
          var textarea = ed.getElement();
          if ( ! textarea ) return;

          var $blockWrapper = jQuery( textarea ).closest( 
  '.acf-block-fields' );
          if ( ! $blockWrapper.length ) return;

          var syncTimer = null;

          function syncContent() {
              if ( syncTimer ) clearTimeout( syncTimer ); 
              syncTimer = setTimeout( function () {       
                  ed.save();
                  $blockWrapper.trigger( 'change' );      
              }, 300 );
          }

          ed.on( 'change keyup paste input undo redo',    
  syncContent );
          ed.on( 'blur', function () {
              if ( syncTimer ) clearTimeout( syncTimer ); 
              ed.save();
              $blockWrapper.trigger( 'change' );
          });
      });

      // Safety net: sync all editors on post save        
      if ( typeof wp !== 'undefined' && wp.data ) {       
          var isSaving = false;
          wp.data.subscribe( function () {
              var editor = wp.data.select( 'core/editor'  
  );
              if ( ! editor ) return;
              var saving = editor.isSavingPost();
              var autosaving = editor.isAutosavingPost(); 
              if ( saving && ! autosaving && ! isSaving ) 
  {
                  isSaving = true;
                  if ( typeof tinyMCE !== 'undefined' ) { 
                      tinyMCE.triggerSave();
                      jQuery( '.acf-block-fields'
  ).trigger( 'change' );
                  }
              }
              if ( ! saving ) isSaving = false;
          });
      }
  })();

Enqueue (PHP)

  add_action( 'enqueue_block_editor_assets', function() { 
      wp_enqueue_script(
          'acf-wysiwyg-block-fix',
          plugin_dir_url( __FILE__ ) .
  'assets/js/editor-wysiwyg-sync.js',
          [ 'acf-input', 'wp-data' ],
          '1.0.0',
          true
      );
  });

How it works

ACF's BlockForm.componentDidAppend() binds change/keyup
on the .acf-block-fields wrapper, which calls
acf.serialize() → setAttributes({ data }). Since TinyMCE
lives in an iframe, those events never reach the
wrapper. This script bridges the gap by calling
ed.save() (writes to textarea) and then triggering
change on the wrapper — using ACF's own APIs, no
monkey-patching.

Tested on ACF Pro 6.7.0.2, WordPress 6.7–6.9, Chrome &
Firefox, multiple hosting environments.