Changeset 50836

Timestamp:

05/11/2021 09:41:48 AM (5 years ago)

Author:

gziolo

Message:

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

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.

Location:

trunk

Files:

• .gitignore (modified) (1 diff)
• src/wp-includes/blocks (modified) (1 prop)
• src/wp-includes/blocks.php (modified) (3 diffs)
• src/wp-includes/blocks/archives (modified) (1 prop)
• src/wp-includes/blocks/audio (modified) (1 prop)
• src/wp-includes/blocks/block (modified) (1 prop)
• src/wp-includes/blocks/button (modified) (1 prop)
• src/wp-includes/blocks/buttons (modified) (1 prop)
• src/wp-includes/blocks/calendar (modified) (1 prop)
• src/wp-includes/blocks/categories (modified) (1 prop)
• src/wp-includes/blocks/code (modified) (1 prop)
• src/wp-includes/blocks/column (modified) (1 prop)
• src/wp-includes/blocks/columns (modified) (1 prop)
• src/wp-includes/blocks/cover (modified) (1 prop)
• src/wp-includes/blocks/embed (modified) (1 prop)
• src/wp-includes/blocks/file (modified) (1 prop)
• src/wp-includes/blocks/freeform (modified) (1 prop)
• src/wp-includes/blocks/gallery (modified) (1 prop)
• src/wp-includes/blocks/group (modified) (1 prop)
• src/wp-includes/blocks/heading (modified) (1 prop)
• src/wp-includes/blocks/html (modified) (1 prop)
• src/wp-includes/blocks/image (modified) (1 prop)
• src/wp-includes/blocks/latest-comments (modified) (1 prop)
• src/wp-includes/blocks/latest-posts (modified) (1 prop)
• src/wp-includes/blocks/list (modified) (1 prop)
• src/wp-includes/blocks/media-text (modified) (1 prop)
• src/wp-includes/blocks/missing (modified) (1 prop)
• src/wp-includes/blocks/more (modified) (1 prop)
• src/wp-includes/blocks/nextpage (modified) (1 prop)
• src/wp-includes/blocks/paragraph (modified) (1 prop)
• src/wp-includes/blocks/preformatted (modified) (1 prop)
• src/wp-includes/blocks/pullquote (modified) (1 prop)
• src/wp-includes/blocks/quote (modified) (1 prop)
• src/wp-includes/blocks/rss (modified) (1 prop)
• src/wp-includes/blocks/search (modified) (1 prop)
• src/wp-includes/blocks/separator (modified) (1 prop)
• src/wp-includes/blocks/shortcode (modified) (1 prop)
• src/wp-includes/blocks/social-link (modified) (1 prop)
• src/wp-includes/blocks/social-links (modified) (1 prop)
• src/wp-includes/blocks/spacer (modified) (1 prop)
• src/wp-includes/blocks/table (modified) (1 prop)
• src/wp-includes/blocks/tag-cloud (modified) (1 prop)
• src/wp-includes/blocks/text-columns (modified) (1 prop)
• src/wp-includes/blocks/verse (modified) (1 prop)
• src/wp-includes/blocks/video (modified) (1 prop)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (4 diffs)
• tests/phpunit/tests/blocks/register.php (modified) (2 diffs)
• tests/phpunit/tests/dependencies/styles.php (modified) (1 diff)
• tests/qunit/fixtures/wp-api-generated.js (modified) (1 diff)
• tools/webpack/packages.js (modified) (2 diffs)

trunk/.gitignore

@@ -29 +29 @@
 /src/wp-includes/css/*.min.css
 /src/wp-includes/css/*-rtl.css
+/src/wp-includes/blocks/**/*.css
 /packagehash.txt
 

trunk/src/wp-includes/blocks.php

@@ -158 +158 @@
                 return false;
         }
+        $is_core_block = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], ABSPATH . WPINC );
+        if ( $is_core_block && ! should_load_separate_core_block_assets() ) {
+                return false;
+        }
+
+        // Check whether styles should have a ".min" suffix or not.
+        $suffix = SCRIPT_DEBUG ? '' : '.min';
+
         $style_handle = $metadata[ $field_name ];
         $style_path   = remove_block_asset_path_prefix( $metadata[ $field_name ] );
