Wordpress Gutenberg ACF Blocks How to Add JS When Block is Opened

Question

I'm using ACF Blocks and have the following block.

acf_register_block_type(array(
    'name'              => 'columns',
    'title'             => __('Columns'),
    'description'       => __('For complex multi colomn rows.'),
    // 'category'          => 'formatting',
    'render_template'   => get_template_directory() . '/includes/blocks/templates/columns.php',
    'enqueue_style'     => get_template_directory_uri() . '/includes/blocks/css/columns.css',
    'enqueue_script'    => get_template_directory_uri() . '/includes/blocks/js/columns.js',
    'keywords' => array('rows', 'content', 'column'),
    'supports' => array('align' => array('wide', 'full')),
    'mode' => 'auto',
));

I need to run some JS when I click on the block in the editor to open it for editing. I don't know if there is a standard way of doing this so I thought I could just use a click event to run my function, but it won't fire. Here is a pic of the block in the DOM.

Block HTML

I added the script following the docs here. (At the bottom there is a "Adding block scripts" example)

Here is my trimmed down JS...

(function($){
    var initializeBlock = function ($block) {

        $('body').on('click', 'div[data-type="acf/columns"]', function () {
            console.log('teeeeeeeest');
        });

        //... Other JS put here works
    }

    if (window.acf) {
        window.acf.addAction('render_block_preview/type=columns', initializeBlock);
    }

})(jQuery);

How come this click function won't fire? Is there another way of doing this?

Weintraub

Just to check, is the JS actually included on the page? (can you find it in the page source? And does a console.log('test') outside the initializeBlock function fire?) – Talbott

Are you using a child theme or a parent? If child then you should use get_stylesheet_directory_uri() instead. Anyway, check the network inspector if the js file is loaded. – Redoubt