Я настроил блок ACF Gutenberg для рендеринга скользкого ползунка в бэкэнд-редакторе, и я поместил console.log, чтобы убедиться, что он загружается и работает.Тем не менее, он не рендерит ползунок, как на передней части.
Я пытался использовать enqueue_block_assets
и enqueue_block_editor_assets
, однако ни один из этих способов не работает.
Мои очереди на JavaScript:
wp_enqueue_script(
'slick',
plugins_url('slick.js', __FILE__),
['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
filemtime(plugin_dir_path(__FILE__) . 'slick.js')
);
wp_enqueue_script(
'slick-init',
plugins_url('init-slick.js', __FILE__),
['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
filemtime(plugin_dir_path(__FILE__) . 'init-slick.js')
);
Мои очереди на CSS:
wp_enqueue_style(
'slick-css',
plugins_url( '/resources/slick.css', __FILE__),
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime( plugin_dir_path( __FILE__ ) . '/resources/slick.css')
);
wp_enqueue_style(
'slick-theme-css',
plugins_url( '/resources/slick-theme.css' __FILE__),
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime( plugin_dir_path( __FILE__ ) . '/resources/slick-theme.css')
);
Мой файл Init-slick.js:
(function() {
$(".slider").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
rows: 0
});
});
console.log("I'm loaded!");
Всего:
function slider_block()
{
wp_enqueue_script(
'slick',
plugins_url('slick.js', __FILE__),
['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
filemtime(plugin_dir_path(__FILE__) . 'slick.js')
);
wp_enqueue_script(
'slick-init',
plugins_url('init-slick.js', __FILE__),
['wp-blocks', 'wp-element', 'wp-components', 'wp-i18n'],
filemtime(plugin_dir_path(__FILE__) . 'init-slick.js')
);
wp_enqueue_style(
'slick-css',
get_stylesheet_directory_uri() . '/resources/slick.css',
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime(plugin_dir_path(__FILE__) . '/resources/slick.css')
);
wp_enqueue_style(
'slick-theme-css',
get_stylesheet_directory_uri() . '/resources/slick-theme.css',
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime(plugin_dir_path(__FILE__) . '/resources/slick-theme.css')
);
}
add_action('enqueue_block_assets', 'slider_block');
Конечным результатом должен быть ползунок, однако даже при выбранном слове для активации скользящего ползунка изображения по-прежнему отображаются в бэкэнде для блока acf gutenberg.Он никогда не инициализируется на сервере, добавляя классы div slick-initialized slick-slider
, он все еще остается с тем же классом div <div class="slider">