Вопрос или проблема
У меня возникла проблема с Slick Slider в предварительном просмотре администратора с ACF 6, используя новый способ настройки блоков block.json.
Я следовал руководству ACF от Эллиота здесь: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/
В ACF v5 с использованием старого метода добавления блоков всё работало отлично, но после обновления до ACF 6 и использования block.json блок выдает ошибку и говорит: ‘Этот блок столкнулся с ошибкой и не может быть просмотрен.’ если я пытаюсь его отредактировать. Если я проверяю и смотрю в консоль, я получаю следующее:
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)
Я использую очень похожий код на пример в руководстве для инициализации слайдера, и он работал нормально до обновления с ACF 5 до 6. Код выглядит так:
(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,
});
}
// Инициализация каждого блока при загрузке страницы (фронтенд).
$(document).ready(function(){
$('.home_slider_block').each(function(){
initializeBlock( $(this) );
});
});
// Инициализация динамического предварительного просмотра блока (редактор).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
}
})(jQuery);
Мои блоки ACF зарегистрированы в my functions.php так:
function register_acf_blocks() {
// Скрипты
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' ] );
// Стили
wp_register_style( 'slick-css', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css' );
// Блоки
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 );
А мой json файл для блока выглядит так:
{
"name": "acf/home-slider-block",
"title": "Блок на главной странице: Слайдер баннера",
"description": "Блок для отображения основного баннера на главной странице.",
"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": {
}
}
Попробуйте добавить "editorScript": [ "jquery", "slick", "app" ], в ваш файл block.json.
Замените массив на нужные скрипты, которые нужно загрузить в вашем редакторе.
Ответ или решение
При использовании Advanced Custom Fields (ACF) версии 6 вы, возможно, столкнулись с проблемой предварительного просмотра слайдера Slick в редакторе блоков WordPress. Данная проблема возникает после обновления ACF и перехода на новый способ создания блоков с использованием файла block.json. Этот процесс может быть непростым, но давайте разберемся с ним подробно.
Причины ошибки
Ошибка, с которой вы столкнулись, указывает на проблему инициализации и отсутствия необходимых свойств при попытке загрузки слайдера. В частности, из консоли мы видим сообщение:
TypeError: Cannot read properties of null (reading 'add')Это говорит о том, что библиотека Slick не может корректно инициализировать слайдер из-за того, что целевой элемент не найден или не отвечает ожидаемым условиям.
Решение проблемы
Изменения в block.json
Для того чтобы правильно инициализировать скрипты в редакторе и избежать ошибок, вы можете добавить новую секцию в ваш файл block.json. В частности, замените текущую секцию скриптов, добавив "editorScript" для правильной загрузки всех нужных файлов:
{
"name": "acf/home-slider-block",
...
"script": ["home-slider-script", "slick"],
"editorScript": [ "jquery", "slick", "home-slider-script" ],
...
}Обратите внимание, что в массивеейчас содержится скрипт home-slider-script, а также зависимости, такие как jquery и slick. Это позволит корректно загружать необходимые библиотеки в редакторе.
Обновление инициализации скриптов
Также есть смысл убедиться, что инициализация вашего слайдера происходит корректно, как в редакторе, так и на клиентской стороне. Вы можете использовать следующую конструкцию для динамической инициализации:
(function($){
var initializeBlock = function( $block ) {
if ($block.find('.home_banner_content').length) {
$block.find('.home_banner_content').slick({
fade: true,
infinite: true,
dots: false,
prevArrow: $block.find('.nav_prev'),
nextArrow: $block.find('.nav_next'),
autoplay: true,
autoplaySpeed: 8000,
speed: 1500,
pauseOnHover: false,
pauseOnFocus: false,
});
}
}
$(document).ready(function(){
$('.home_slider_block').each(function(){
initializeBlock( $(this) );
});
});
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
}
})(jQuery);Проверка подключения стилей и скриптов
Важно удостовериться, что вы успешно регистрируете свои скрипты и стили в функции register_acf_blocks. Сделайте свою функцию регистрации такой:
function register_acf_blocks() {
wp_register_script(
'slick',
'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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']
);
wp_register_style(
'slick-css',
'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'
);
register_block_type( __DIR__ . '/template-parts/blocks/home-blocks/home-slider-block' );
}
add_action( 'init', 'register_acf_blocks', 5 );При этом убедитесь, что путь к вашим скриптам и стилям верен и доступен.
Заключение
Соблюдение перечисленных выше рекомендаций поможет вам устранить проблемы с инициализацией слайдера Slick в ACF 6. Следуя этим шагам, вы сможете обеспечить корректную работу вашего блока, как в редакторе, так и на клиентской стороне. Помните о важности проверки совместимости и детальной отладки при внесении изменений в блоки ACF.