I’m having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.
I followed an ACF tutorial by Elliot here: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/
In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says ‘This block has encountered an error and cannot be previewed.’ if I try to edit it. In the console I see this:
react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading 'add')
at e.initADA (slick.min.js?ver=6.1.1:1:19335)
at e.init (slick.min.js?ver=6.1.1:1:19101)
at new <anonymous> (slick.min.js?ver=6.1.1:1:2832)
at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
at initializeBlock (home-slider.js?ver=6.1.1:19:39)
at o (acf.min.js?ver=6.0.5:1:1417)
at Object.doAction (acf.min.js?ver=6.0.5:1:587)
at n.doAction (acf.min.js?ver=6.0.5:1:18745)
at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)
I’m using very similar code to the example in our tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. My code looks like this:
(function($){
/**
* initializeBlock
*
* Adds custom JavaScript to the block HTML.
*
* @date 15/4/19
* @since 1.0.0
*
* @param object $block The block jQuery element.
* @param object attributes The block attributes (only available when editing).
* @return void
*/
var initializeBlock = function( $block ) {
// $block.find('img').doSomething();
$block.find('.home_banner_content').slick({
fade: true,
infinite: true,
dots: false,
prevArrow: $('.nav_prev'),
nextArrow: $('.nav_next'),
autoplay: true,
autoplaySpeed: 8000,
speed: 1500,
pauseOnHover: false,
pauseOnFocus: false,
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.home_slider_block').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
}
})(jQuery);
Any help would be greatly appreciated.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚀 ACF & ACF PRO 6.0.7 are now available.
— Advanced Custom Fields (@wp_acf) January 18, 2023
✨This release contains bug fixes and improvements while we continue to work on the next major release of ACF.https://t.co/wQgAOpwmUI
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.