WordPress: получить идентификатор блока в JavaScript - PullRequest
Новая
       76

WordPress: получить идентификатор блока в JavaScript

0 голосов
/ 01 июля 2019

Я создал пользовательский блок Гутенберга для отображения слайдера.

Я использую пример из ACF: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

Пока все работает нормально.Но теперь мне нужен идентификатор блока внутри файла JavaScrit пользовательского блока.

Вот код JS из примера: 

(function($){

    var initializeBlock = function( $block ) {
        $block.find('.slides').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            adaptiveHeight: true,
            focusOnSelect: true
        });     
    }

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

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

})(jQuery);

Я изменил части кода JS, например:это (slick-vars - только примеры): 

var initializeBlock = function( $block ) {
            $block.find('.slides').slick({
                dots: false,
                arrows: false,
                appendArrows: $('.slider-arrows_BLOCK-ID'),
                slidesToShow: 1,
                mobileFirst: true,
            });
        }

Как видите, мне нужно добавить идентификатор блока в эту строку:

appendArrows: $('.slider-arrows_BLOCK-ID'),

Есть ли способ получить идентификатор текущего блока внутри файла JS?

1 Ответ

1 голос
/ 01 июля 2019

Вы можете получить элемент относительно элемента .slides 

var initializeBlock = function( $block ) {
            var arrows = $block.find('[class^="slider-arrows"]');
            $block.find('.slides').slick({
                dots: false,
                arrows: false,
                appendArrows: arrows,
                slidesToShow: 1,
                mobileFirst: true,
            });
        }
...