我已经设置了 ACF Gutenberg Block 以在后端编辑器中呈现光滑的 slider ,并且我放置了一个 console.log 以确保它是否加载,并且确实加载了。但是,它不会像在前端那样呈现 slider 。
我试过同时使用 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');
最终结果应该是一个 slider ,但是,即使选择了激活光滑 slider 的词,图像仍然显示堆叠在 acf gutenberg block 的后端。它从不在后端初始化添加 div 类 slick-initialized slick-slider
它仍然保持相同的 div 类 <div class="slider">
最佳答案
我在使用 Flickity slider 时为同一个问题苦苦挣扎了很长时间,但我花在研究这个问题上的时间并没有浪费,我找到了答案并让它发挥作用!
我相信您的所有排队都是正确的,因为 console.log 显示了通知,所以一切都很好。
根据 ACF documentation page on acf_register_block function 的最底部您必须连接到“render_block_preview”操作并应用 JS 代码“就好像该 block 是新绘制的一样”- 这样做是因为在加载后期编辑页面和实际编辑该 block 时该 block 会多次呈现。
因此您的 Init-slick.js 代码应如下所示:
(function($){
var initializeBlock = function( $block ) {
$(".slider").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
rows: 0
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
initializeBlock();
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview', initializeBlock );
}
})(jQuery);
我没有测试这段代码,但类似的 Flickity 实现在网站的后端和前端都对我有用。
希望这对您有所帮助,如果对您也有帮助,请告诉我!
关于javascript - ACF Gutenberg block 不在后端呈现光滑的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55557841/