Проблема с шириной слайдера Slick Slider в редакторе WP 5.6 и ACF Pro

Это немного специфическая проблема, но я надеюсь, что я не одинок с ней!

После обновления до WP 5.6 на всех моих веб-сайтах возникают проблемы с отображением Slick Slider в редакторе блоков. На передней панели ползунки в порядке.

Я считаю, что проблема в том, что если у меня есть блок со Slick Slider внутри него, и этот блок установлен на «полную ширину» в редакторе WP, Slick Slider не может найти правильный размер окна в редакторе блоков. Затем ползунки расширяются за пределы области просмотра, выталкивая окно настроек редактора блоков за пределы экрана и делая редактор практически непригодным для использования.

Как следует из названия, я использую последнюю версию скользящего слайдера и визуализирую его с помощью пользовательского блока ACF в WP 5.6.

До 5.6 все нормально отображалось. Я надеюсь, что решением является простое изменение CSS, но я не могу найти что-то, что работает.

Вот мой код:

Блок АКФ

acf_register_block_type(array(
        'name'              => 'image-slider',
        'title'             => __('Image Slider'),
        'description'       => __('A slider of images.'),
        'render_template'   => get_template_directory().'/inc/blocks/core/image-slider.php',
        'render_callback'   => 'render_block__image_slider',
        'category'          => 's2f-blocks',
        'icon'              => 'images-alt2',
        'keywords'          => array( 'slider', 'images', 's2f' ),
        //'mode'                => false
    ));
    if ( !function_exists('render_block__image_slider') ) {
        function render_block__image_slider( $block, $content = '', $is_preview = false, $post_id = 0 ) {
            include(get_template_directory().'/inc/blocks/core/image-slider.php');
        }
    }

Шаблон рендеринга блока ACF

/**
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

$block_name = 'image-slider-block';

// Create id attribute allowing for custom "anchor" value.
$id = 'slider-' . $block['id'];
if ( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = $block_name;
if ( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if ( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
if ( $is_preview ) {
    $className .= ' is-admin';
}

$slidesToShow = get_field('slides_to_show') ?: '3';

$lightbox = get_field('lightbox_images') ?: false;
if ( $lightbox ) {
    $className .= ' is-lightbox';
}

$crop = get_field('crop_images') ?: false;
if ( $crop ) {
    $className .= ' is-cropped';
}

$arrows = get_field('show_arrows') ?: false;
if ( $arrows ) {
    $className .= ' has-arrows';
}

$slides = get_field('slides');


?>
<div id = "<?php echo esc_attr($id); ?>" class = "slider <?php echo esc_attr($className); ?> wp-block">
    <?php if ( $slides ): ?>
        <div class = "slides" data-slides = "<?php echo $slidesToShow; ?>">
            <?php foreach($slides as $slide) : ?>
                <div class = "slide text-center">
                    <?php if ( $lightbox ) : ?>
                        <a href = "<?php echo wp_get_attachment_image_url($slide['image']['id'], 'large', false); ?>" data-fancybox = "<?php echo esc_attr($id); ?>">
                    <?php endif; ?>
                            
                        <?php echo wp_get_attachment_image( $slide['image']['id'], 'large' ); ?>
                            
                    <?php if ( $lightbox ) : ?>
                        </a>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <p>Please add some slides.</p>
    <?php endif; ?>
</div>

Слик Слайдер JS

/**
         * 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 initialiseSliderImageBlock = function( $block ) {
            
            var slider = $block.find('.slides');
            var slidesToShow = slider.data('slides');
            var arrows = false;

            if ( !slidesToShow ) {
                slidesToShow = 3;
            }

            if ( isAdmin() ) {
                var container = $block.find('.image-slider-block');
                if ( container.hasClass('has-arrows') ) {
                    arrows = true;
                }
            } else {
                if ( $block.hasClass('has-arrows')) {
                    arrows = true;
                }
            }

            
            
            // init slider
            slider.find('.slide').each(function() {
                $(this).addClass('show-slide');
            });
            
            if ( !slider.hasClass('slick-slider') ) {
                slider.slick({
                    dots: true,
                    arrows: arrows,
                    infinite: false,
                    speed: 300,
                    slidesToShow: slidesToShow,
                    autoplay: false,
                    responsive: [
                        {
                            breakpoint: 1300,
                            settings: {
                                dots: true,
                                arrows: false
                            }
                        },
                        {
                            breakpoint: 1100,
                            settings: {
                                slidesToShow: Math.ceil(slidesToShow/2),
                                dots: true,
                                arrows: false
                            }
                        },
                        {
                            breakpoint: 700,
                            settings: {
                                slidesToShow: 2,
                                dots: true,
                                arrows: false
                            }
                        },
                        {
                            breakpoint: 450,
                            settings: {
                                slidesToShow: 1,
                                dots: true,
                                arrows: false
                            }
                        },
                    ]
                });
                
                slider.on('init beforeChange', function(){
                    $.fn.matchHeight._update();
                });
    
            }
            
            if ( !isAdmin() ) {
                initialiseHeightMatch($block);
            }
        }

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

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

слайдер css

.slider { 
    position: relative; 
    z-index:1; 
    outline: none; 
    overflow: hidden; 
    .slide  { 
        height: 100%; 
        float: left !important; 
    }
}

.slider .slide:nth-child(n+2)   { display: none; }
.slider .slide.show-slide       { display: block; }

.slick-list,
.slick-track                    { height: 100%; }

.slick-slider .slick-slide      { float: left; position: relative; width: 100%; outline: none; }

.slick-list                     { overflow: hidden; outline: none !important; position: relative; }
.slick-track                    { margin: 0 auto; outline: none; }

.slick-next,
.slick-prev { 
    -webkit-appearance: none;
    outline: none;
    border: none;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    font-size: 1px;
    color: rgba(0,0,0,0);
    width: 84px;
    transition: 0.3s all ease;
    z-index: 10;
    
    background-color: rgba(0,0,0,0.1);
    //background-image: url(../images-dist/icon-white-arrow-left.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.slick-next:hover,
.slick-prev:hover                       { width: 95px; }

.slick-next { 
    right: 0; 
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"; 
}
.slick-prev                             { left: 0; }



ul.slick-dots {
    padding: 0;
    text-align: center;
    list-style: none;
    li {
        display: inline-block;
        list-style: none;
        
        button {
            border: none;
            background-color: grey;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 0 5px;
            font-size: 0;
            outline: none;
            cursor: pointer;
        }
        &.slick-active button {
            background-color: yellow;
        }
    }
}
.image-slider-block {
&.is-cropped {
    .slick-track {
        display: flex;
        justify-content: stretch;
        .slick-slide > div {
            height: 100%;
        }
    }
    img {
        height: 100%;
        flex: 1;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%; 
    } 
}
&.is-lightbox {
    a {
        display: block;
        height: 100%;
    }
}
}