I am working on a WordPress FSE theme, and I'm using block variations.

I have a query block variation to create a slider of posts, and everything is working. But the slider requires extra javascript that I enqueue using functions.php, however the script was loading on every page. Now I manage to load it only when the query block is present.

It is close enough but I'd like the script to load only when the block variation is present.

block-variations.js

wp.blocks.registerBlockVariation("core/query", {
    name: "horizontal-query",
    title: "Scrolling Query Loop",
    description: "Displays the Query Loop with horizontal scrolling and navigation buttons.",
    isActive: ["namespace"],
    attributes: {
      namespace: "hs_query_loop",
      className: "hs-query-loop",
    },
    scope: ["inserter", "transform"],
  });

and my functions.php

$id = get_the_ID();
if (has_block('core/query', $id))
{
    wp_enqueue_script(
        'hs-query', 
        get_template_directory_uri() . '/assets/js/scrolling-query-loop.js',
        array('jquery'),
        wp_get_theme()->get( 'Version' ),
        true,
    );
}

I am not sure if I am using the best approach, since I have block-variations.js and my script on different files, both are included using the enqueue function. This is the best I have achieved so far.

I am working on a WordPress FSE theme, and I'm using block variations.

I have a query block variation to create a slider of posts, and everything is working. But the slider requires extra javascript that I enqueue using functions.php, however the script was loading on every page. Now I manage to load it only when the query block is present.

It is close enough but I'd like the script to load only when the block variation is present.

block-variations.js

wp.blocks.registerBlockVariation("core/query", {
    name: "horizontal-query",
    title: "Scrolling Query Loop",
    description: "Displays the Query Loop with horizontal scrolling and navigation buttons.",
    isActive: ["namespace"],
    attributes: {
      namespace: "hs_query_loop",
      className: "hs-query-loop",
    },
    scope: ["inserter", "transform"],
  });

and my functions.php

$id = get_the_ID();
if (has_block('core/query', $id))
{
    wp_enqueue_script(
        'hs-query', 
        get_template_directory_uri() . '/assets/js/scrolling-query-loop.js',
        array('jquery'),
        wp_get_theme()->get( 'Version' ),
        true,
    );
}

I am not sure if I am using the best approach, since I have block-variations.js and my script on different files, both are included using the enqueue function. This is the best I have achieved so far.

• php
• wordpress
• wordpress-theming

1 Answer 1

You can use the render_block filter to detect your block variation

function enqueue_hs_query_script_if_variation_present($block_content, $block) {
    // Check if the block is a 'core/query' block and has your specific class name
    if ($block['blockName'] === 'core/query' && isset($block['attrs']['className']) && strpos($block['attrs']['className'], 'hs-query-loop') !== false) {
        // Enqueue your script
        wp_enqueue_script(
            'hs-query', 
            get_template_directory_uri() . '/assets/js/scrolling-query-loop.js',
            array('jquery'),
            wp_get_theme()->get('Version'),
            true
        );
    }
    return $block_content;
}
add_filter('render_block', 'enqueue_hs_query_script_if_variation_present', 10, 2);

Also make sure your block variation has a unique class name

In your block-variations.js, you’ve already added a class name (hs-query-loop) to your block variation. This class name is used to identify the block variation in the render_block filter.

wp.blocks.registerBlockVariation("core/query", {
    name: "horizontal-query",
    title: "Scrolling Query Loop",
    description: "Displays the Query Loop with horizontal scrolling and navigation buttons.",
    isActive: ["namespace"],
    attributes: {
        namespace: "hs_query_loop",
        className: "hs-query-loop",
    },
    scope: ["inserter", "transform"],
});