Style loading even if block not used.

• alissit

• March 9, 2023 at 2:23 pm

I’m creating an ACF block using block.json.

In register-blocks.php, I’m registering the style as such:

function custom_load_blocks(){
	wp_register_style( 'tiny-css', get_stylesheet_directory_uri() . '/blocks/tiny-slider/tiny-slider.css' );
  	register_block_type( get_stylesheet_directory() . '/blocks/first-block/block.json' );
	register_block_type( get_stylesheet_directory() . '/blocks/tiny-slider/block.json' );
}
add_action( 'init', 'custom_load_blocks' );

Then calling the style in block.json like ‘ “style”: “tiny-css”,’

It’s working, however the tiny-slider.css is being loaded on every page on the site.
How can I get the CSS to only be loaded when the block is used on the page?

• alissit

• March 10, 2023 at 6:25 am

In case anyone can be helped with a resolution, this is how my register-blocks.php is now set up. The style and js is only being loaded on pages when the block is used.
I was creating a slider using Tiny Slider, so this shows how to register & enqueue an outside CSS library and a custom CSS file.

<?php
function custom_load_blocks(){
    // Enqueue the Tiny Slider CSS file from CDN
    wp_enqueue_style( 'tiny-slider-css', 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css' );

// Register the stylesheet
    wp_register_style( 'tiny-css', get_stylesheet_directory_uri() . '/blocks/tiny-slider/tiny-slider.css' );

    // Register the blocks
    register_block_type( get_stylesheet_directory() . '/blocks/tiny-slider/block.json', array(
        'style' => 'tiny-css', 'tiny-slider-css', // Use the registered stylesheet handle
    ) );

    // Enqueue the Tiny Slider JS file from CDN
    wp_enqueue_script( 'tiny-slider-js', 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js', array(), '2.9.4', true );
    // Enqueue the Tiny Slider JavaScript file
    wp_enqueue_script( 'tiny-js', get_stylesheet_directory_uri() . '/blocks/tiny-slider/tiny-slider.js', array(), '1.0.0', true );
}
add_action( 'init', 'custom_load_blocks' );

• mihirvaja

• December 2, 2023 at 4:45 pm

I’m having this issue with ACF Block styles being rendered even if they the block is not being used.

In your solution, where does register-blocks.php live? Is it within /blocks/tiny-slider or top level in the theme folder?

Thanks!

• opicron

• July 26, 2024 at 5:28 pm

Above solution works for me too. Thanks.

Just make sure to use wp_register_style for all styles.

Do not add the style names to register_block_type, instead put style in the block.json.

ps: I had to opt-in the following

block-styles-loading-enhancements-in-wordpress-5-8/

add_filter( 'should_load_separate_core_block_assets', '__return_true' );