Ya even doing it your way, which is more or less the same still won’t load the scripts in admin.
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.
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 );
