js fires before block is rendered

• yueng

• May 19, 2019 at 2:28 am

I followed the docs and my block (a block using slickjs) works on the fronted but doesn’t render properly inside the Gutenberg editor.

(function($){

    var init_banner = function ($block) {
        console.log($block);
        $block.slick({
            adaptiveHeight: true
        });
    }
    
    $(document).ready(function(){    
        init_banner($('.banners'));
    });

    // Initialize dynamic block preview (editor).
    if (window.acf) {
        window.acf.addAction('render_block_preview/type=banner', init_banner);
    }

})(jQuery);

When $block is dumped to the console it has a length of zero. During this time the editor has the spinning animation until it eventually renders the block. Since the js has already fired the slider doesn’t initialize. If I call slick in the console, the block starts working: jQuery(‘.banners’).slick()

Is there a way to fire the script when the block has rendered in the editor?

• graphix

• May 28, 2019 at 6:34 am

I actually had exactly the same issue after creating a slideshow block with slick, as well as all of my other blocks that use javascript.

The problem was, I copied and pasted the wp_enqueue_script some documentation at some point and I had (notice the lack of a version #):
wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), true );

When I should have had:
wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '1.0.0', true );

For more info, see the WordPress Docs here.

• yueng

• May 28, 2019 at 11:35 pm

Thanks, @graphix but that enqueues for the site not the Gutenberg editor. The problem I’m having is that the slider javascript doesn’t fire at the correct time inside Gutenberg.

• graphix

• May 29, 2019 at 3:36 am

@yueng actually, the wp_enqueue_script, when included in the enqueue_assets part of acf_register_block should include it in the frontend and backend for your block, here’s what mine looks like:

...
'enqueue_assets' 	=> function(){ 
    	//Stack the Assets in the Order we Need Them
    	wp_enqueue_style( 'slideshow-block-style', get_template_directory_uri() . '/template-parts/block/css/slideshow.css', array('general-block-style') ); //Requires all-blocks.css
	wp_enqueue_style( 'slick-main', get_template_directory_uri() . '/template-parts/block/css/slick/slick.css' );
	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/template-parts/block/css/slick/slick-theme.css' );
	wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '', true ); 
	wp_enqueue_script( 'slideshow-block-script', get_template_directory_uri() . '/template-parts/block/js/slideshow.js', array('jquery'), '', true ); 
},
...

Also, I took a second look at my slideshow javascript and the only real difference I have is an each jQuery function (which might help):

$(document).ready(function(){
        $('.banners').each(function(){
            init_banner( $(this) );
        });
    });

Let me know if that helps.

• graphix

• May 29, 2019 at 3:43 am

@yueng actually, wp_enqueue_scripts() should load on the frontend & backend for your blocks when within the enqueue_assets attribute in acf_register_block(), here’s my code that is loading the JS file in the frontend and backend:

'enqueue_assets' 	=> function(){ 
	//Stack the Assets in the Order we Need Them
	wp_enqueue_style( 'general-block-style', get_template_directory_uri() . '/template-parts/block/css/all-blocks.css', array('foundation') ); //Requires Foundation
	wp_enqueue_style( 'slideshow-block-style', get_template_directory_uri() . '/template-parts/block/css/slideshow.css', array('general-block-style') ); //Requires all-blocks.css
	wp_enqueue_style( 'slick-main', get_template_directory_uri() . '/template-parts/block/css/slick/slick.css' );
	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/template-parts/block/css/slick/slick-theme.css' );
	wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '', true ); 
	wp_enqueue_script( 'slideshow-block-script', get_template_directory_uri() . '/template-parts/block/js/slideshow.js', array('jquery'), '', true ); 
},

I took a second look at my slideshow JS file and the only other difference I’m seeing is the each jQuery function (that iterates through every slideshow block on the frontend/backend) like so:

$(document).ready(function(){
    $('.banners').each(function(){
        init_banner( $(this) );
    });
});