WordPress.org

Make WordPress Core


Ignore:
Timestamp:
05/11/2021 09:41:48 AM (2 months 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.

File:
1 edited

Legend:

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

    r50773 r50836  
    15031503    $styles->add( 'wp-editor-font', $fonts_url ); // No longer used in core as of 5.7.
    15041504
    1505     $styles->add( 'wp-block-library-theme', "/wp-includes/css/dist/block-library/theme$suffix.css" );
     1505    $block_library_theme_path = "/wp-includes/css/dist/block-library/theme$suffix.css";
     1506    $styles->add( 'wp-block-library-theme', $block_library_theme_path );
     1507    $styles->add_data( 'wp-block-library-theme', 'path', ABSPATH . $block_library_theme_path );
    15061508
    15071509    $styles->add(
     
    15721574        $path   = "/wp-includes/css/dist/$package/style$suffix.css";
    15731575
     1576        if ( 'block-library' === $package && should_load_separate_core_block_assets() ) {
     1577            $path = "/wp-includes/css/dist/$package/common$suffix.css";
     1578        }
    15741579        $styles->add( $handle, $path, $dependencies );
     1580        $styles->add_data( $handle, 'path', ABSPATH . $path );
    15751581    }
    15761582
     
    22782284    global $current_screen;
    22792285
     2286    if ( should_load_separate_core_block_assets() ) {
     2287        return;
     2288    }
     2289
    22802290    $load_editor_scripts = is_admin() && wp_should_load_block_editor_scripts_and_styles();
    22812291
     
    24962506    echo wp_get_inline_script_tag( $javascript, $attributes );
    24972507}
     2508
     2509/**
     2510 * Allow small styles to be inlined.
     2511 * This improves performance and sustainability, and is opt-in.
     2512 *
     2513 * Stylesheets can opt-in by adding `path` data using `wp_style_add_data`, and defining the file's absolute path.
     2514 * wp_style_add_data( $style_handle, 'path', $file_path );
     2515 *
     2516 * @since 5.8.0
     2517 *
     2518 * @return void
     2519 */
     2520function wp_maybe_inline_styles() {
     2521
     2522    $total_inline_limit = 20000;
     2523    /**
     2524     * The maximum size of inlined styles in bytes.
     2525     *
     2526     * @param int $total_inline_limit The file-size threshold, in bytes. Defaults to 20000.
     2527     * @return int                    The file-size threshold, in bytes.
     2528     */
     2529    $total_inline_limit = apply_filters( 'styles_inline_size_limit', $total_inline_limit );
     2530
     2531    global $wp_styles;
     2532    $styles = array();
     2533
     2534    // Build an array of styles that have a path defined.
     2535    foreach ( $wp_styles->queue as $handle ) {
     2536        if ( wp_styles()->get_data( $handle, 'path' ) && file_exists( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
     2537            $styles[] = array(
     2538                'handle' => $handle,
     2539                'path'   => $wp_styles->registered[ $handle ]->extra['path'],
     2540                'size'   => filesize( $wp_styles->registered[ $handle ]->extra['path'] ),
     2541            );
     2542        }
     2543    }
     2544
     2545    if ( ! empty( $styles ) ) {
     2546        // Reorder styles array based on size.
     2547        usort(
     2548            $styles,
     2549            function( $a, $b ) {
     2550                return ( $a['size'] <= $b['size'] ) ? -1 : 1;
     2551            }
     2552        );
     2553
     2554        /**
     2555         * The total inlined size.
     2556         *
     2557         * On each iteration of the loop, if a style gets added inline the value of this var increases
     2558         * to reflect the total size of inlined styles.
     2559         */
     2560        $total_inline_size = 0;
     2561
     2562        // Loop styles.
     2563        foreach ( $styles as $style ) {
     2564
     2565            // Size check. Since styles are ordered by size, we can break the loop.
     2566            if ( $total_inline_size + $style['size'] > $total_inline_limit ) {
     2567                break;
     2568            }
     2569
     2570            // Get the styles if we don't already have them.
     2571            $style['css'] = file_get_contents( $style['path'] );
     2572
     2573            // Set `src` to `false` and add styles inline.
     2574            $wp_styles->registered[ $style['handle'] ]->src = false;
     2575            if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) {
     2576                $wp_styles->registered[ $style['handle'] ]->extra['after'] = array();
     2577            }
     2578            array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] );
     2579
     2580            // Add the styles size to the $total_inline_size var.
     2581            $total_inline_size += (int) $style['size'];
     2582        }
     2583    }
     2584}
Note: See TracChangeset for help on using the changeset viewer.