Gutenberg ACF Blocks – JS Not Working/Loading in Editor/Preview

• thefriendlydev

• July 30, 2021 at 5:14 pm

Made a quick video highlighting the issue:
https://share.vidyard.com/watch/uvXyzjT2gVgDK1cdbYhWKi?

Essentially, my JS works just fine on the front-end/when viewing the page, but does not in the editor when previewing.

acf_register_block_type(
    array(
      'name'              => 'team',
      'title'             => __( 'Team' ),
      'description'       => __( 'A custom Team block.' ),
      'category'          => 'blocks',
      'icon'              => 'schedule',
      'keywords'          => array( 'team' ),
      'mode'              => 'edit',
      'render_template'   => 'blocks/team.php',
      'enqueue_assets'    => function () {
        wp_enqueue_style( 'team', get_template_directory_uri() . '/dist/blocks/css/team.css', array(), filemtime( get_template_directory() . '/dist/blocks/css/team.css' ), 'all' );
        wp_enqueue_script( 'team', get_template_directory_uri() . '/dist/blocks/js/team.js', array( 'jquery', 'application' ), filemtime( get_template_directory() . '/dist/blocks/js/team.js' ), true );
      },
    )
  );

acf_register_block_type(
    array(
      'name'              => 'testimonials',
      'title'             => __( 'Testimonials' ),
      'description'       => __( 'A custom Testimonials block.' ),
      'category'          => 'blocks',
      'icon'              => 'schedule',
      'keywords'          => array( 'testimonials' ),
      'mode'              => 'edit',
      'render_template'   => 'blocks/testimonials.php',
      'enqueue_assets'    => function () {
        wp_enqueue_style( 'slick_css', get_template_directory_uri() . '/dist/vendors/css/slick.css', array(), filemtime( get_template_directory() . '/dist/vendors/css/slick.css' ), 'all' );
        wp_enqueue_script( 'slick_js', get_template_directory_uri() . '/dist/vendors/js/slick.min.js', array( 'jquery', 'application' ), filemtime( get_template_directory() . '/dist/vendors/js/slick.min.js' ), true );
        wp_enqueue_style( 'testimonials', get_template_directory_uri() . '/dist/blocks/css/testimonials.css', array(), filemtime( get_template_directory() . '/dist/blocks/css/testimonials.css' ), 'all' );
        wp_enqueue_script( 'testimonials', get_template_directory_uri() . '/dist/blocks/js/testimonials.js', array( 'jquery', 'application' ), filemtime( get_template_directory() . '/dist/blocks/js/testimonials.js' ), true );
      },
    )
  );

• pe-pe

• July 30, 2021 at 6:18 pm

Hi,
Did you create js code following these guidelines?

https://www.advancedcustomfields.com/resources/acf_register_block_type/
Section: “Adding block scripts” -> testimonial.js

• thefriendlydev

• July 30, 2021 at 7:59 pm

Yes I’ve followed this to my knowledge. Here are a few examples of my js.

features.js

(function($) {
  var initializeBlock = function( $block ) {
    function matchHeightFire() {
      $('.featureBox-icon').matchHeight({property: 'min-height'})
      $('.featureBox-content').matchHeight({property: 'min-height'})
      $('.featureBox-title').matchHeight({property: 'min-height'})
      $('.featureBox').matchHeight({property: 'min-height'})
    }
    matchHeightFire()
  }

  $( document ).ready(function() {
    $('.block--features').each(function() {
      initializeBlock( $(this) );
    })
  })

  if( window.acf ) {
    window.acf.addAction( 'render_block_preview/type=features', initializeBlock );
  }
})( jQuery );

testimonials.js

