PluginProbe
Gutenberg / 14.7.0
Gutenberg v14.7.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
← All changes | lib/client-assets.php +102 -227 12.6.014.7.0 View file →
@@ -1,8 +1,8 @@
1 1 <?php
2 2 /**
3 - * Functions to register client-side assets (scripts and stylesheets) for the
4 - * Gutenberg editor plugin.
3 + * Functions to register client-side assets (scripts and stylesheets) specific
4 + * for the Gutenberg editor plugin.
5 5 *
6 6 * @package gutenberg
7 7 */
8 8
@@ -53,8 +53,14 @@
53 53 * @param bool $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
54 54 * Default 'false'.
55 55 */
56 56 function gutenberg_override_script( $scripts, $handle, $src, $deps = array(), $ver = false, $in_footer = false ) {
57 + /*
58 + * Force `wp-i18n` script to be registered in the <head> as a
59 + * temporary workaround for https://meta.trac.wordpress.org/ticket/6195.
60 + */
61 + $in_footer = 'wp-i18n' === $handle ? false : $in_footer;
62 +
57 63 $script = $scripts->query( $handle, 'registered' );
58 64 if ( $script ) {
59 65 /*
60 66 * In many ways, this is a reimplementation of `wp_register_script` but
@@ -65,24 +71,11 @@
65 71 // See: `_WP_Dependency::__construct` .
66 72 $script->src = $src;
67 73 $script->deps = $deps;
68 74 $script->ver = $ver;
69 - $script->args = $in_footer;
70 -
71 - /*
72 - * The script's `group` designation is an indication of whether it is
73 - * to be printed in the header or footer. The behavior here defers to
74 - * the arguments as passed. Specifically, group data is not assigned
75 - * for a script unless it is designated to be printed in the footer.
76 - */
77 -
78 - // See: `wp_register_script` .
79 - unset( $script->extra['group'] );
80 - if ( $in_footer ) {
81 - $script->add_data( 'group', 1 );
82 - }
75 + $script->args = $in_footer ? 1 : null;
83 76 } else {
84 - $scripts->add( $handle, $src, $deps, $ver, $in_footer );
77 + $scripts->add( $handle, $src, $deps, $ver, ( $in_footer ? 1 : null ) );
85 78 }
86 79
87 80 /*
88 81 * `WP_Dependencies::set_translations` will fall over on itself if setting
@@ -128,9 +121,9 @@
128 121 return $file;
129 122 }
130 123
131 124 // Ignore scripts whose handle does not have the "wp-" prefix.
132 - if ( 'wp-' !== substr( $handle, 0, 3 ) ) {
125 + if ( ! str_starts_with( $handle, 'wp-' ) ) {
133 126 return $file;
134 127 }
135 128
136 129 // Ignore scripts that are not found in the expected `build/` location.
@@ -189,39 +182,8 @@
189 182 $styles->add( $handle, $src, $deps, $ver, $media );
190 183 }
191 184
192 185 /**
193 - * Registers vendor JavaScript files to be used as dependencies of the editor
194 - * and plugins.
195 - *
196 - * This function is called from a script during the plugin build process, so it
197 - * should not call any WordPress PHP functions.
198 - *
199 - * @since 0.1.0
200 - *
201 - * @param WP_Scripts $scripts WP_Scripts instance.
202 - */
203 -function gutenberg_register_vendor_scripts( $scripts ) {
204 - $suffix = SCRIPT_DEBUG ? '' : '.min';
205 -
206 - $react_suffix = ( SCRIPT_DEBUG ? '.development' : '.production' ) . $suffix;
207 - gutenberg_register_vendor_script(
208 - $scripts,
209 - 'react',
210 - 'https://unpkg.com/react@17.0.1/umd/react' . $react_suffix . '.js',
211 - // See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
212 - SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' )
213 - );
214 - gutenberg_register_vendor_script(
215 - $scripts,
216 - 'react-dom',
217 - 'https://unpkg.com/react-dom@17.0.1/umd/react-dom' . $react_suffix . '.js',
218 - array( 'react' )
219 - );
220 -}
221 -add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
222 -
223 -/**
224 186 * Registers all the WordPress packages scripts that are in the standardized
225 187 * `build/` location.
226 188 *
227 189 * @since 4.5.0
@@ -230,9 +192,9 @@
230 192 */
231 193 function gutenberg_register_packages_scripts( $scripts ) {
232 194 // When in production, use the plugin's version as the default asset version;
233 195 // else (for development or test) default to use the current time.
234 - $default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
196 + $default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
235 197
236 198 foreach ( glob( gutenberg_dir_path() . 'build/*/index.min.js' ) as $path ) {
237 199 // Prefix `wp-` to package directory to get script handle.
238 200 // For example, `…/build/a11y/index.min.js` becomes `wp-a11y`.
@@ -240,9 +202,9 @@
240 202
241 203 // Replace extension with `.asset.php` to find the generated dependencies file.
242 204 $asset_file = substr( $path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
243 205 $asset = file_exists( $asset_file )
244 - ? require( $asset_file )
206 + ? require $asset_file
245 207 : null;
246 208 $dependencies = isset( $asset['dependencies'] ) ? $asset['dependencies'] : array();
247 209 $version = isset( $asset['version'] ) ? $asset['version'] : $default_version;
248 210
@@ -286,10 +248,19 @@
286 248 */
287 249 function gutenberg_register_packages_styles( $styles ) {
288 250 // When in production, use the plugin's version as the asset version;
289 251 // else (for development or test) default to use the current time.
290 - $version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
252 + $version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
291 253
254 + gutenberg_override_style(
255 + $styles,
256 + 'wp-block-editor-content',
257 + gutenberg_url( 'build/block-editor/content.css' ),
258 + array(),
259 + $version
260 + );
261 + $styles->add_data( 'wp-block-editor-content', 'rtl', 'replace' );
262 +
292 263 // Editor Styles.
293 264 gutenberg_override_style(
294 265 $styles,
295 266 'wp-block-editor',
@@ -347,24 +318,26 @@
347 318 $styles->add_data( 'wp-format-library', 'rtl', 'replace' );
348 319
349 320 $wp_edit_blocks_dependencies = array(
350 321 'wp-components',
351 - 'wp-editor',
352 322 // This need to be added before the block library styles,
353 323 // The block library styles override the "reset" styles.
354 324 'wp-reset-editor-styles',
355 325 'wp-block-library',
356 326 'wp-reusable-blocks',
327 + // Until #37466, we can't specifically add them as editor styles yet,
328 + // so we must hard-code it here as a dependency.
329 + 'wp-block-editor-content',
357 330 );
358 331
359 332 // Only load the default layout and margin styles for themes without theme.json file.
360 - if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
333 + if ( ! wp_theme_has_theme_json() ) {
361 334 $wp_edit_blocks_dependencies[] = 'wp-editor-classic-layout-styles';
362 335 }
363 336
364 337 global $editor_styles;
365 - if ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) {
366 - // Include opinionated block styles if no $editor_styles are declared, so the editor never appears broken.
338 + if ( current_theme_supports( 'wp-block-styles' ) && ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) ) {
339 + // Include opinionated block styles if the theme supports block styles and no $editor_styles are declared, so the editor never appears broken.
367 340 $wp_edit_blocks_dependencies[] = 'wp-block-library-theme';
368 341 }
369 342
370 343 gutenberg_override_style(
@@ -424,9 +397,9 @@
424 397 gutenberg_override_style(
425 398 $styles,
426 399 'wp-edit-navigation',
427 400 gutenberg_url( 'build/edit-navigation/style.css' ),
428 - array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
401 + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks' ),
429 402 $version
430 403 );
431 404 $styles->add_data( 'wp-edit-navigation', 'rtl', 'replace' );
432 405
@@ -433,9 +406,9 @@
433 406 gutenberg_override_style(
434 407 $styles,
435 408 'wp-edit-site',
436 409 gutenberg_url( 'build/edit-site/style.css' ),
437 - array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
410 + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks' ),
438 411 $version
439 412 );
440 413 $styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
441 414
@@ -442,9 +415,9 @@
442 415 gutenberg_override_style(
443 416 $styles,
444 417 'wp-edit-widgets',
445 418 gutenberg_url( 'build/edit-widgets/style.css' ),
446 - array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks', 'wp-reusable-blocks', 'wp-widgets' ),
419 + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-reusable-blocks', 'wp-widgets' ),
447 420 $version
448 421 );
449 422 $styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
450 423
@@ -460,9 +433,9 @@
460 433 gutenberg_override_style(
461 434 $styles,
462 435 'wp-customize-widgets',
463 436 gutenberg_url( 'build/customize-widgets/style.css' ),
464 - array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks', 'wp-widgets' ),
437 + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets' ),
465 438 $version
466 439 );
467 440 $styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
468 441
@@ -485,193 +458,95 @@
485 458 }
486 459 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
487 460
488 461 /**
489 - * Retrieves a unique and reasonably short and human-friendly filename for a
490 - * vendor script based on a URL and the script handle.
462 + * Fetches, processes and compiles stored core styles, then combines and renders them to the page.
463 + * Styles are stored via the Style Engine API.
491 464 *
492 - * @param string $handle The name of the script.
493 - * @param string $src Full URL of the external script.
465 + * This hook also exists, and should be backported to Core in future versions.
466 + * However, it is envisaged that Gutenberg will continue to use the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes to aid continuous development.
494 467 *
495 - * @return string Script filename suitable for local caching.
468 + * See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
496 469 *
497 - * @since 0.1.0
498 - */
499 -function gutenberg_vendor_script_filename( $handle, $src ) {
500 - $filename = basename( $src );
501 - $match = preg_match(
502 - '/^'
503 - . '(?P<ignore>.*?)'
504 - . '(?P<suffix>\.min)?'
505 - . '(?P<extension>\.js)'
506 - . '(?P<extra>.*)'
507 - . '$/',
508 - $filename,
509 - $filename_pieces
510 - );
511 -
512 - $prefix = $handle;
513 - $suffix = $match ? $filename_pieces['suffix'] : '';
514 - $hash = substr( md5( $src ), 0, 8 );
515 -
516 - return "${prefix}${suffix}.${hash}.js";
517 -}
518 -
519 -/**
520 - * Registers a vendor script from a URL, preferring a locally cached version if
521 - * possible, or downloading it if the cached version is unavailable or
522 - * outdated.
470 + * @param array $options {
471 + * Optional. An array of options to pass to gutenberg_style_engine_get_stylesheet_from_context(). Default empty array.
523 472 *
524 - * @param WP_Scripts $scripts WP_Scripts instance.
525 - * @param string $handle Name of the script.
526 - * @param string $src Full URL of the external script.
527 - * @param array $deps Optional. An array of registered script handles this
528 - * script depends on.
529 - * @param string|bool|null $ver Optional. String specifying script version number, if it has one, which is added to the URL
530 - * as a query string for cache busting purposes. If version is set to false, a version
531 - * number is automatically added equal to current installed WordPress version.
532 - * If set to null, no version is added.
533 - * @param bool $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
534 - * Default 'false'.
473 + * @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
474 + * @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
475 + * }
535 476 *
536 - * @since 0.1.0
477 + * @since 6.1
478 + *
479 + * @return void
537 480 */
538 -function gutenberg_register_vendor_script( $scripts, $handle, $src, $deps = array(), $ver = null, $in_footer = false ) {
539 - if ( defined( 'GUTENBERG_LOAD_VENDOR_SCRIPTS' ) && ! GUTENBERG_LOAD_VENDOR_SCRIPTS ) {
540 - return;
541 - }
481 +function gutenberg_enqueue_stored_styles( $options = array() ) {
482 + $is_block_theme = wp_is_block_theme();
483 + $is_classic_theme = ! $is_block_theme;
542 484
543 - $filename = gutenberg_vendor_script_filename( $handle, $src );
544 -
545 - if ( defined( 'GUTENBERG_LIST_VENDOR_ASSETS' ) && GUTENBERG_LIST_VENDOR_ASSETS ) {
546 - echo "$src|$filename\n";
485 + /*
486 + * For block themes, print stored styles in the header.
487 + * For classic themes, in the footer.
488 + */
489 + if (
490 + ( $is_block_theme && doing_action( 'wp_footer' ) ) ||
491 + ( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) )
492 + ) {
547 493 return;
548 494 }
549 495
550 - $full_path = gutenberg_dir_path() . 'vendor/' . $filename;
551 -
552 - $needs_fetch = (
553 - defined( 'GUTENBERG_DEVELOPMENT_MODE' ) && GUTENBERG_DEVELOPMENT_MODE && (
554 - ! file_exists( $full_path ) ||
555 - time() - filemtime( $full_path ) >= DAY_IN_SECONDS
556 - )
557 - );
558 -
559 - if ( $needs_fetch ) {
560 - // Determine whether we can write to this file. If not, don't waste
561 - // time doing a network request.
562 - // @codingStandardsIgnoreStart
563 -
564 - $is_writable = is_writable( $full_path );
565 - if ( $is_writable ) {
566 - $f = @fopen( $full_path, 'a' );
567 - if ( ! $f ) {
568 - $is_writable = false;
569 - } else {
570 - fclose( $f );
571 - }
496 + $core_styles_keys = array( 'block-supports' );
497 + $compiled_core_stylesheet = '';
498 + $style_tag_id = 'core';
499 + foreach ( $core_styles_keys as $style_key ) {
500 + // Adds comment if code is prettified to identify core styles sections in debugging.
501 + $should_prettify = isset( $options['prettify'] ) ? true === $options['prettify'] : SCRIPT_DEBUG;
502 + if ( $should_prettify ) {
503 + $compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n";
572 504 }
505 + // Chains core store ids to signify what the styles contain.
506 + $style_tag_id .= '-' . $style_key;
507 + $compiled_core_stylesheet .= gutenberg_style_engine_get_stylesheet_from_context( $style_key, $options );
508 + }
573 509
574 - // @codingStandardsIgnoreEnd
575 - if ( ! $is_writable ) {
576 - // Failed to open the file for writing, probably due to server
577 - // permissions. Enqueue the script directly from the URL instead.
578 - gutenberg_override_script( $scripts, $handle, $src, $deps, $ver, $in_footer );
579 - return;
580 - }
581 -
582 - $response = wp_remote_get( $src );
583 - if ( wp_remote_retrieve_response_code( $response ) === 200 ) {
584 - $f = fopen( $full_path, 'w' );
585 - fwrite( $f, wp_remote_retrieve_body( $response ) );
586 - fclose( $f );
587 - } elseif ( ! filesize( $full_path ) ) {
588 - // The request failed. If the file is already cached, continue to
589 - // use this file. If not, then unlink the 0 byte file, and enqueue
590 - // the script directly from the URL.
591 - gutenberg_override_script( $scripts, $handle, $src, $deps, $ver, $in_footer );
592 - unlink( $full_path );
593 - return;
594 - }
510 + // Combines Core styles.
511 + if ( ! empty( $compiled_core_stylesheet ) ) {
512 + wp_register_style( $style_tag_id, false, array(), true, true );
513 + wp_add_inline_style( $style_tag_id, $compiled_core_stylesheet );
514 + wp_enqueue_style( $style_tag_id );
595 515 }
596 - gutenberg_override_script(
597 - $scripts,
598 - $handle,
599 - gutenberg_url( 'vendor/' . $filename ),
600 - $deps,
601 - $ver,
602 - $in_footer
603 - );
604 -}
605 516
606 -/**
607 - * Sets the editor styles to be consumed by JS.
608 - */
609 -function gutenberg_resolve_assets() {
610 - global $pagenow;
517 + // If there are any other stores registered by themes etc., print them out.
518 + $additional_stores = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_stores();
611 519
612 - $script_handles = array();
613 - $style_handles = array(
614 - 'wp-block-editor',
615 - 'wp-block-library',
616 - 'wp-block-library-theme',
617 - 'wp-edit-blocks',
618 - );
619 -
620 - if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
621 - $style_handles[] = 'wp-widgets';
622 - $style_handles[] = 'wp-edit-widgets';
520 + /*
521 + * Since the corresponding action hook in Core is removed below,
522 + * this function should still honour any styles stored using the Core Style Engine store.
523 + */
524 + if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
525 + $additional_stores = array_merge( $additional_stores, WP_Style_Engine_CSS_Rules_Store::get_stores() );
623 526 }
624 527
625 - $block_registry = WP_Block_Type_Registry::get_instance();
626 -
627 - foreach ( $block_registry->get_all_registered() as $block_type ) {
628 - if ( ! empty( $block_type->style ) ) {
629 - $style_handles[] = $block_type->style;
528 + foreach ( array_keys( $additional_stores ) as $store_name ) {
529 + if ( in_array( $store_name, $core_styles_keys, true ) ) {
530 + continue;
630 531 }
631 -
632 - if ( ! empty( $block_type->editor_style ) ) {
633 - $style_handles[] = $block_type->editor_style;
532 + $styles = gutenberg_style_engine_get_stylesheet_from_context( $store_name, $options );
533 + if ( ! empty( $styles ) ) {
534 + $key = "wp-style-engine-$store_name";
535 + wp_register_style( $key, false, array(), true, true );
536 + wp_add_inline_style( $key, $styles );
537 + wp_enqueue_style( $key );
634 538 }
635 -
636 - if ( ! empty( $block_type->script ) ) {
637 - $script_handles[] = $block_type->script;
638 - }
639 539 }
540 +}
640 541
641 - $style_handles = array_unique( $style_handles );
642 - $done = wp_styles()->done;
542 +/*
543 + * Always remove the Core action hook while gutenberg_enqueue_stored_styles() exists to avoid styles being printed twice.
544 + * This is also because gutenberg_enqueue_stored_styles uses the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes,
545 + * which are in continuous development and generally ahead of Core.
546 + */
547 +remove_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
548 +remove_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
643 549
644 - ob_start();
645 -
646 - // We do not need reset styles for the iframed editor.
647 - wp_styles()->done = array( 'wp-reset-editor-styles' );
648 - wp_styles()->do_items( $style_handles );
649 - wp_styles()->done = $done;
650 -
651 - $styles = ob_get_clean();
652 -
653 - $script_handles = array_unique( $script_handles );
654 - $done = wp_scripts()->done;
655 -
656 - ob_start();
657 -
658 - wp_scripts()->done = array();
659 - wp_scripts()->do_items( $script_handles );
660 - wp_scripts()->done = $done;
661 -
662 - $scripts = ob_get_clean();
663 -
664 - return array(
665 - 'styles' => $styles,
666 - 'scripts' => $scripts,
667 - );
668 -}
669 -
670 -add_filter(
671 - 'block_editor_settings_all',
672 - function( $settings ) {
673 - // In the future we can allow WP Dependency handles to be passed.
674 - $settings['__unstableResolvedAssets'] = gutenberg_resolve_assets();
675 - return $settings;
676 - }
677 -);
550 +// Enqueue stored styles.
551 +add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' );
552 +add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 );