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);
    • oxy

    • August 30, 2019 at 12:23 am

    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)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.