Customization – How to make script load after custom block is loaded in editor?

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

Instead, in the PHP render function of my block I added

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

It uses jQuery as an event bus to trigger an event when the block is rendered. You may need to include a check that you are in the admin, so the event will not be triggered in the frontend. My wordpress is headless so this was not a problem for me.

Then, in your JavaScript, you can do:

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

You can see different events for different blocks by including the block name in the event.

Leave a Comment