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: /
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. If I inspect and look in the console I get 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 GponentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)
I'm using very similar code to the example in the tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. The code looks like this:
(function($){
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);
My ACF blocks are registered in my functions.php like this:
function register_acf_blocks() {
// Scripts
wp_register_script( 'slick', '//cdn.jsdelivr/npm/[email protected]/slick/slick.min.js', [ 'jquery', 'acf' ] );
wp_register_script( 'home-slider-script', get_template_directory_uri() . '/template-parts/blocks/home-blocks/home-slider-block/home-slider.js', [ 'jquery', 'acf' ] );
// Styles
wp_register_style( 'slick-css', '//cdn.jsdelivr/npm/[email protected]/slick/slick.css' );
// Blocks
register_block_type( __DIR__ . '/template-parts/blocks/home-blocks/home-slider-block' );
register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/intro-block' );
register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/cottage-slider-block' );
}
add_action( 'init', 'register_acf_blocks', 5 );
And my json file for the block looks like this:
{
"name": "acf/home-slider-block",
"title": "Homepage block: Home banner slider",
"description": "A block to display the main homepage banner.",
"style": "slick-css",
"script": ["home-slider-script", "slick"],
"category": "custom",
"icon": "format-gallery",
"apiVersion": 2,
"keywords": [],
"acf": {
"mode": "preview",
"renderTemplate": "home-slider-block.php"
},
"align": "full",
"styles": [],
"supports": {
"align": true,
"anchor": true,
"alignContent": false,
"color": {
"text": false,
"background": true,
"link": false
},
"alignText": false,
"fullHeight": false
},
"attributes": {
}
}
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. If I inspect and look in the console I get 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 the tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. The code looks like this:
(function($){
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);
My ACF blocks are registered in my functions.php like this:
function register_acf_blocks() {
// Scripts
wp_register_script( 'slick', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', [ 'jquery', 'acf' ] );
wp_register_script( 'home-slider-script', get_template_directory_uri() . '/template-parts/blocks/home-blocks/home-slider-block/home-slider.js', [ 'jquery', 'acf' ] );
// Styles
wp_register_style( 'slick-css', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css' );
// Blocks
register_block_type( __DIR__ . '/template-parts/blocks/home-blocks/home-slider-block' );
register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/intro-block' );
register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/cottage-slider-block' );
}
add_action( 'init', 'register_acf_blocks', 5 );
And my json file for the block looks like this:
{
"name": "acf/home-slider-block",
"title": "Homepage block: Home banner slider",
"description": "A block to display the main homepage banner.",
"style": "slick-css",
"script": ["home-slider-script", "slick"],
"category": "custom",
"icon": "format-gallery",
"apiVersion": 2,
"keywords": [],
"acf": {
"mode": "preview",
"renderTemplate": "home-slider-block.php"
},
"align": "full",
"styles": [],
"supports": {
"align": true,
"anchor": true,
"alignContent": false,
"color": {
"text": false,
"background": true,
"link": false
},
"alignText": false,
"fullHeight": false
},
"attributes": {
}
}
Try adding "editorScript": [ "jquery", "slick", "app" ], to your block.json file.
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-script
Change out the array to call the scripts needed to load in your editor.