[Resolved] Enqueue scripts when shortcode is present inside a block element

[George]

I want to enqueue some scripts when a shortcode is present. I use this function:

function gm_enqueue_splide_scripts() {
    global $post;
    if ( has_shortcode( $post->post_content, 'my_shortcode') && ( is_single() || is_page() ) ){
        // Enqueue my scripts
    }
}

But it doesn’t work with shortcodes located inside a block element. Any solution?

[Elvin]

Hi George,

I suggest simplifying the condition first. And then doing a var_dump($post->post_content); on the page you’re testing to be sure if the shortcode is actually there.

This is so we can see what’s being preg_match_all()-ed by has_shortcode().

[George]

Hi Elvin.

It’s there. I am testing on a post and I am already adding the shortcode with the generate_after_entry_content hook. When the post is empty the shortcode is displayed on the hook but without the scripts enqueued. When I add the shortcode on the post content, the scripts are enqueued on both instances. So, the problem is the $post->post_content inside the conditional not recognizing the fact that the generate_after_entry_content is part of the content.

[David]

Hi there,

i looked at methods for checking the Action Hook callback but couldn’t find anything reliable.
In this instance may just be easier to hook in the scripts using the same display rules.

[George]

Hey Elvin, it’s sorted. David provided some extra help!

Basically, I am registering scripts at the start and enqueuing them inside the shortcode. Like this:

// Import Splide library
function gm_enqueue_splide_scripts() {
    wp_register_style( 'splide-css', get_stylesheet_directory_uri() . '/splide.min.css' );
    wp_register_script( 'splide-js', get_stylesheet_directory_uri() . '/splide.js', array(), false, true );
    wp_register_script( 'splide-init', get_stylesheet_directory_uri() . '/splide-init.js', null, null, true );
}
add_action( 'wp_enqueue_scripts', 'gm_enqueue_splide_scripts' );

// Construct shortcode
function db_custom_loop_shortcode($atts, $content = null) {
    global $post;
    // define attributes and their defaults
    $data_to_pass = extract( shortcode_atts( array (
        'post_type' => 'post',
        'posts_per_page' => '3',
        'post__not_in' => array( $post->ID ),
        'type' => 'loop',
    ), $atts ) );

    
    // Set query args
    $args = array(
        'post_type' => $post_type,
        'posts_per_page' => $posts_per_page,
        'post__not_in' => $post__not_in, // don't display current post
        'type' => $type,
    );

    // Enqueue Splide style and scripts
    wp_enqueue_style( 'splide-css' );
    wp_enqueue_script( 'splide-js' );
    wp_enqueue_script( 'splide-init' );

    $latest = new WP_Query($args);
    // Output loop
    if ( $latest->have_posts() ) {
        ob_start();
        echo '<div class="splide"><div class="splide__slider"><div class="splide__track"><div class="splide__list">';    
        while ($latest->have_posts()) : $latest->the_post();
            do_action('db_custom_post_loop'); // Hook name for content template
        endwhile;
        echo '</div></div></div></div>';
        wp_reset_postdata();
        return ob_get_clean();
    }
}
add_shortcode('db_display_custom_post_loop', 'db_custom_loop_shortcode');

Thanks!

[Elvin]

I see you went completely the other way around. I was thinking you didn’t have control w/ the shortcode functions. lol.

I was thinking maybe it may be better to create a custom has_shortcode() check if you really need it incase you were trying to run a script librarly conditionally for a third-party plugin’s shortcode.

Thanks for letting us know. Glad you got it sorted.

[Author]

Posts