Blocks – Enqueuing Styles and Scripts Conditionally

Small update – regarding my second question about getting the script handler (that is registred by block.json) so I can use the wp_localize_script to localize the script, I just openend the HTML source code and manually got the script handler. It is a workaround but it is working. Let me know you have a better approach.

Hallo @incrediblewp ,

enqueuing assets conditionally in WordPress blocks can indeed be a bit tricky, especially with the shift to the block.json registration approach. Here are the best practices and solutions for both your main concerns: Conditionally Loading Assets for Custom Blocks

When you register a block using block.json, WordPress enqueues the scripts and styles defined there by default, regardless of whether the block is used on the page or not. To load assets only when a block is present, you can leverage the render_block filter.

Here’s how you can do it:

1. Register your block using block.json: This should already be done.
2. Deregister the block’s frontend assets and load them conditionally:

function conditionally_enqueue_block_assets( $block_content, $block ) {
    // Check if the specific block is being rendered
    if ( 'namespace/block-name' === $block['blockName'] ) {
        // Enqueue your script or style here
        wp_enqueue_script( 'namespace-block-frontend-script' );
        wp_enqueue_style( 'namespace-block-frontend-style' );
    }
    return $block_content;
}
add_filter( 'render_block', 'conditionally_enqueue_block_assets', 10, 2 );

This code checks if the specific block (namespace/block-name) is being rendered, and if so, enqueues the necessary scripts and styles. Localizing Scripts Registered via block.json

Localizing scripts that are registered via block.json can indeed be cumbersome, especially if you don’t know the handle. Here’s a more systematic approach:

1. Register a dummy script in block.json:

   {
     "name": "namespace/block-name",
     "title": "Block Name",
     "category": "widgets",
     "icon": "smiley",
     "editorScript": "file:./build/index.js",
     "editorStyle": "file:./build/editor.css",
     "style": "file:./build/style.css",
     "script": "file:./build/frontend.js" // Dummy script to get a handle
   }

2. Localize the script in PHP:

   function localize_block_scripts() {
       // Get the block script handle from the block.json (replace 'namespace/block-name' with your block name)
       $block_asset = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php'; // Adjust path accordingly
       $script_handle = 'namespace-block-name-frontend-script'; // Extracted from the HTML as you did

       wp_localize_script( $script_handle, 'myBlockData', array(
           'ajax_url' => admin_url( 'admin-ajax.php' ),
           'nonce'    => wp_create_nonce( 'my_nonce' ),
       ));
   }
   add_action( 'wp_enqueue_scripts', 'localize_block_scripts' );

1. Use the render_block filter to conditionally enqueue assets only when your block is present.
2. Localize scripts by first registering a dummy script in block.json, and then using the extracted handle in PHP to call wp_localize_script.

I hope this is helpful for you ??

Hi @benjamin_zekavica

That’s great and thanks for providing that important info.

BR
Idan