• thefriendlydev

• in reply to: Gutenberg ACF Blocks – JS Not Working/Loading in Editor/Preview
• 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.

• thefriendlydev

• in reply to: Gutenberg ACF Blocks – JS Not Working/Loading in Editor/Preview
• 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.

• thefriendlydev

• in reply to: Gutenberg ACF Blocks – JS Not Working/Loading in Editor/Preview
• 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 );