Since WordPress 5.9 you can load assets for a block only when the block is used. For block styles/variations, you need to be creative, though. Especially if it’s not your own block you’re creating a variant of.

Since block variations are usually registered separately, and especially if you want to have it clean in a separate file or trying to extend an existing block, you cannot properly rely on something like register_block_type to register your assets with the existing block. This is because this would need to overwriting the render_callback property of said function and thus may break the block itself, since the original callback won’t be called anymore.

In my solution I use the render_block_{$this->name} hook, where it’s possible since quite some time to allow registering assets via wp_enqueue_script or wp_enqueue_style.

To enqueue assets only for a block on certain conditions, I use the following code:

static function my_group_callback( string $block_content, array $block ): string {
    if ( ! $condition ) { // check your condition
        return $block_content;
    }
    
    \wp_enqueue_style( 'my-handle', $uri ); // adjust handle and uri
    
    return $block_content;
}

\add_action( 'render_block_core/group', 'my_group_callback', 10, 2 );
Code language: PHP (php)

In this example, I enqueue a style if a certain condition is met in a group block. This code is a boilerplate, since $condition and $uri are not defined here. The real code checks for the className attribute in $block['attrs']['className'] for a specific class that is added if my registered block variation is used. Only then the style is enqueued and loaded in the frontend.

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn more about webmentions)