(function($) {
  var initializeBlock = function( $block ) {
    console.log('testimonials loaded')
    setTimeout(function () {
      $( '.testimonials' ).slick(
        {
          dots: false,
          infinite: true,
          arrows: false,
          autoplay: true,
          autoplaySpeed: 8000,
          slidesToShow: 1,
          adaptiveHeight: true,
          //centerMode: false,
          variableWidth: false,
          fade: true,
          cssEase: 'linear'
        }
      )
    }, 0);

    $('.testimonials').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      $('.testimonialsNav-show').removeClass('active')
      $(this).closest('.testimonialsBox').siblings('.testimonialsNav').find('.testimonialsNav-show[data-slide="' + nextSlide + '"]').addClass('active')
    });

    $('.testimonialsNav-show[data-slide]').click(function(e) {
      e.preventDefault();

      $('.testimonialsNav-show').removeClass('active')
      $(this).addClass('active')

      var slideno = $(this).data('slide');
      $(this).parent().siblings('.testimonialsBox').find('.testimonials').slick('slickGoTo', slideno);
    });
  }

  $( document ).ready(function() {
    $('.block--testimonials').each(function(){
      initializeBlock( $(this) );
    });
  })

  if( window.acf ) {
    window.acf.addAction( 'render_block_preview/type=testimonials', initializeBlock );
  }
})( jQuery );

• pe-pe

• July 31, 2021 at 9:56 am

I’m just learning the Gutenberg editor and I might be wrong, but it seems to me that inside the initializeBlock function you can only operate on the $block variable. Try this:

var initializeBlock = function( $block ) {
    $testimonials = $block.find('.testimonials');
    $testimonials.slick();
}

• agencymumbai

• July 31, 2021 at 10:33 am

I’m just learning the Gutenberg editor and I might be wrong, but it seems to me that inside the initialize block function you can only operate on the $block variable. Try this:

Mumbai Models

• thefriendlydev

• July 31, 2021 at 1:44 pm

The issue is no JS files are being loaded from the blocks. The CSS is being loaded for example when viewing page source I see:
<link rel='stylesheet' id='testimonials-css' href='http://enosix.localhost/wp-content/themes/enosix/dist/blocks/css/testimonials.css?ver=1627702841' media='all' />

But there is no JS file. So that’s the issue. Does anyone have an example of working JS in the preview? It would seem that

'enqueue_assets'    => function () {
        wp_enqueue_style( 'team', get_template_directory_uri() . '/dist/blocks/css/team.css', array(), filemtime( get_template_directory() . '/dist/blocks/css/team.css' ), 'all' );
        wp_enqueue_script( 'team', get_template_directory_uri() . '/dist/blocks/js/team.js', array( 'jquery', 'application' ), filemtime( get_template_directory() . '/dist/blocks/js/team.js' ), true );
      },

Is not working for JS.

• pe-pe

• July 31, 2021 at 3:06 pm

I have the same code and it works for me. The js file appears in the footer (back-end/gutenberg and front-end). Maybe try this:

function my_init() {

        wp_register_style( 'team', get_template_directory_uri() . '/dist/blocks/css/team.css', array(), filemtime( get_template_directory() . '/dist/blocks/css/team.css' ), 'all' );
        wp_register_script( 'team', get_template_directory_uri() . '/dist/blocks/js/team.js', array( 'jquery', 'application' ), filemtime( get_template_directory() . '/dist/blocks/js/team.js' ), true );
}
add_action('init', 'my_init');

// acf_register_block_type:
'enqueue_assets'    => function () {
        wp_enqueue_style( 'team' );
        wp_enqueue_script( 'team' );
      },

• thefriendlydev

• August 1, 2021 at 12:32 am

Ya even doing it your way, which is more or less the same still won’t load the scripts in admin.

• hypergolica

• August 1, 2021 at 8:30 am

Dear All,

If I understand this thread correctly, the implication is that the ACF isn’t allowing the blocks js to load? Is that correct?

I’m running WordPress 5.8 and Enfold 4.8.5. I last used the Block Editor on July 11th… but now it no longer appears when I try and create a new post.

Here’s a screenshot of what I see when I try to edit a post with my ACF’s:
https://www.dropbox.com/s/dlqc3wcyrndg3jx/Screen%20Shot%202021-08-01%20at%2013.27.18.png?dl=0

So if I’ve understood this thread correctly, is there yet a fix for this?

Thank you.