Home Forums Gutenberg Run JS when Block is Opened?


Run JS when Block is Opened?

  • I have the following block…

                'name'              => 'columns',
                'title'             => __('Columns'),
                'description'       => __('For complex multi colomn rows.'),
                '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',
                'mode' => 'auto',

    I need to run some JS when this block is being opened. For example, when I save it and come back and click on the block to open it for editting again. My first thought was to just run a click function but it isn’t working and I don’t know why. Below is my JS which I formed from the docs. My other JS works (not copied here) but this one click function wont fire.

    (function ($) {
        var initializeBlock = function ($block) {
            $('body').on('click', 'div[data-type="acf/columns"]', function () {
        if (window.acf) {
            window.acf.addAction('render_block_preview/type=columns', initializeBlock);
  • This is currently broken and render_block_preview only runs during the initial render.

    There’s a “hidden” action you can subscribe to for remounts.

    window.acf.addAction('remount', function ($el) {});
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Run JS when Block is Opened?’ is closed to new replies.