Support

Account

Home Forums Gutenberg Problems with Slick slider in ACF v6

Unread

Problems with Slick slider in ACF v6

  • 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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.