-        if ( $style_handle === $style_path ) {
+
+        if ( $style_handle === $style_path && ! $is_core_block ) {
                 return $style_handle;
+        }
+
+        $style_uri = plugins_url( $style_path, $metadata['file'] );
+        if ( $is_core_block ) {
+                $style_path = "style$suffix.css";
+                $style_uri  = includes_url( 'blocks/' . str_replace( 'core/', '', $metadata['name'] ) . "/style$suffix.css" );
         }
 
@@ -167 +182 @@
         $block_dir    = dirname( $metadata['file'] );
         $style_file   = realpath( "$block_dir/$style_path" );
+        $version      = file_exists( $style_file ) ? filemtime( $style_file ) : false;
         $result       = wp_register_style(
                 $style_handle,
-                plugins_url( $style_path, $metadata['file'] ),
+                $style_uri,
                 array(),
-                filemtime( $style_file )
+                $version
         );
         if ( file_exists( str_replace( '.css', '-rtl.css', $style_file ) ) ) {
                 wp_style_add_data( $style_handle, 'rtl', 'replace' );
+        }
+        if ( file_exists( $style_file ) ) {
+                wp_style_add_data( $style_handle, 'path', $style_file );
+        }
+
+        $rtl_file = str_replace( "$suffix.css", "-rtl$suffix.css", $style_file );
+        if ( is_rtl() && file_exists( $rtl_file ) ) {
+                wp_style_add_data( $style_handle, 'path', $rtl_file );
         }
 
@@ -929 +953 @@
         return true === $block_support || is_array( $block_support );
 }
+
+/**
+ * Checks whether separate assets should be loaded for core blocks.
+ *
+ * @since 5.8
+ *
+ * @return bool
+ */
+function should_load_separate_core_block_assets() {
+        if ( is_admin() || is_feed() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
+                return false;
+        }
+        /**
+         * Determine if separate styles & scripts will be loaded for blocks on-render or not.
+         *
+         * @since 5.8.0
+         *
+         * @param bool $load_separate_styles Whether separate styles will be loaded or not.
+         *
+         * @return bool Whether separate styles will be loaded or not.
+         */
+        return apply_filters( 'separate_core_block_assets', false );
+}

trunk/src/wp-includes/default-filters.php

@@ -552 +552 @@
 add_filter( 'style_loader_src', 'wp_style_loader_src', 10, 2 );
 
+add_action( 'wp_head', 'wp_maybe_inline_styles', 1 ); // Run for styles enqueued in <head>.
+add_action( 'wp_footer', 'wp_maybe_inline_styles', 1 ); // Run for late-loaded styles in the footer.
+
 // Taxonomy.
 add_action( 'init', 'create_initial_taxonomies', 0 ); // Highest priority.

trunk/src/wp-includes/script-loader.php

@@ -1503 +1503 @@
         $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(
@@ -1572 +1574 @@
                 $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 );
         }
 
@@ -2278 +2284 @@
         global $current_screen;
 
+        if ( should_load_separate_core_block_assets() ) {
+                return;
+        }
+
         $load_editor_scripts = is_admin() && wp_should_load_block_editor_scripts_and_styles();
 
@@ -2496 +2506 @@
         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'];
+                }
+        }
+}

trunk/tests/phpunit/tests/blocks/register.php

@@ -271 +271 @@
                 $this->assertSame( 'unit-tests-test-block-style', $result );
                 $this->assertSame( 'replace', wp_styles()->get_data( 'unit-tests-test-block-style', 'rtl' ) );
+
+                // @ticket 50328
+                $this->assertSame(
+                        wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
+                        wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
+                );
         }
 
@@ -367 +373 @@
                 $this->assertSame( 'tests-notice-editor-style', $result->editor_style );
                 $this->assertSame( 'tests-notice-style', $result->style );
+
+                // @ticket 50328
+                $this->assertSame(
+                        wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
+                        wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
+                );
         }
 

trunk/tests/phpunit/tests/dependencies/styles.php

@@ -421 +421 @@
                 $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
         }
+
+        /**
+         * Tests that the main "style.css" file gets enqueued when the site doesn't opt-in to separate_core_block_assets.
+         *
+         * @ticket 50263
+         */
+        function test_common_block_styles_for_viewing_without_split_styles() {
+                add_filter( 'separate_core_block_assets', '__return_false' );
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $this->assertSame(
+                        $GLOBALS['wp_styles']->registered['wp-block-library']->src,
+                        '/' . WPINC . '/css/dist/block-library/style.css'
+                );
+        }
+
+        /**
+         * Tests that the "common.css" file gets enqueued when the site opts-in to separate_core_block_assets.
+         *
+         * @ticket 50263
+         */
+        function test_common_block_styles_for_viewing_with_split_styles() {
+                add_filter( 'separate_core_block_assets', '__return_false' );
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $this->assertSame(
+                        $GLOBALS['wp_styles']->registered['wp-block-library']->src,
+                        '/' . WPINC . '/css/dist/block-library/style.css'
+                );
+        }
+
+        function test_block_styles_for_viewing_with_split_styles() {
+                add_filter( 'separate_core_block_assets', '__return_true' );
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $this->assertSame(
+                        $GLOBALS['wp_styles']->registered['wp-block-library']->src,
+                        '/' . WPINC . '/css/dist/block-library/common.css'
+                );
+        }
 }

