Reply To: ACF Slider not firing in preview mode

• apmeyer

• September 17, 2020 at 2:56 am

I’m having this same issue. Using slick slider instead of owl. When I add images to either a repeater or gallery the callback does not fire. Here’s my JS. Some of the slider logic is imported, but that doesn’t seem to be the issue. It won’t even console log the message and date I’ve got setup.

Now, if I save the page and reload the editor then things seem to work fine. The callback fires and the slider properly initializes. It’s only when a new block is added and edited that this problem appears.

import { default as sliders } from "../../../assets/src/js/modules/_sliders.js";

(function ($) {

	/**
	 * initializeBlock
	 *
	 * Adds custom JavaScript to the block HTML.
	 *
	 * @date    15/4/19
	 * @since   1.0.0
	 *
	 * @param   object $block The block jQuery element.
	 * @param   object attributes The block attributes (only available when editing).
	 * @return  void
	 */
	var initializeBlock = function( $block ) {

		var d = new Date();
		var n = d.toLocaleTimeString();

		console.log( 'setup sliders on back end ' + n );

		var slider = $block[0].querySelector(".js-image-slider");

		if (slider) {
			sliders.setupImageSlider(slider);
		}

	}

	// Initialize each block on page load (front end).
	$(document).ready(function () {

		const imageSliders = document.querySelectorAll(".js-image-slider");

		if (imageSliders) {
			imageSliders.forEach(element => {
				sliders.setupImageSlider(element);
			});
		}

	});

	// Initialize dynamic block preview (editor).
	if (window.acf) {
		window.acf.addAction('render_block_preview/type=image-slider', initializeBlock);
	}

})(jQuery);

       acf_register_block_type( array(
        'name'            => 'image-slider',
        'title'           => __( 'Image slider', 'apm-theme' ),
        'description'     => __( 'Displays an image slider', 'apm-theme' ),
        'render_template' => 'blocks/acf-image-slider/acf-image-slider.php',
        'category'        => self::get_block_category('slug'),
        'mode'            => 'preview',
        'enqueue_assets' => function() {
          APM_Theme::enqueue_vendor_resources( 'slick' );
          wp_enqueue_script( 'apm-quote-slider', get_template_directory_uri() . '/blocks/acf-image-slider/assets/acf-image-slider.min.js', array('jquery', 'slick'), '', true );
        },
       ) );