这是一个特定的问题，但我希望我不是唯一一个这样做的人！
更新到WP 5.6后，我的所有网站都在块编辑器中呈现Slick Slider时出现问题。在前端，滑块很好。
我认为问题是，如果我有一个内部有Slick Slider的块，并且该块在WP编辑器中设置为"全宽"，则Slick Slide无法在块编辑器中找到窗口的正确大小。然后，滑块扩展到视口之外，将块编辑器设置框推离屏幕，使编辑器非常不可用。
正如标题所示，我使用的是最新版本的光滑滑块，并通过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>
滑动滑块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%;
}
}
}
我遇到了同样的问题
将此行添加到gutenberg编辑器css
.interface-interface-skeleton__editor {
overflow: auto;
}