Support

Account

Home Forums Gutenberg InnerBlocks + Slick slider

Helping

InnerBlocks + Slick slider

    • uxbox

    • 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/slick-carousel@1.8.1/slick/slick.css', array(), $ver );
                  wp_enqueue_style( 'slick-theme', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array(), $ver);
                  wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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?

Viewing 1 post (of 1 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.