InnerBlocks + Slick slider

• Paul Bystrzan

• September 22, 2020 at 10:23 am

Hi,
I’m trying to make hero section where one column has slick slider (repeater field with images) and second one with innerBlocks.

Problem:
When I edit slider in any way (change order of sub_fields/ add new/ remove one) block preview slick slider can’t re-initialize.

If I comment out ‘jsx’ or change to ‘false’ – slider is working as expect.

In demo version i just simplify everything and copy-paste from code examples – same effect:

functions.php

add_action('acf/init', 'my_acf_init_blocks');
function my_acf_init_blocks() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register a restricted block.
        acf_register_block_type(array(
            'name'              => 'test',
            'title'             => 'Test',
            'description'       => 'A test content block.',
            'category'          => 'formatting',
            'mode'              => 'preview',
            'supports'          => array(
                'align' => true,
                'mode' => false,
                'jsx' => true
            ),
            'enqueue_assets' 	=> function(){
              $theme = wp_get_theme( );
              $ver = $theme->version;
              wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), $ver );
              wp_enqueue_style( 'slick-theme', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css', array(), $ver);
              wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), $ver, true );
              wp_enqueue_style( 'test-css', get_template_directory_uri() . '/test.css', array(''), $ver, 'all' );
              wp_enqueue_script( 'test-js', get_template_directory_uri() . '/test.js', array('jquery'), $ver, true );
            },
            'render_template' => 'test.php',
        ));
    }
}

test.php

$classes = '';
if( !empty($block['className']) ) {
    $classes .= sprintf( ' %s', $block['className'] );
}
if( !empty($block['align']) ) {
    $classes .= sprintf( ' align%s', $block['align'] );
} ?>

<div class="test <?php echo esc_attr($classes); ?>">
    <div class="test-col">
    	<InnerBlocks  />
    </div>
    <div class="test-col slider">
			<?php if( have_rows('slides') ): ?>
				<div class="slides">
					<?php while( have_rows('slides') ): the_row();
						$image = get_sub_field('image');
						?>
						<div>
							<?php echo wp_get_attachment_image( $image['id'], 'full' ); ?>
						</div>
					<?php endwhile; ?>
				</div>
			<?php else: ?>
				<p>Please add some slides.</p>
			<?php endif; ?>
    </div>
</div>

test.js

(function($){
    var initializeBlock = function( $block ) {
        $block.find('.slides').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            adaptiveHeight: true,
			focusOnSelect: true
        });
    }

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

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

})(jQuery);

As alternative option from formums: test.js

(function($){
    var initializeBlock = function( $block ) {
        function getSliderSettings() {
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            adaptiveHeight: true,
			      focusOnSelect: true
        }
        $block.find('.slides').slick( getSliderSettings() );
    }

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

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

})(jQuery);

I believe there’s a solution to reint slick in better wahy, but maybe it’s just bug?

• eadadmin

• October 20, 2022 at 2:41 pm

Hi – I know this is super old, but did you ever figure out a solution? I too am able to get it work if jsx => false, but not if it’s set to true (therefore anything with innerblocks is bombing). Thank you!

• eadadmin

• October 20, 2022 at 3:20 pm

If anyone finds this as I did, I got it working by basically “unslicking” and reslicking my slides:

(function($){

    var initializeBlock = function( $block ) {
		var sliders = $block.find('.testimonial-quotes');
		if (window.acf) {
			if (sliders.hasClass('slick-initialized')) {
				sliders.slick('unslick');
			}
		}
		sliders.slick({
			dots: true,
			infinite: true,
			speed: 800,
			slidesToShow: 1,
			slidesToScroll: 1,
			draggable: true,
			fade: true,
			cssEase: 'linear',
			arrows: false,
			dotsClass: 'ep-block-dots',
			autoplay: true,
			autoplaySpeed: 5000,
		});
    }

    // Initialize dynamic block preview (editor).
    if( window.acf ) {
        window.acf.addAction( 'render_block_preview/type=wed-testimonials', initializeBlock );
		//window.acf.addAction('remount/type=wed-testimonials', initializetestimonials );
    }

})(jQuery);

Hope that helps someone!