How to make a script load after Custom Block is loaded in the editor?

I couldn’t find a built in ACF way of doing this.

Instead, in my block’s PHP render function I added

printf( "<script>window.jQuery(window).trigger('acf/loaded/block-name');</script>" );

This uses jQuery as an event bus to trigger an event when the block is rendered. You might need to include a check that you’re in the admin so the event won’t be triggered in the frontend. My WordPress is headless so this wasn’t an issue for me.

Then, in your JavaScript, you can do:

$( window ).on( 'acf/loaded/block-name', function() {
    // rest of your code here
} )

By including the block name in the event you can check different events for individual blocks.

Leave a Comment