WordPress.org

Make WordPress Core

Opened 12 days ago

Closed 9 hours ago

Last modified 9 hours ago

#54457 closed defect (bug) (fixed)

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

Reported by: shimotomoki Owned by: audrasjb
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8.2
Component: Script Loader Keywords: has-patch has-screenshots
Focuses: Cc:

Description (last modified by SergeyBiryukov)

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.

  1. Activate the plugin.
  2. Create a new post and place a heading block.
  3. Create a new post and place something other than a heading block. (For example, an image block).
  4. 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

Attachments (4)

54457.diff (823 bytes) - added by devutpol 22 hours ago.
Patch created
Capture d’écran 2021-11-28 à 19.46.11.png (223.3 KB) - added by audrasjb 12 hours ago.
Before patch: stylesheet is enqueued even on a post without the block variation
Capture d’écran 2021-11-28 à 19.49.41.png (342.4 KB) - added by audrasjb 12 hours ago.
After patch: the stylesheet is not enqueued if the block style variation is not used on the post
Capture d’écran 2021-11-28 à 19.49.07.png (289.7 KB) - added by audrasjb 12 hours ago.
…but it is enqueued on a post that uses the block style variation (which is the expected behavior)

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
12 days ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 5.9

Hi there, welcome to WordPress Trac!

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


10 days ago

#3 @audrasjb
10 days ago

  • Keywords needs-patch needs-testing added

@devutpol
22 hours ago

Patch created

#4 @devutpol
22 hours ago

  • Keywords has-patch added; needs-patch removed

#5 @audrasjb
13 hours ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self-assigning for review

@audrasjb
12 hours ago

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

@audrasjb
12 hours ago

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

@audrasjb
12 hours ago

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

#6 @audrasjb
12 hours ago

  • Keywords has-screenshots needs-refresh added; needs-testing removed

The patch looks good to me.

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

This ticket was mentioned in PR #1964 on WordPress/wordpress-develop by audrasjb.


11 hours ago

  • Keywords needs-refresh removed

#8 @audrasjb
11 hours ago

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

#9 @audrasjb
9 hours ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.