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.

  • Same works fine for acf_register_block(), thank you!

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

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.