Support

Account

Home Forums Gutenberg Conditionally Enqueueing Files if Page Contains Custom Block

Solved

Conditionally Enqueueing Files if Page Contains Custom Block

  • 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/slick-carousel@1.8.1/slick/slick.css', array(), null, 'all');
    		wp_enqueue_script('slick-slider-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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/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.

  • 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/content/logo-carousel.php',
    		'enqueue_assets'	=> function(){
    			wp_enqueue_style( 'slick-slider-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null, 'all');
    			wp_enqueue_script('slick-slider-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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.

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.