Make WordPress Core

Changeset 56064


Ignore:
Timestamp:
06/27/2023 11:26:12 AM (11 months ago)
Author:
spacedmonkey
Message:

Script Loader: Fix performance issues in wp_common_block_scripts_and_styles.

In [52069] the function wp_common_block_scripts_and_styles was changed load individual theme stylesheets, if the current theme supports block styles and loading separate core block assets. To do this, the function calls many expensive file operation functions, such as glob, file_exists and file_get_contents. This is wasteful, as these functions are loaded on every page request, even request that do not include blocks, like REST API calls. In [56044] all core block styles are registered in a single place. In register_core_block_style_handles calls glob to get all css styles in block directories. While registering style and editor styles, also register block theme styles, under a new style handle. Example wp-block-avatar-theme. If the current theme supports block styles, also request the block to enqueue the theme style on the front end. As these new stylesheets have a path attribute set, the function wp_maybe_inline_styles will automatically inline the styles for you.

Props spacedmonkey, flixos90, oandregal, costdev, audrasjb, mukesh27.
Fixes #58560.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/blocks.php

    r56044 r56064  
    373373        if ( ! isset( $metadata['style'] ) ) {
    374374            $metadata['style'] = "wp-block-$block_name";
     375        }
     376        if ( current_theme_supports( 'wp-block-styles' ) && wp_should_load_separate_core_block_assets() ) {
     377            $metadata['style']   = (array) $metadata['style'];
     378            $metadata['style'][] = "wp-block-{$block_name}-theme";
    375379        }
    376380        if ( ! isset( $metadata['editorStyle'] ) ) {
  • trunk/src/wp-includes/blocks/index.php

    r56044 r56064  
    5656    }
    5757
     58    $register_style = static function( $name, $filename, $style_handle ) use ( $includes_path, $includes_url, $suffix, $wp_styles, $files ) {
     59        $style_path = "blocks/{$name}/{$filename}{$suffix}.css";
     60        $path       = $includes_path . $style_path;
     61
     62        if ( ! in_array( $path, $files, true ) ) {
     63            $wp_styles->add(
     64                $style_handle,
     65                false
     66            );
     67            return;
     68        }
     69
     70        $wp_styles->add( $style_handle, $includes_url . $style_path );
     71        $wp_styles->add_data( $style_handle, 'path', $path );
     72
     73        $rtl_file = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $path );
     74        if ( is_rtl() && in_array( $rtl_file, $files, true ) ) {
     75            $wp_styles->add_data( $style_handle, 'rtl', 'replace' );
     76            $wp_styles->add_data( $style_handle, 'suffix', $suffix );
     77            $wp_styles->add_data( $style_handle, 'path', $rtl_file );
     78        }
     79    };
     80
    5881    foreach ( $core_blocks_meta as $name => $schema ) {
    5982        /** This filter is documented in wp-includes/blocks.php */
     
    6891        }
    6992
     93        // Register block theme styles.
     94        $register_style( $name, 'theme', "wp-block-{$name}-theme" );
     95
    7096        foreach ( $style_fields as $style_field => $filename ) {
    7197            $style_handle = $schema[ $style_field ];
     
    7399                continue;
    74100            }
    75 
    76             $style_path = "blocks/{$name}/{$filename}{$suffix}.css";
    77             $path       = $includes_path . $style_path;
    78 
    79             if ( ! in_array( $path, $files, true ) ) {
    80                 $wp_styles->add(
    81                     $style_handle,
    82                     false
    83                 );
    84                 continue;
    85             }
    86 
    87             $wp_styles->add( $style_handle, $includes_url . $style_path );
    88             $wp_styles->add_data( $style_handle, 'path', $path );
    89 
    90             $rtl_file = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $path );
    91             if ( is_rtl() && in_array( $rtl_file, $files, true ) ) {
    92                 $wp_styles->add_data( $style_handle, 'rtl', 'replace' );
    93                 $wp_styles->add_data( $style_handle, 'suffix', $suffix );
    94                 $wp_styles->add_data( $style_handle, 'path', $rtl_file );
    95             }
     101            $register_style( $name, $filename, $style_handle );
    96102        }
    97103    }
  • trunk/src/wp-includes/script-loader.php

    r56047 r56064  
    23732373    wp_enqueue_style( 'wp-block-library' );
    23742374
    2375     if ( current_theme_supports( 'wp-block-styles' ) ) {
    2376         if ( wp_should_load_separate_core_block_assets() ) {
    2377             $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? 'css' : 'min.css';
    2378             $files  = glob( __DIR__ . "/blocks/**/theme.$suffix" );
    2379             foreach ( $files as $path ) {
    2380                 $block_name = basename( dirname( $path ) );
    2381                 if ( is_rtl() && file_exists( __DIR__ . "/blocks/$block_name/theme-rtl.$suffix" ) ) {
    2382                     $path = __DIR__ . "/blocks/$block_name/theme-rtl.$suffix";
    2383                 }
    2384                 wp_add_inline_style( "wp-block-{$block_name}", file_get_contents( $path ) );
    2385             }
    2386         } else {
    2387             wp_enqueue_style( 'wp-block-library-theme' );
    2388         }
     2375    if ( current_theme_supports( 'wp-block-styles' ) && ! wp_should_load_separate_core_block_assets() ) {
     2376        wp_enqueue_style( 'wp-block-library-theme' );
    23892377    }
    23902378
  • trunk/tests/phpunit/tests/blocks/registerCoreBlockStyleHandles.php

    r56044 r56064  
    5656     *
    5757     * @dataProvider data_block_data
     58     *
     59     * @param string $name   The block name.
     60     * @param array  $schema The block's schema.
    5861     */
    5962    public function test_wp_should_load_separate_core_block_assets_false( $name, $schema ) {
     
    7578     *
    7679     * @dataProvider data_block_data
     80     *
     81     * @param string $name   The block name.
     82     * @param array  $schema The block's schema.
    7783     */
    7884    public function test_wp_should_load_separate_core_block_assets_true( $name, $schema ) {
     
    100106    }
    101107
     108    /**
     109     * @ticket 58560
     110     *
     111     * @dataProvider data_block_data
     112     *
     113     * @param string $name The block name.
     114     */
     115    public function test_wp_should_load_separate_core_block_assets_current_theme_supports( $name ) {
     116        add_filter( 'should_load_separate_core_block_assets', '__return_true' );
     117        add_theme_support( 'wp-block-styles' );
     118        register_core_block_style_handles();
     119
     120        $wp_styles = $GLOBALS['wp_styles'];
     121
     122        $style_handle = "wp-block-{$name}-theme";
     123
     124        $this->assertArrayHasKey( $style_handle, $wp_styles->registered, 'The key should exist, as this style should be registered' );
     125        if ( false === $wp_styles->registered[ $style_handle ]->src ) {
     126            $this->assertEmpty( $wp_styles->registered[ $style_handle ]->extra, 'If source is false, not style path should be set' );
     127        } else {
     128            $this->assertStringContainsString( $this->includes_url, $wp_styles->registered[ $style_handle ]->src, 'Source of style should contain the includes url' );
     129            $this->assertNotEmpty( $wp_styles->registered[ $style_handle ]->extra, 'The path of the style should exist' );
     130            $this->assertArrayHasKey( 'path', $wp_styles->registered[ $style_handle ]->extra, 'The path key of the style should exist in extra array' );
     131            $this->assertNotEmpty( $wp_styles->registered[ $style_handle ]->extra['path'], 'The path key of the style should not be empty' );
     132        }
     133    }
    102134
    103135    public function data_block_data() {
Note: See TracChangeset for help on using the changeset viewer.