trunk/tests/qunit/fixtures/wp-api-generated.js

@@ -3789 +3789 @@
             ]
         },
+        "/wp/v2/blocks/(?P<parent>[\\d]+)/revisions": {
+            "namespace": "wp/v2",
+            "methods": [
+                "GET"
+            ],
+            "endpoints": [
+                {
+                    "methods": [
+                        "GET"
+                    ],
+                    "args": {
+                        "parent": {
+                            "description": "The ID for the parent of the object.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "context": {
+                            "description": "Scope under which the request is made; determines fields present in response.",
+                            "type": "string",
+                            "enum": [
+                                "view",
+                                "embed",
+                                "edit"
+                            ],
+                            "default": "view",
+                            "required": false
+                        },
+                        "page": {
+                            "description": "Current page of the collection.",
+                            "type": "integer",
+                            "default": 1,
+                            "minimum": 1,
+                            "required": false
+                        },
+                        "per_page": {
+                            "description": "Maximum number of items to be returned in result set.",
+                            "type": "integer",
+                            "minimum": 1,
+                            "maximum": 100,
+                            "required": false
+                        },
+                        "search": {
+                            "description": "Limit results to those matching a string.",
+                            "type": "string",
+                            "required": false
+                        },
+                        "exclude": {
+                            "description": "Ensure result set excludes specific IDs.",
+                            "type": "array",
+                            "items": {
+                                "type": "integer"
+                            },
+                            "default": [],
+                            "required": false
+                        },
+                        "include": {
+                            "description": "Limit result set to specific IDs.",
+                            "type": "array",
+                            "items": {
+                                "type": "integer"
+                            },
+                            "default": [],
+                            "required": false
+                        },
+                        "offset": {
+                            "description": "Offset the result set by a specific number of items.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "order": {
+                            "description": "Order sort attribute ascending or descending.",
+                            "type": "string",
+                            "default": "desc",
+                            "enum": [
+                                "asc",
+                                "desc"
+                            ],
+                            "required": false
+                        },
+                        "orderby": {
+                            "description": "Sort collection by object attribute.",
+                            "type": "string",
+                            "default": "date",
+                            "enum": [
+                                "date",
+                                "id",
+                                "include",
+                                "relevance",
+                                "slug",
+                                "include_slugs",
+                                "title"
+                            ],
+                            "required": false
+                        }
+                    }
+                }
+            ]
+        },
+        "/wp/v2/blocks/(?P<parent>[\\d]+)/revisions/(?P<id>[\\d]+)": {
+            "namespace": "wp/v2",
+            "methods": [
+                "GET",
+                "DELETE"
+            ],
+            "endpoints": [
+                {
+                    "methods": [
+                        "GET"
+                    ],
+                    "args": {
+                        "parent": {
+                            "description": "The ID for the parent of the object.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "id": {
+                            "description": "Unique identifier for the object.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "context": {
+                            "description": "Scope under which the request is made; determines fields present in response.",
+                            "type": "string",
+                            "enum": [
+                                "view",
+                                "embed",
+                                "edit"
+                            ],
+                            "default": "view",
+                            "required": false
+                        }
+                    }
+                },
+                {
+                    "methods": [
+                        "DELETE"
+                    ],
+                    "args": {
+                        "parent": {
+                            "description": "The ID for the parent of the object.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "id": {
+                            "description": "Unique identifier for the object.",
+                            "type": "integer",
+                            "required": false
+                        },
+                        "force": {
+                            "type": "boolean",
+                            "default": false,
+                            "description": "Required to be true, as revisions do not support trashing.",
+                            "required": false
+                        }
+                    }
+                }
+            ]
+        },
         "/wp/v2/blocks/(?P<id>[\\d]+)/autosaves": {
             "namespace": "wp/v2",

trunk/tools/webpack/packages.js

@@ -215 +215 @@
         } ) );
 
+        const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
+                from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
+                to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
+                flatten: true,
+                transform: ( content ) => {
+                        if ( mode === 'production' ) {
+                                return postcss( [
+                                        require( 'cssnano' )( {
+                                                preset: 'default',
+                                        } ),
+                                ] )
+                                        .process( content, { from: 'src/app.css', to: 'dest/app.css' } )
+                                        .then( ( result ) => result.css );
+                        }
+
+                        return content;
+                },
+                transformPath: ( targetPath, sourcePath ) => {
+                        if ( mode === 'production' ) {
+                                return targetPath.replace( /\.css$/, '.min.css' );
+                        }
+
+                        return targetPath;
+                }
+        } ) );
+
         const config = {
                 mode,
@@ -303 +329 @@
                                         ...phpCopies,
                                         ...blockMetadataCopies,
+                                        ...blockStylesheetCopies,
                                 ],
                         ),