WordPress: Get Block ID in JavaScript

Question

I created a custom Gutenberg block to display a slider.

I'm using the example from ACF: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

Everything works fine so far. But now I need the block ID inside of the JavaScrit file of the custom block.

Here's the JS code from the example:

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

I've changed parts of the JS code like this (slick-vars are just examples):

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

As you can see, I need to add the block ID to this line:

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

Is there any way to get the ID of the current block inside the JS file?

Answer 1

You could get the element relative to the .slides element

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