Question

我已经设置了ACF Gutenberg块以在后端编辑器中呈现平滑的滑块，并且我放置了console.log以确保它是否已加载并且可以加载。但是，它不像在前端那样渲染滑块。

我尝试同时使用enqueue_block_assets和enqueue_block_editor_assets，但是这些都不起作用。

我的JavaScript入队：

    wp_enqueue_script(
        'slick',
        plugins_url('slick.js', __FILE__),
        ['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
        filemtime(plugin_dir_path(__FILE__) . 'slick.js')
    );

    wp_enqueue_script(
        'slick-init',
        plugins_url('init-slick.js', __FILE__),
        ['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
        filemtime(plugin_dir_path(__FILE__) . 'init-slick.js')
    );

我的CSS入队：

wp_enqueue_style(
   'slick-css',
   plugins_url( '/resources/slick.css', __FILE__),
   [  'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
   filemtime( plugin_dir_path( __FILE__ ) . '/resources/slick.css')
);

wp_enqueue_style(
   'slick-theme-css',
   plugins_url( '/resources/slick-theme.css' __FILE__),
   [  'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
   filemtime( plugin_dir_path( __FILE__ ) . '/resources/slick-theme.css')
);

我的Init-slick.js文件：

(function() {
  $(".slider").slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
    rows: 0
  });
});

console.log("I'm loaded!");

总共：

function slider_block()
{

    wp_enqueue_script(
        'slick',
        plugins_url('slick.js', __FILE__),
        ['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
        filemtime(plugin_dir_path(__FILE__) . 'slick.js')
    );

    wp_enqueue_script(
        'slick-init',
        plugins_url('init-slick.js', __FILE__),
        ['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
        filemtime(plugin_dir_path(__FILE__) . 'init-slick.js')
    );

    wp_enqueue_style(
        'slick-css',
        get_stylesheet_directory_uri() . '/resources/slick.css',
        [  'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
        filemtime(plugin_dir_path(__FILE__) . '/resources/slick.css')
    );

    wp_enqueue_style(
        'slick-theme-css',
        get_stylesheet_directory_uri() . '/resources/slick-theme.css',
        [  'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
        filemtime(plugin_dir_path(__FILE__) . '/resources/slick-theme.css')
    );

}

add_action('enqueue_block_assets', 'slider_block');

最终结果应该是一个滑块，但是，即使使用选定的单词来激活平滑滑块，图像仍显示为堆积在acf gutenberg块的后端。它永远不会在后端添加div类slick-initialized slick-slider进行初始化，而仍然与相同的div类<div class="slider">

Answer 1

我在Flickity滑块上为相同的问题苦苦挣扎了很长时间，但是我花在研究这个问题上的时间并没有浪费，我找到了答案并使之成功！

我相信您的所有入队都是正确的，因为console.log正在显示通知，所以一切顺利。

根据ACF documentation page on acf_register_block function的最底部，您必须挂入“ render_block_preview”操作并应用JS代码“就像重新绘制了块一样”-之所以这样做是因为块被多次渲染加载帖子编辑页面并实际编辑块时。

因此您的Init-slick.js代码应如下所示：

(function($){

    var initializeBlock = function( $block ) {
        $(".slider").slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          adaptiveHeight: true,
          rows: 0
        });
    }

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

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

})(jQuery);

我没有测试此代码，但是类似的Flickity实现在网站的后端和前端都为我工作。

希望这会有所帮助，让我知道它是否对您也有用！

Answer 2

我找到了一个非常有帮助的答案来解决这个问题： https://github.com/WordPress/gutenberg/issues/12603#issuecomment-513945557

信贷转到 coderaaron

在块的编辑功能中：

edit(props) {

    ...

    const customEvent = new Event( 'gutenbergSlick' );

    ...

    return ... {

        document.dispatchEvent( customEvent ),

        ...

    }

}

在注册我的块的PHP文件中：

wp_enqueue_script(
    'slick-carousel',
    plugin_dir_url( __FILE__ ) . ‘assets/slick/slick.js’,
    array( 'jquery' ),
    filemtime( plugin_dir_url( __FILE__ ) . ‘assets/slick/slick.js’ ),
    true
);
wp_enqueue_script(
    'carousel-frontend’,
    plugin_dir_url( __FILE__ ) . 'assets/slick/frontend.js',
    array( 'slick-carousel' ),
    filemtime( plugin_dir_url( __FILE__ ) . 'assets/slick/frontend.js' ),
    true
);

在我的frontend.js中：

jQuery( document ).ready( function() {
    createSlider();
} );

document.addEventListener( 'gutenbergSlick', function( e ) {
    window.setTimeout( createSlider, 1000 );
}, false );

const createSlider = function() {
    $(".slider").not(".slick-initialized").slick({
        dots: false,
        arrows: false,
        infinite: true,
        fade: true,
        autoplay: true,
        autoplaySpeed: 3000,
        slidesToShow: 1,
        adaptiveHeight: false,
        pauseOnHover: false,
    });
};

ACF Gutenberg块未在后端渲染光滑滑块

2 个答案: