The function to load styles only for the block you are using is not working in register_block_style.

[shimotomoki]

Description

The style will be loaded even if the page is not in use.
(= add_filter( 'should_load_separate_core_block_assets', '__return_true' ); )

Step-by-step reproduction instructions

1. Create a sample plugin, My Plugin.

Here is the code

my-plugin.php

<?php
/**
 * Plugin Name: My Plugin
 */

add_filter('should_load_separate_core_block_assets', '__return_true');
add_action('enqueue_block_assets', 'test_registering_a_block_style');
add_action('admin_enqueue_scripts', 'test_registering_a_block_style');

function test_registering_a_block_style() {
  wp_register_style(
    'my-theme-block-styles-core-heading',
    plugins_url('style.css', __FILE__),
  );
}

register_block_style(
  'core/heading',
  array(
    'name'         => 'my-theme-block-styles-core-heading-add',
    'label'        => 'Add',
    'style_handle' => 'my-theme-block-styles-core-heading',
    // 'inline_style' => '.wp-block-heading.is-style-heading-add , .is-style-heading-add { color: blue; }',
  )
);

Create style.css in the same directory.

2. Activate the plugin.
3. Create a new post and place a heading block.
4. Create a new post and place something other than a heading block. (For example, an image block).
5. The my-theme-block-styles-core-heading specified in style_handle will be loaded in both the source of the page created in 3 and 4.

Originally, I thought that my-theme-block-styles-core-heading should not be loaded for pages created with 4.

The relevant code

script-loader.php
​https://github.com/WordPress/wordpress-develop/blob/master/src/wp-includes/script-loader.php#L2463-L2477

Correction code

I think this bug can be handled with this kind of code.

script-loader.php

<?php
// If the site loads separate styles per-block, enqueue the stylesheet on render.
if ( wp_should_load_separate_core_block_assets() ) {
        add_filter(
                'render_block',
                function( $html, $block ) use ($block_name, $style_properties ) {
                        if ( $block['blockName'] === $block_name ) {
                                wp_enqueue_style( $style_properties['style_handle'] );
                        }
                        return $html;
                },
                10,
                2
        );
} else {
        wp_enqueue_style( $style_properties['style_handle'] );
}

Related references

• ​https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/
• #54323
• ​https://github.com/WordPress/gutenberg/issues/35912
• #53616

[SergeyBiryukov]

Hi there, welcome to WordPress Trac!

Thanks for the report, moving to the milestone for visibility.

[devutpol]

Patch created

[audrasjb]

Self-assigning for review

[audrasjb]

Before patch: stylesheet is enqueued even on a post without the block variation

[audrasjb]

After patch: the stylesheet is not enqueued if the block style variation is not used on the post

[audrasjb]

…but it is enqueued on a post that uses the block style variation (which is the expected behavior)

[audrasjb]

The patch looks good to me.

It only needs a few coding standards adjustments. PR incoming.

Trac ticket: https://core.trac.wordpress.org/ticket/54457

[audrasjb]

The above PR fixes a few WPCS issues.
Tests are passing.

[audrasjb]

In 52262:

Script Loader: Enqueue block stylesheet only when the corresponding block is used.

Before this change, block stylesheets were enqueued although the corresponding blocks were not used in the current post, even if the should_load_separate_core_block_assets filter was set to true.

Props shimotomoki, devutpol, audrasjb.
Fixes #54457.

Committed in https://core.trac.wordpress.org/changeset/52262