vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-04 04:34:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Enqueue script and style assets only for blocks present on the page

Browse Source 
Adds styles for individual core blocks to make it possible to render only styles for those blocks that are rendered on the page (frontend). This is optinal functionality for start that can be controlled with the new `separate_core_block_assets` filter.

In addition to that, styles can be inlined when `path` is passed when registering an individual styles. This functionality can be changed with the new `styles_inline_size_limit` filter. The maximum size of inlined styles in bytes defaults to 20 000.

Props aristath, aduth, westonruter, mcsf.
Fixes #50328, #52620.



git-svn-id: https://develop.svn.wordpress.org/trunk@50836 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Greg Ziółkowski
2021-05-11 09:41:48 +00:00
parent 2ac7f39570
commit d5f900c3df
8 changed files with 379 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/wp-includes/script-loader.php
View File

@@ -1502,7 +1502,9 @@ function wp_default_styles( $styles ) {
}
$styles->add( 'wp-editor-font', $fonts_url ); // No longer used in core as of 5.7.
$styles->add( 'wp-block-library-theme', "/wp-includes/css/dist/block-library/theme$suffix.css" );
$block_library_theme_path = "/wp-includes/css/dist/block-library/theme$suffix.css";
$styles->add( 'wp-block-library-theme', $block_library_theme_path );
$styles->add_data( 'wp-block-library-theme', 'path', ABSPATH . $block_library_theme_path );
$styles->add(
'wp-reset-editor-styles',
@@ -1571,7 +1573,11 @@ function wp_default_styles( $styles ) {
$handle = 'wp-' . $package;
$path = "/wp-includes/css/dist/$package/style$suffix.css";
if ( 'block-library' === $package && should_load_separate_core_block_assets() ) {
$path = "/wp-includes/css/dist/$package/common$suffix.css";
}
$styles->add( $handle, $path, $dependencies );
$styles->add_data( $handle, 'path', ABSPATH . $path );
}
// RTL CSS.
@@ -2277,6 +2283,10 @@ function wp_should_load_block_editor_scripts_and_styles() {
function wp_enqueue_registered_block_scripts_and_styles() {
global $current_screen;
if ( should_load_separate_core_block_assets() ) {
return;
}
$load_editor_scripts = is_admin() && wp_should_load_block_editor_scripts_and_styles();
$block_registry = WP_Block_Type_Registry::get_instance();
@@ -2495,3 +2505,80 @@ function wp_get_inline_script_tag( $javascript, $attributes = array() ) {
function wp_print_inline_script_tag( $javascript, $attributes = array() ) {
echo wp_get_inline_script_tag( $javascript, $attributes );
}
/**
* Allow small styles to be inlined.
* This improves performance and sustainability, and is opt-in.
*
* Stylesheets can opt-in by adding `path` data using `wp_style_add_data`, and defining the file's absolute path.
* wp_style_add_data( $style_handle, 'path', $file_path );
*
* @since 5.8.0
*
* @return void
*/
function wp_maybe_inline_styles() {
$total_inline_limit = 20000;
/**
* The maximum size of inlined styles in bytes.
*
* @param int $total_inline_limit The file-size threshold, in bytes. Defaults to 20000.
* @return int The file-size threshold, in bytes.
*/
$total_inline_limit = apply_filters( 'styles_inline_size_limit', $total_inline_limit );
global $wp_styles;
$styles = array();
// Build an array of styles that have a path defined.
foreach ( $wp_styles->queue as $handle ) {
if ( wp_styles()->get_data( $handle, 'path' ) && file_exists( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
$styles[] = array(
'handle' => $handle,
'path' => $wp_styles->registered[ $handle ]->extra['path'],
'size' => filesize( $wp_styles->registered[ $handle ]->extra['path'] ),
);
}
}
if ( ! empty( $styles ) ) {
// Reorder styles array based on size.
usort(
$styles,
function( $a, $b ) {
return ( $a['size'] <= $b['size'] ) ? -1 : 1;
}
);
/**
* The total inlined size.
*
* On each iteration of the loop, if a style gets added inline the value of this var increases
* to reflect the total size of inlined styles.
*/
$total_inline_size = 0;
// Loop styles.
foreach ( $styles as $style ) {
// Size check. Since styles are ordered by size, we can break the loop.
if ( $total_inline_size + $style['size'] > $total_inline_limit ) {
break;
}
// Get the styles if we don't already have them.
$style['css'] = file_get_contents( $style['path'] );
// Set `src` to `false` and add styles inline.
$wp_styles->registered[ $style['handle'] ]->src = false;
if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) {
$wp_styles->registered[ $style['handle'] ]->extra['after'] = array();
}
array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] );
// Add the styles size to the $total_inline_size var.
$total_inline_size += (int) $style['size'];
}
}
}