Hi,
I’m trying to make hero section where one column has slick slider (repeater field with images) and second one with innerBlocks.
Problem:
When I edit slider in any way (change order of sub_fields/ add new/ remove one) block preview slick slider can’t re-initialize.
If I comment out ‘jsx’ or change to ‘false’ – slider is working as expect.
In demo version i just simplify everything and copy-paste from code examples – same effect:
functions.php
add_action('acf/init', 'my_acf_init_blocks');
function my_acf_init_blocks() {
// Check function exists.
if( function_exists('acf_register_block_type') ) {
// Register a restricted block.
acf_register_block_type(array(
'name' => 'test',
'title' => 'Test',
'description' => 'A test content block.',
'category' => 'formatting',
'mode' => 'preview',
'supports' => array(
'align' => true,
'mode' => false,
'jsx' => true
),
'enqueue_assets' => function(){
$theme = wp_get_theme( );
$ver = $theme->version;
wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), $ver );
wp_enqueue_style( 'slick-theme', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css', array(), $ver);
wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), $ver, true );
wp_enqueue_style( 'test-css', get_template_directory_uri() . '/test.css', array(''), $ver, 'all' );
wp_enqueue_script( 'test-js', get_template_directory_uri() . '/test.js', array('jquery'), $ver, true );
},
'render_template' => 'test.php',
));
}
}
test.php
$classes = '';
if( !empty($block['className']) ) {
$classes .= sprintf( ' %s', $block['className'] );
}
if( !empty($block['align']) ) {
$classes .= sprintf( ' align%s', $block['align'] );
} ?>
<div class="test <?php echo esc_attr($classes); ?>">
<div class="test-col">
<InnerBlocks />
</div>
<div class="test-col slider">
<?php if( have_rows('slides') ): ?>
<div class="slides">
<?php while( have_rows('slides') ): the_row();
$image = get_sub_field('image');
?>
<div>
<?php echo wp_get_attachment_image( $image['id'], 'full' ); ?>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
</div>
</div>
test.js
(function($){
var initializeBlock = function( $block ) {
$block.find('.slides').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
adaptiveHeight: true,
focusOnSelect: true
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.slider').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=test', initializeBlock );
}
})(jQuery);
As alternative option from formums: test.js
(function($){
var initializeBlock = function( $block ) {
function getSliderSettings() {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
adaptiveHeight: true,
focusOnSelect: true
}
$block.find('.slides').slick( getSliderSettings() );
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.slider').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=test', initializeBlock );
}
})(jQuery);
I believe there’s a solution to reint slick in better wahy, but maybe it’s just bug?
