ACF Gutenberg Block Not Rendering Slick Slider on Backend

Question

I've set up the ACF Gutenberg Block to render slick slider in the backend editor, and I put a console.log to make sure to see if it loads, and it does. However, it does not render a slider like it does on the front end.

I've tried using both enqueue_block_assets and enqueue_block_editor_assets however neither of these work.

My enqueueing for 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')
    );

My enqueueing for 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')
);

My Init-slick.js file:

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

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

In all:

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');

The end result should be a slider however, even with the chosen word to activate slick slider the images still show stacked in the backend for the acf gutenberg block. It never initializes on the backend adding the div classes slick-initialized slick-slider it still remains with the same div class <div class="slider">

Answer 1

I struggled with the same issue for a long time with the Flickity slider but my time spent researching this didn't go to waste and I found the answer and made it work!

I believe all of your enqueueing is correct, as the console.log is showing the notice, so all good there.

As per the very bottom of the ACF documentation page on acf_register_block function you have to hook into the "render_block_preview" action and apply the JS code "as if the block was freshly painted" - that is done because the block is rendered multiple times when loading the post editing page and actually editing the block.

So your Init-slick.js code should look like this:

(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);

I did not test this code, but a similar Flickity implementation worked for me both in the backend and the frontend of the site.

Hope this helps, let me know if it works out for you as well!