WP 5.6 编辑器和 ACF Pro 的平滑滑块宽度问题

Question

这是一个有点具体的问题，但我希望我不是一个人遇到这个问题！

更新到 WP 5.6 后，我的所有网站都在块编辑器中呈现 Slick Slider 时遇到问题。在 front-end 上，滑块很好。

我认为问题在于，如果我有一个内部带有 Slick Slider 的块，并且该块在 WP 编辑器中设置为 'full width'，则 Slick Slider 无法找到 window 在块编辑器中。然后滑块扩展到视口之外，推动块编辑器设置框 off-screen 并使编辑器非常不可用。

如标题所示，我使用的是最新版本的 slick slider，并且我通过 WP 5.6 中的自定义 ACF 块呈现它。

在 5.6 之前，一切都呈现得很好。我希望解决方案是一个简单的 CSS 更改，但我终其一生都找不到可行的方法。

这是我的代码：

ACF块

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>

Slick Slider 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%;
    }
}
}

Answer 1

我遇到了同样的问题

将此行添加到古腾堡编辑器css

.interface-interface-skeleton__editor {
  overflow: auto;
}

WP 5.6 编辑器和 ACF Pro 的平滑滑块宽度问题

Slick Slider Width issue with WP 5.6 editor & ACF Pro

javascript

css

wordpress

slick.js

ACF块

ACF 块渲染模板

Slick Slider JS

滑块css