Conditionally Enqueueing Files if Page Contains Custom Block

• KiwiCreative

• July 1, 2019 at 11:02 pm

Hello,

I’m really loving how easy it is to create custom blocks. I’m running into a roadblock and hoping someone can help me out.

I created a custom block for a Logo Carousel. I’m using Slick Slider for the carousel. I want to conditionally enqueue slick slider assets if the logo carousel is added to a page. I’m trying to use has_block() but I haven’t used it before and it’s not working for me.

In my functions.php file, I have the following code:

// Enqueue 3rd party scripts and styles
function plugin_scripts() {
	// If page has Logo Carousel block, enqueue slick slider scripts
	if( has_block('acf/logo_carousel') ) {
		// Slick Slider - https://kenwheeler.github.io/slick/
		wp_enqueue_style( 'slick-slider-css', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), null, 'all');
		wp_enqueue_script('slick-slider-js', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array( 'jquery' ), null, true );
		
	}

}
add_action('wp_enqueue_scripts', 'plugin_scripts', 1000 );

And here is my code registering the block. It shows up fine in Gutenberg.

// register logo carousel block
	acf_register_block_type(array(
		'name'	=>	'logo_carousel',
		'title'	 =>	__('Logo Carousel'),
		'description'	=>	__('Logo Carousel'),
		'mode'	=> 'edit',
		'render_template'	=>	'blocks/wp-content/logo-carousel.php',
		'enqueue_script'    => get_template_directory_uri() . '/blocks/scripts/logo-carousel.js',
		'category'	=> 'my-custom-blocks',
		'icon'	=>	'images-alt2',
		'keywords'	=>	array( 'logo', 'carousel', 'slider'),
	));

The logo-carousel.js file is just initializing the slider, but because the slick slider assets aren’t loading, slick() is throwing an error.

Any help would be greatly appreciated. As I mentioned, I have never used has_block() or has_blocks() so not sure if I’m approaching this wrong.

• KiwiCreative

• July 6, 2019 at 1:20 am

Found a solution and wanted to post it in case someone was looking for the same thing. I realized I was approaching this wrong. I later found that acf_register_block_type() function accepts a argument called 'enqueue_assets'

So now my code looks like this, and it works like a charm.

// register logo carousel block
	acf_register_block_type(array(
		'name'	=>	'logo_carousel',
		'title'	 =>	__('Logo Carousel'),
		'description'	=>	__('Logo Carousel'),
		'mode'	=> 'edit',
		'render_template'	=>	'blocks/wp-content/logo-carousel.php',
		'enqueue_assets'	=> function(){
			wp_enqueue_style( 'slick-slider-css', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), null, 'all');
			wp_enqueue_script('slick-slider-js', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array( 'jquery' ), null, true );
			wp_enqueue_script('slick-slider-init', get_template_directory_uri() . '/blocks/scripts/logo-carousel.js', array(), null, true );
		},
		'category'	=> 'my-custom-blocks',
		'icon'	=>	'images-alt2',
		'keywords'	=>	array( 'logo', 'carousel', 'slider'),
	));

I feel kind of dumb for not figuring it out earlier, especially since I had already been using 'enqueue_script'. Learning experience I guess.

• webksde

• September 15, 2020 at 11:45 pm

Same works fine for acf_register_block(), thank you!

• webksde

• October 28, 2020 at 8:44 pm

Sometimes adding scripts / libraries to Gutenberg Editor (backend) cause serious problems. In case someone else have problems you can simply use if(! is_admin()) inside enqueue_assets, like so:

` ‘enqueue_assets’ => function () {
// Load assets only on frontend – the libs cause unwanted sideeffects in gutenberg
if(! is_admin()){
wp_enqueue_script(‘filtrify’, get_stylesheet_directory_uri() . ‘/frontend_libraries/filtrify/js/’ . foundationpress_asset_path(‘filtrify.min.js’), array(‘jquery’), null, true);
wp_enqueue_script(‘video-modal’, get_stylesheet_directory_uri() . ‘/frontend_libraries/modal-video/js/’ . foundationpress_asset_path(‘jquery-modal-video.min.js’), array(‘jquery’), null, true);
wp_enqueue_script(‘video-collection’, get_stylesheet_directory_uri() . ‘/frontend_libraries/webkswct-base/js/’ . foundationpress_asset_path(‘webkswct.gb_video_collection.js’), array(‘jquery’), null, true);
wp_enqueue_style(‘video-modal-styles’, get_template_directory_uri() . ‘/frontend_libraries/modal-video/css/modal-video.min.css’, false, ‘1.0.0’);
}
},

• webksde

• October 28, 2020 at 8:46 pm

Sometimes adding scripts / libraries to Gutenberg Editor (backend) cause serious problems. In case someone else have problems you can simply use if(! is_admin()) inside enqueue_assets, like so:

` ‘enqueue_assets’ => function () {
// Load assets only on frontend – the libs cause unwanted sideeffects in gutenberg
if(! is_admin()){
wp_enqueue_script(‘filtrify’, get_stylesheet_directory_uri() . ‘/libraries/stuff/js/foo.min.js’, array(‘jquery’), null, true);
}
},