Reply To: onChange metabox -> update style Gutenberg block

• tatof

• April 24, 2025 at 5:12 am

Oke getting pretty close to a solution but can’t figure out how to trigger “rerender” on the acf block.

(function($, acf, wp){
  const blockName = 'tatof/content-side';
  const fieldKey  = 'field_1234567890abc';

  acf.addAction('ready', () => {
    const field = acf.getField(fieldKey);
    if (! field) return;

    field.on('change', 'input, select, textarea, checkbox', () => {
      const newVal = field.val();

      // Push into WP data store
      wp.data.dispatch('core/editor').editPost({
        meta: { event_date: newVal }
      });

      // Update the block attribute
      const { getBlocks } = wp.data.select('core/block-editor');
      const { updateBlockAttributes } = wp.data.dispatch('core/block-editor');

      getBlocks().forEach(block => {
        if (block.name !== blockName) return;

        updateBlockAttributes(block.clientId, { googleRev: newVal });

        // Force ACF to re-render preview
        const wrapper = document.querySelector('.wp-block[data-type="'+blockName+'"][data-block="'+block.clientId+'"]');

        if (wrapper) {
          acf.doAction(
            'render_block_preview',
            $(wrapper),
            {
              name:       blockName,
              attributes: block.attributes,
              mode:       'preview'
            }
          );
        }
      });
    });
  });
})(jQuery, acf, wp.data);