7

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?

Jon
  • 295
  • 2
  • 11
  • 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?) – Pim Schaaf May 31 '22 at 06:02
  • 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. – Djanym Jul 20 '22 at 21:52

0 Answers0