Home Forums Gutenberg Enqueue Scripts for ACF Block Preview


Enqueue Scripts for ACF Block Preview

  • Hello, I have created a slideshow block using register_acf_block_types.

    // Register ACF blocks
    function register_acf_block_types() {
        // Register Slideshow
            '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-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' );
  • 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.

  • 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:

    		// 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 🙂 ?

  • 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.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Enqueue Scripts for ACF Block Preview’ is closed to new replies.