[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