Reply To: js fires before block is rendered

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