Support

Account

Home Forums Gutenberg Enqueue Scripts for ACF Block Preview

Helping

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
        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' );
    
  • 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.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.