jQuery not working in Gutenberg Editor view

Hi,

Have been playing around with ACFBlock functionality to create custom blocks. First of all hats of to the team ACF to make the block creation process soo easier.

Now I am building a simple Tabs block which uses jQuery to work. The block output on frontend works perfect but Tabs doesn't function/work in the editor. I am providing the code below, any help will be much appreciated.

Register Function

add_action('acf/init', 'gutenberg_acf_blocks');
function gutenberg_acf_blocks() {

   acf_register_block(array(
       'name'              => 'tabs',
       'mode'                => 'preview',
       'title'             => __('Tabs'),
       'description'       => __('A custom tabs block.'),
       'render_template'   => plugin_dir_path( __FILE__ ) . 'block-templates/tabs.php',
       'category'          => 'formatting',
       'enqueue_assets' => function(){
          wp_enqueue_style( 'acf-blocks-css', plugin_dir_url( __FILE__ ) . 'css/acfblocks.css' );
          wp_enqueue_script( 'acf-blocks-js', plugin_dir_url( __FILE__ ) . 'js/acfblocks.js', array('jquery'), '', false );
        },
   ));
}
}

Render Code from render_template

<div class="tabs">

<ul class="tabs-list">
<?php while( have_rows('tabs'): the_row(); ?>
  <?php $tab_title = get_sub_field('tab_title'); ?>
  <li><a href="#tab-<?php echo get_row_index();?>"><?php echo $tab_title; ?></a></li>
<?php endwhile; ?>
</ul>

     
<?php while( have_rows('tabs'): the_row(); ?>

    <?php $tab_content = get_sub_field('tab_content'); ?>
  
      <div id="tab-<?php echo get_row_index();?>" class="tab">
           <?php echo $tab_content; ?>
      </div>

<?php endwhile; ?>
</div>

<?php endif; ?>

Custom JS code

jQuery(document).ready(function($){

$(".tabs-list li:first-child").addClass("active");
$(".tabs .tab:first").addClass("active");

 $(".tabs-list li a").click(function(e){
     e.preventDefault();
 });


$(".tabs-list li").click(function(){
 var tabid = $(this).find("a").attr("href");     
 $(".tabs-list li,.tabs div.tab").removeClass("active");
 $(".tab").hide();   // hiding open tab
 $(tabid).show();    // show tab
 $(this).addClass("active"); //  adding active class to clicked tab

});

});

Thanks

Start by reproducing the issue in the Gutenberg editor and inspect the asset registration in the block definition, along with block-templates/tabs.php and js/acfblocks.js. Verify whether the block markup and script are available in the editor context; done means the tabs behave in the editor as they already do on the frontend.