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

Question

我已经设置了 ACF Gutenberg Block 以在后端编辑器中渲染光滑的滑块，并且我放置了一个 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_register_block 函数上 ACF 文档页面的最底部，您必须挂钩“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 实现在网站的后端和前端都对我有用。

希望这会有所帮助，如果它也适合您，请告诉我！