Cycle2 Slideshow Fails to Initialize in WP Block Preview

  • Resolved InHouse

    (@inhouse)


    5 years, 9 months ago

    Hello, I have created a new block using the register_acf_block_types function as demonstrated here.

    
// Register ACF blocks
function register_acf_block_types() {
    acf_register_block_type(array(
        'name'              => 'Slideshow',
        'title'             => __('Slideshow'),
        'description'       => __('A slideshow.'),
        'render_template'   => 'includes/slideshow.php',
        'category'          => 'layout',
        'icon'              => 'slides',
        'keywords'          => array( 'slideshow', 'gallery', 'images' ),
        'post_types' => array('news', 'page'),
    ));
}
// Check if function exists and hook into setup.
if( function_exists('acf_register_block_type') ) {
    add_action('acf/init', 'register_acf_block_types');
}

    The images display properly in both the block edit and preview modes. What I’m struggling to accomplish is to make the Cycle2 slideshow initialize in the block preview mode. I’m using the correct “cycle-slideshow” class which should auto initialize.

    The Cycle2 script is successfully enqueued in the page editor via:

    
function my_block_plugin_editor_scripts() {
    wp_enqueue_script(
        'my-block-editor-js',
		get_theme_file_uri('/scripts/jquery.cycle2.min.js'),
		[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ]
    );
    wp_enqueue_script( 'cycle2swipe', get_template_directory_uri() . '/scripts/jquery.cycle2.swipe.min.js', array(), '1.0.0', true, ['wp-blocks'] );
}
// Hook the enqueue functions into the editor
add_action( 'enqueue_block_editor_assets', 'my_block_plugin_editor_scripts' );

    
<?php $images = get_field('slideshow'); ?>
<div class="slideshow cycle-slideshow"
	data-cycle-fx="fadeout"
	data-cycle-manual-fx="fadeout"
	data-cycle-speed=2000
	data-cycle-timeout=6000
	data-cycle-prev="#prev"
	data-cycle-next="#next"
	data-cycle-swipe=true
	data-cycle-swipe-fx="fadeout"
	data-cycle-manual-speed="300"
	data-cycle-slides=".slide"
	data-cycle-pause-on-hover="true"
	data-cycle-random="false"
	>
	<?php foreach( $images as $image ): ?>
        <div class="slide">
		<img src="<?php echo $image['sizes']['banner']; ?>" alt="<?php echo $image['alt']; ?>" />
        </div><!--slide-->
	<?php endforeach; ?>
</div><!--slideshow-->

    This is my first attempt to work with the block preview so I’m a bit unsure as to what I’m missing. Assuming it’s something obvious! Any help is appreciated!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @inhouse

    Since this relates to functionality that is specific to the Advanced Custom Fields plugin, I would recommend going through their support channels for this question. Here’s a place to start:

    https://www.ads-software.com/support/plugin/advanced-custom-fields/

    Thread Starter InHouse

    (@inhouse)

    @coreymckrill Respectfully, I disagree but thanks for taking the time to reply ?? The Advanced Custom Fields portion is working as expected. Where I’m falling short is initializing the Cycle2 slideshow in the block preview in the post editor. I was only including the information about ACF to be as thorough as possible. Any other insights are certainly welcome!

    Sorry, I assumed that the Cycle2 library was provided by ACF as well.

    When you say “preview mode” you mean clicking the Preview button at the top of the editor and viewing the post in a new tab, right?

    The first thing I would try is adding your scripts function to an additional hook so that they get enqueued on the front end. Right now I suspect they only get enqueued in the editor interface. So something like:

    add_action( 'wp_enqueue_scripts', 'my_block_plugin_editor_scripts' );

    Thread Starter InHouse

    (@inhouse)

    No, Cycle2 is a jquery library I am enqueueing manually.

    The block preview is what I’m describing; not previewing the post on the front-end. Here’s a screenshot: https://www.dropbox.com/s/ptbiwxo3oancopt/Screen%20Shot%202019-05-29%20at%204.57.11%20PM.png?dl=0

    Can you confirm that the way I have enqueued the script will not apply to the block preview and only the block editor? It’s in my original post.

    Ah, so I think that the “Switch to Preview” button is specific to blocks created through ACF. Blocks registered via standard WP methods don’t have that.

    So, just spitballing a couple more ideas here:

    1) The way the scripts are enqueued looks ok to me, with one exception: it doesn’t appear that you have jQuery listed as a dependency for your core Cycle2 script. That may or may not make a difference, because it seems like jQuery would already be loaded anyway, but it wouldn’t hurt to try adding it to the array.

    2) I don’t know exactly how ACF’s block preview works, but if it’s rendering the HTML markup on the spot, when you click that Preview button, it could be that Cycle2 isn’t picking up on your cycle-slideshow class because it’s already been initialized at that point.

    Thread Starter InHouse

    (@inhouse)

    Oh man, I had no idea the block preview wasn’t native to WP >5.0! Sorry for the confusion. Blocks are still very new to me. I appreciate your help and I will post back here once I get to the bottom of the issue.

    Thread Starter InHouse

    (@inhouse)

    For now I have added the scripts to my ‘render_template’ file rather than via wp_enqueue_script and Cycle2 is initializing properly. Maybe there’s a better way to accomplish this but I’m still learning the best practices.

    
<script src="<?php echo bloginfo('template_url'); ?>/scripts/jquery.cycle2.min.js" type="text/javascript" defer></script>

    Sounds good! Thanks for the followup with the code example, since there will undoubtedly be other folks with similar issues. It may still be worth asking the ACF folks if they know any best practices around using scripts within their preview mode.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Cycle2 Slideshow Fails to Initialize in WP Block Preview’ is closed to new replies.