Блок ACF Gutenberg не отображает скользящий слайдер на бэкэнде - PullRequest
Новая
       60

Блок ACF Gutenberg не отображает скользящий слайдер на бэкэнде

1 голос
/ 07 апреля 2019

Я настроил блок 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">

1 Ответ

1 голос
/ 07 мая 2019

Я долго боролся с той же проблемой с помощью ползунка Flickity, но мое время, потраченное на изучение этого, не пропало даром, и я нашел ответ и заставил его работать!

Я считаю, что все ваши постановки правильны, так как console.log показывает уведомление, поэтому все хорошо.

Согласно самой нижней части страницы документации ACF для функции acf_register_block вам нужно подключиться к действию "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 работала для меня как во внутреннем, так и во внешнем интерфейсе сайта.

Надеюсь, это поможет, дайте мне знать, если это сработает и для вас!

...