Problems with Slick slider in ACF v6

• Laurence1898

• December 1, 2022 at 3:00 pm

I’m having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.

I followed an ACF tutorial by Elliot here: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says ‘This block has encountered an error and cannot be previewed.’ if I try to edit it. In the console I see this:

react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading 'add')
    at e.initADA (slick.min.js?ver=6.1.1:1:19335)
    at e.init (slick.min.js?ver=6.1.1:1:19101)
    at new <anonymous> (slick.min.js?ver=6.1.1:1:2832)
    at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
    at initializeBlock (home-slider.js?ver=6.1.1:19:39)
    at o (acf.min.js?ver=6.0.5:1:1417)
    at Object.doAction (acf.min.js?ver=6.0.5:1:587)
    at n.doAction (acf.min.js?ver=6.0.5:1:18745)
    at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
    at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)

I’m using very similar code to the example in our tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. My code looks like this:

(function($){

    /**
     * initializeBlock
     *
     * Adds custom JavaScript to the block HTML.
     *
     * @date    15/4/19
     * @since   1.0.0
     *
     * @param   object $block The block jQuery element.
     * @param   object attributes The block attributes (only available when editing).
     * @return  void
     */
    var initializeBlock = function( $block ) {
        // $block.find('img').doSomething();

		$block.find('.home_banner_content').slick({
            fade: true,
            infinite: true,
            dots: false,
            prevArrow: $('.nav_prev'),
            nextArrow: $('.nav_next'),
            autoplay: true,
            autoplaySpeed: 8000,
            speed: 1500,
            pauseOnHover: false,
            pauseOnFocus: false,
		});
    }

    // Initialize each block on page load (front end).
    $(document).ready(function(){
        $('.home_slider_block').each(function(){
            initializeBlock( $(this) );
        });
    });

    // Initialize dynamic block preview (editor).
    if( window.acf ) {
        window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
    }

})(jQuery);

Any help would be greatly appreciated.

• hawpmedia

• August 3, 2023 at 3:53 pm

Any luck on this? I have a similar problem

• Laurence1898

• August 4, 2023 at 6:56 am

Nope. I asked on Stack Exchange too and no one had anything there either. I’ve yet to find anyone able to provide a way to get sliders working properly in the editor since ACF v6.

I even got in touch with ACF support and at first they were quite responsive, but eventually they just told me that it was a Slick Slider problem (despite me telling them I had the same issue with a different slider library too) and then stopped responding.

I just make the slider non-functional in the admin area these days, with admin-only styles to make it look like the front end version.

If you find a solution please do come back and share it here! It might help other people too.

• Jovan89

• August 28, 2024 at 10:29 am

Had the same issue. Since the Slick is modifying the DOM, it cannot work with JSX support, so you need to set it to false. In my case it looks something like this:

    "supports": {
        "jsx": false,
        "align": ["full"],
        "anchor": true,
        "className": true,
        "reusable": false
    },

My JS is similar to the original code:

import './styles.scss';

import $ from 'jquery';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel';

$(function() {
	/**
	 * initializeBlock
	 *
	 * Adds custom JavaScript to the block HTML.
	 *
	 * @date    15/4/19
	 * @since   1.0.0
	 *
	 * @param   object $block The block jQuery element.
	 * @param   object attributes The block attributes (only available when editing).
	 * @return  void
	 */
	let initializeBlock = function( $block ) {
		const $slider = $block.find('.slider');

		const slickSettings = {
			slidesToShow: 4,
			slidesToScroll: 4,
			lazyLoad: 'ondemand',
			dots: true,
			arrows: false,
			responsive: [
				{
				breakpoint: 1281,
					settings: {
						slidesToShow: 3,
						slidesToScroll: 3,
					},
				},
				{
				breakpoint: 600,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 2,
					},
				},
			],
			adaptiveHeight: true,
			focusOnSelect: true
		}

		$slider.not('.slick-initialized').slick(slickSettings);
	}

	// Initialize each block on page load (front end).
	$('.slider').each(function() {
		initializeBlock( $(this) );
	});

	// Initialize dynamic block preview (editor).
	if( window.acf ) {
		window.acf.addAction( 'render_block_preview/type=acf-plugin/slider', initializeBlock );
	}
});

I know it’s the old question, but just in case someone else encounters the same issue.