Enqueue GSAP script with Gutenberg block not working

Question

I am trying to enqueue a GSAP script only when a particular Gutenberg/Advanced custom field block is present on a page.

I used this for Slick slider and it works perfectly but for some reason it will not work with GSAP - I don't get any console errors (other than GSAP is not defined) and the script does not load.

I can't work out why? Any help would be appreciated

Thanks

This is Slick slider which works

acf_register_block_type(array(
          'name'                => 'lig_find_anything_carousel',
          'title'               => __('LIG Search Carousel'),
          'description'     => __('LIG Search Carousel'),
          'render_template'   => 'template-parts/components/content-find-anything-carousel.php',
          'icon'                => 'editor-textcolor',
          'keywords'            => array( 'find', 'search', 'lenses', 'anything'),
          'category'            => 'design',
          'enqueue_assets'    => function(){
                wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick.min.css', array(), '1.8.1' );
                wp_enqueue_style( 'slick-theme', 'https://cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/accessible-slick-theme.min.css', array(), '1.8.1' );
                wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick.min.js', array('jquery'), '1.8.1', true );
                wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/assets/src/carousel/index.js', array(), false, true );
          },
       ));

This is GSAP which does not

 acf_register_block_type(array(
          'name'                => 'lig_large_accordion',
          'title'               => __('LIG large Accordion'),
          'description'     => __('LIG Large Accordion'),
          'render_template'   => 'template-parts/blocks/content-large-accordion.php',
          'icon'                => 'editor-textcolor',
          'keywords'            => array( 'accordion', 'toggle', 'expand', 'info'),
          'category'            => 'design',
          'enqueue_assets'    => function(){
                wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', array(), false, true );
          },
      ));

Update:

So it happens that one of the pages the block is used on is the home page, so I have this working:

function mytheme_enqueue_front_page_scripts() {
    if( is_front_page() )
    {
        wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', null, true );

    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_front_page_scripts' );

Is there a way to also use it on one other page by page id?

score 0 · Answer 1 · answered Feb 25 '23 at 11:40

*Update

I manged to get it to work based on pages, blocks would have been better, but this block is only on two pages

 function gsapscript() {
  if ( is_page( array( 6, 290 ) ) ) {
        wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', null, true );
  }
} 

add_action('wp_enqueue_scripts', 'gsapscript');

score 0 · Answer 2 · answered Mar 01 '23 at 12:11

You could import GSAP in you js file checking if an element in acf block exist:

if($('.element').length) {
    const moduleSpecifier = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js';
        import(moduleSpecifier)
            .then(() => {
                // Your gsap function
            }            
      )
}

Enqueue GSAP script with Gutenberg block not working

2 Answers2