'Block > is equal to > All' not triggering re-render of admin page.

[joseph-coulam]

Hi there,

I have a very specific problem. I've added an ACF field group that applied to all blocks using the following location rules: Block > is equal to > All

This allows me to add custom margin, padding, animation (and a bunch of other global things) to all of my blocks, rather than manually adding that functionality per block. It wraps each template using a render callback.

I would expect updating any of these fields would trigger a re-render of the Gutenberg ACF block previews, but it doesn't. The fields do update, but only after manually refreshing the page. I think this means JSX isn't behaving properly.

Is this a bug, or is it working as intended? If it's not a bug - is there a way of making ACF fields to trigger Gutenberg's state to update? Thanks for your help in advance!

[elliotcondon]

Hi @joseph-coulam

What you have described is certainly a bug of sorts. Can you please help us diagnose the issue by providing us a copy of the exact PHP needed to register your block, along with exports of the Field Groups connected to it?

We can set this up locally and test out why those fields are not triggering a refresh as expected.

[joseph-coulam]

Hi @elliotcondon - I think it appears to be an issue with the acf_ajax_fetch_block() method.

I've added some examples below of how blocks are registered.

Here's an example of how I'm registering a block type:

    // Header
    acf_register_block_type(array(
        'name'              => 'hero',
        'title'             => __('Hero'),
        'description'       => __('A hero to introduce a page'),
        'category'          => 'formatting',
        'icon'              => 'editor-textcolor',
        'keywords'          => array('hero'),
        'supports'          => array(
            'align' => true,
            'jsx' => true
        ),
        'render_callback'   => 'acf_block_callback',
        'custom_data'       => array(
            'template_location' => '/template-parts/blocks/hero/hero.php'
        ),
    ));

And here is an example of how I'm wrapping each Block using the callback. Bear in mind there are a lot of functions outside of the callback scope that get the relevant block data.

function acf_block_callback($block)
{
    // ID
    $blockID = getBlockID($block);

    // Theme
    $blockTheme = getBlockTheme($block);

    // Animation
    $blockAnimation = getBlockAnimation($block);

    // Wrapper Width
    $blockWidth = getBlockWidth($block);

    // Set margin and padding
    $blockMargin = getBlockSpacing($block, 'margin');
    $blockPadding = getBlockSpacing($block, 'padding');

    // Set background Image
    $backgroundImage = getBackgroundImage($block);

    //Set block hidden states
    $blockHidden = getBlockHiddenStates($block);

?>

    <!-- Container -->
    <section id="<?= $blockID; ?>" class="relative overflow-hidden bg-cover bg-center <?= $blockMargin ?> <?= $blockTheme ?> <?= $blockHidden ?>" <?= $backgroundImage ?>>
        <div <?= $blockAnimation?> class="relative <?= $blockWidth ?> <?= $blockPadding ?> container mx-auto">
            <?php include get_template_directory() . $block['custom_data']['template_location'] ?>
        </div>
    </section>

<?php } ?>

I've attached the JSON as a txt file. It's a bit too meaty for github, but github doesn't allow JSON attachments.

acf-export-2021-06-13.txt

[elliotcondon]

@joseph-coulam

Thanks for the code snippet + JSON file. If you haven't heard the news yet, the wonderful team at Delicious Brains have acquired the ACF project! I'm happy to lend a hand with this ticket, but wonder if it be possible for you to create a simplified version of this block type that doesn't use any additional functions. The easier you can make it for us to register and replicate your block type issue, the faster we can work on a fix 👍.

[CreativeDive]

@joseph-coulam I also use global ACF fields for each block type and I can confirm updating the block HTML inside the editor is working well after changing the values of the global ACF fields.