[wp-trac] [WordPress Trac] #54457: The function to load styles only for the block you are using is not working in register_block_style.
WordPress Trac
noreply at wordpress.org
Wed Nov 17 12:11:38 UTC 2021
#54457: The function to load styles only for the block you are using is not working
in register_block_style.
---------------------------+---------------------
Reporter: shimotomoki | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: 5.9
Component: Script Loader | Version: 5.8.2
Severity: normal | Resolution:
Keywords: | Focuses:
---------------------------+---------------------
Changes (by SergeyBiryukov):
* milestone: Awaiting Review => 5.9
Old description:
> == 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
> <?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
> <?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/
> https://core.trac.wordpress.org/ticket/54323
> https://github.com/WordPress/gutenberg/issues/35912
> https://core.trac.wordpress.org/ticket/53616
New description:
== 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
<?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
<?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
--
Comment:
Hi there, welcome to WordPress Trac!
Thanks for the report, moving to the milestone for visibility.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/54457#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list