Reply To: onChange metabox -> update style Gutenberg block

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