Enqueue Scripts for ACF Block Preview

• inhouse

• May 31, 2019 at 12:28 am

Hello, I have created a slideshow block using register_acf_block_types.

// Register ACF blocks
function register_acf_block_types() {
    
    // Register Slideshow
    acf_register_block_type(array(
        'name'              => 'Slideshow',
        'title'             => __('Slideshow'),
        'description'       => __('A slideshow.'),
        //'render_template'   => 'includes/slideshow.php',
        'render_callback'	=> 'my_acf_block_render_callback',
        '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');
}

// Slideshow block callback/template
function my_acf_block_render_callback( $block ) {
	
	// convert name ("acf/testimonial") into path friendly slug ("testimonial")
	$slug = str_replace('acf/', '', $block['name']);
	
	// include a template part from within the "template-parts/block" folder
	if( file_exists( get_theme_file_path("/includes/slideshow.php") ) ) {
		include( get_theme_file_path("/includes/slideshow.php") );
	}
}

It took me forever to figure out how to initialize the Cycle2 slideshow in the ACF Block Preview. wp_enqueue_script wasn’t working. Eventually I resorted to calling the Cycle2 script directly in my template include (slideshow.php).

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

This is working now but I wondered if there’s a more appropriate way to enqueue scripts specifically for the ACF Block Preview.

These were my previous attempts that successfully loaded the script to the page but did not initialize the slideshow (assuming because it enqueues before the preview is loaded).

function my_block_plugin_editor_scripts() {
    // Enqueue block editor JS
    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( 'cycle2', get_template_directory_uri() . '/scripts/jquery.cycle2.min.js', array(), '1.0.0', true, ['wp-blocks'] );
    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' );

• inhouse

• May 31, 2019 at 4:46 am

Also tried:

'enqueue_assets' => function(){
	wp_enqueue_script( 'block-testimonial', get_template_directory_uri() . '/scripts/jquery.cycle2.min.js', array('jquery'), '', true );
}

This also fails to initialize the slideshow.

• physalis

• May 8, 2020 at 9:29 pm

Hey @inhouse ,

I know I’m late to the party, but had a bit of a hard time getting my head around previews as well and found out how to cope with it.
You can enqueue your styles and/or scripts like so:

	acf_register_block_type(array(
		// your other arguments
		'enqueue_assets' => 'blockname_assets',
	));

and then have a conditional enqueue like this:

// Enqueue scripts & styles if frontend
function blockname_assets() {
	// Frontend loading
	if(!is_admin()) {
		wp_enqueue_style('blockname', get_template_directory_uri() . '/css/blockname.min.css' );
		wp_enqueue_script('blockname', get_template_directory_uri() . '/js/blockname.js', array(), '', true );
	}
}

and extend it, so that different enqueues are happening for backend and frontend. Does that help you already 🙂 ?

• Maddisoins

• June 4, 2020 at 7:10 pm

You may also have styles that are only relevant to the editor. In that case you’ll want to enqueue those using enqueue_block_editor_assets as well. This could be something like focus states for an input or other indicators.