javascript - ACF Gutenberg Block Not Rendering Slick Slider on Backend - Stack Overflow

admin管理员组

文章数量:1335097

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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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">

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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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-ponents', '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">

• javascript
• php
• wordpress
• advanced-custom-fields
• wordpress-gutenberg

Share Improve this question Follow edited Apr 7, 2019 at 10:31 Chai asked Apr 7, 2019 at 10:16 ChaiChai 1311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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!

I found a very helpful answer for how to solve this: https://github./WordPress/gutenberg/issues/12603#issuement-513945557

Credit goes to coderaaron

1. In your block’s edit function:

edit(props) {

    ...

    const customEvent = new Event( 'gutenbergSlick' );

    ...

    return ... {

        document.dispatchEvent( customEvent ),

        ...

    }

}

2. In the PHP file that registers my blocks:

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

3. In my 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,
    });
};

本文标签： javascriptACF Gutenberg Block Not Rendering Slick Slider on BackendStack Overflow