onChange metabox -> update style Gutenberg block

• tatof

• April 23, 2025 at 10:25 am

Is it posible to change a gutenberg block with data from acf metaboxes?

I made a block that shows/hides elements through settings in the page metaboxes acf. Only that block doesnt update live after changing the settings. Also after save i need to refresh the page to show the change.

Is it posible to let ACF metabox trigger update gutenberg block?

• tatof

• April 23, 2025 at 10:48 am

It is like block bindings api but without the binding..

Just need to fire a update because my block gets its data from get_field(‘meta’,$postID);

• 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);

• tatof

• April 24, 2025 at 6:34 am

oke i give up. Even tried to do it the @wordpress way with edit.js etc.

Should be a simple thing but it looks imposible..

i want to reload an ACF block when i change an ACF metabox checkbox

• mattgrshaw

• June 6, 2025 at 7:59 pm

@tatof thanks for bringing this up on ACF Chat Fridays today.

Firing off the ACF render_block_preview action won’t actually cause a re-render of the preview, it happens after the render has already happened, and is typically used for re-initializing custom JS (i.e. jQuery, etc). after a preview has been updated.

ACF should automatically fetch a new block when the block state is updated (and in my testing your call to updateBlockAttributes() is doing that), however the preview will only update if the returned HTML is different than what ACF already has from the last fetch (or preload).

Could you please clarify if the googleRev attribute being updated via updateBlockAttributes() is an ACF field on the block itself?

• tatof

• June 13, 2025 at 5:31 am

Thanks for the reply! Don’t have time right now to look at this problem. Will pick it up next week. (need to re-open the project & problem. Website is allready live with my refresh “fix”)

• tatof

• June 16, 2025 at 7:03 am

Step closer! Didnt loop the innerblocks (that was a problem)

“side_rev_go” is a ACF page meta value and doesnt exists in the ACF block.
The block renderTemplate (php) only checks if its true/false to display html.

So I need it to do this:
1. Post meta ACF field changes (true/false)
2. Value needs to be saved temporarily (in a session?)
3. Re-render the block renderTemplate so the html is shown/hidden

Here is the code i now have

(function($, acf, wpData){
    const blockName = 'tatof/content-sidebar';
    const fieldKey  = 'field_680634056964b';

    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: { _side_rev_go: newVal }
            });

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

            const getAllBlocksRecursively = (blocks) => {
                let allBlocks = [];

                blocks.forEach((block) => {
                    allBlocks.push(block);

                    if (block.innerBlocks && block.innerBlocks.length > 0) {
                        allBlocks = allBlocks.concat(getAllBlocksRecursively(block.innerBlocks));
                    }
                });

                return allBlocks;
            };
            const allBlocks = getAllBlocksRecursively(getBlocks);

            allBlocks.forEach(block => {

                if (block.name !== blockName) return;
                console.log(block.name);
                console.log(block.clientId);

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

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

                console.log(wrapper);

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

– The part “acf.doAction” re-render doesnt work

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

– And somehow i need to use the new value of “side_rev_go” in that block

ps. all the console.log items return the right value’s (name / ID / wrapper)