Skip to content

Script Modules: Centralize (re)registration #65460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sirreal merged 20 commits into from
Sep 20, 2024
Merged

Script Modules: Centralize (re)registration #65460

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
487a982
PICKME: Add build-module to GH actions
sirreal Sep 19, 2024
11c63fe
Fix artifact download
sirreal Sep 20, 2024
44dd78f
Remove block-library view script module registration on render
sirreal Sep 18, 2024
508cbba
Produce combined script modules assetfile
sirreal Sep 18, 2024
00a196b
Fix script module webpack filenames
sirreal Sep 18, 2024
a148c74
Remove specific interactivity script module registration
sirreal Sep 18, 2024
5015d56
Handle re-registration of core script modules
sirreal Sep 18, 2024
b0b3e72
Fix script module re-registration
sirreal Sep 18, 2024
370f2e6
Move script module registration out of experimental
sirreal Sep 19, 2024
1bad15c
Just use assets.php
sirreal Sep 19, 2024
cb3a31b
Replace WP modules action with GB modules
sirreal Sep 19, 2024
476183a
Update function name, add deprecation note
sirreal Sep 19, 2024
3f457a5
Properly trim .min.js and .js
sirreal Sep 19, 2024
6759367
Remove unused filter function
sirreal Sep 20, 2024
ff352fc
Simplify module id creation and special casing
sirreal Sep 20, 2024
23bff87
Add core-backport file
sirreal Sep 20, 2024
b8e11bc
Use .min.js for webpack filename extension
sirreal Sep 20, 2024
8386d14
Merge branch 'fix/build-module-cached-unit-test-asset' into fix/block…
sirreal Sep 20, 2024
44da0b0
Use non-minified assets with SCRIPT_DEBUG
sirreal Sep 20, 2024
e99b96e
Remove usage of non-min .js files in Script Debug
sirreal Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Move script module registration out of experimental
  • Loading branch information
@sirreal
sirreal committed Sep 20, 2024
commit 370f2e6e75d6a8b8a41f15d7495f9b60966f0e96
49 changes: 49 additions & 0 deletions lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,55 @@ function gutenberg_register_vendor_scripts( $scripts ) {
}
add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );

/**
* Registers or re-registers Gutenberg Script Modules.
*
* Script modules that are registered by Core will be re-registered by Gutenberg.
*/
function gutenberg_register_script_modules() {
/*
* Expects multidimensional array like:
*
* 'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
* 'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
* 'interactivity-router/index.min.js' => …
*/
$assets = include gutenberg_dir_path() . '/build-module/assets.production.php';

foreach ( $assets as $file_name => $script_module_data ) {
$package_name = dirname( $file_name );
$package_sub_name = basename( $file_name, '.min.js' );

switch ( $package_name ) {
/*
* Interactivity exposes two entrypoints, `/index` and `/debug`.
* They're the production and development versions of the package.
*/
case 'interactivity':
if ( SCRIPT_DEBUG ) {
if ( 'index' === $package_sub_name ) {
continue 2;
}
} else {
if ( 'debug' === $package_sub_name ) {
continue 2;
}
}
$script_module_id = '@wordpress/interactivity';
break;

default:
$script_module_id = 'index' === $package_sub_name ?
"@wordpress/{$package_name}" :
"@wordpress/{$package_name}/{$package_sub_name}";
}

$path = gutenberg_url( "build-module/{$file_name}" );
Copy link
Member

@gziolo gziolo Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a slight change that needs to get incorporated here. There should be a different file served depending on SCRIPT_DEBUG:

  • when true: .js
  • when false: .min.js

Copy link
Member

@gziolo gziolo Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not that sure anymore after looking at how scripts for packages are handled:

gutenberg/lib/client-assets.php

Lines 190 to 238 in 5e37a13

foreach ( glob( gutenberg_dir_path() . 'build/*/index.min.js' ) as $path ) {
// Prefix `wp-` to package directory to get script handle.
// For example, `…/build/a11y/index.min.js` becomes `wp-a11y`.
$handle = 'wp-' . basename( dirname( $path ) );
// Replace extension with `.asset.php` to find the generated dependencies file.
$asset_file = substr( $path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
$asset = file_exists( $asset_file )
? require $asset_file
: null;
$dependencies = isset( $asset['dependencies'] ) ? $asset['dependencies'] : array();
$version = isset( $asset['version'] ) ? $asset['version'] : $default_version;
// Add dependencies that cannot be detected and generated by build tools.
switch ( $handle ) {
case 'wp-block-library':
if (
! gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ||
! empty( $_GET['requiresTinymce'] ) ||
gutenberg_post_being_edited_requires_classic_block()
) {
array_push( $dependencies, 'editor' );
}
break;
case 'wp-edit-post':
array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
break;
case 'wp-edit-site':
array_push( $dependencies, 'wp-dom-ready' );
break;
case 'wp-preferences':
array_push( $dependencies, 'wp-preferences-persistence' );
break;
}
// Get the path from Gutenberg directory as expected by `gutenberg_url`.
$gutenberg_path = substr( $path, strlen( gutenberg_dir_path() ) );
gutenberg_override_script(
$scripts,
$handle,
gutenberg_url( $gutenberg_path ),
$dependencies,
$version,
true
);
}

Copy link
Member Author

@sirreal sirreal Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Done.

Copy link
Member

@gziolo gziolo Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't have the latest version of the branch 🙈

This is what I see now with npm run dev:

Screenshot 2024-09-20 at 12 39 03 Screenshot 2024-09-20 at 12 40 06

I still do not think I understand it fully. .min.js is always produced when you use npm run dev and npm run build. mode === 'production' && new ReadableJsAssetsWebpackPlugin(), means that .js gets only generated for production builds - npm run build. From the docs of the webpack plugin:

Generate a readable non-minified JS file for each .min.js asset.

The end result is that for each JS entrypoint, we get a set of readable and non-minimized .js file and a minimized .min.js. This allows Gutenberg to follow the WordPress convention of adding a .min.js suffix to minimized JS files, while still providing a readable and unminized files that play well with the WordPress i18n machinery.

I'm still puzzled why there is no SCRIPT_DEBUG involved like in WP core.

Copy link
Member

@gziolo gziolo Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove 44da0b0 for now and ship it all as is.

Copy link
Member

@gziolo gziolo Sep 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same folder after npm run build:

Screenshot 2024-09-20 at 12 49 23

Notice .js and .min.js files get created. For npm run dev I see only .min.js files 🤷🏻 In effect, it behaves like in debug mode. However, once the plugin gets released, there is no longer a way to use the debug version. In fact, it probably doesn't make too much sense, because .js file is built with production mode.

Copy link
Member Author

@sirreal sirreal Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's confusing. When doing a development build, .min.js files are produced but they're not minified. The SCRIPT_DEBUG doesn't change the files Gutenberg uses.

I've reverted the .min.js/.js changes.

wp_deregister_script_module( $script_module_id );
wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
}
}
add_action( 'after_setup_theme', 'gutenberg_register_script_modules', 20 );

/*
* Always remove the Core action hook while gutenberg_enqueue_stored_styles() exists to avoid styles being printed twice.
Expand Down
50 changes: 0 additions & 50 deletions lib/experimental/script-modules.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,55 +239,5 @@ function gutenberg_a11y_script_module_html() {
. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
. '</div>';
}

/**
* Registers Gutenberg Script Modules.
*
* @since 19.3
*/
function gutenberg_register_script_modules() {
/*
* Expects multidimensional array like:
*
* 'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
* 'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
* 'interactivity-router/index.min.js' => …
*/
$assets = include gutenberg_dir_path() . '/build-module/assets.production.php';

foreach ( $assets as $file_name => $script_module_data ) {
$package_name = dirname( $file_name );
$package_sub_name = basename( $file_name, '.min.js' );

switch ( $package_name ) {
/*
* Interactivity exposes two entrypoints, `/index` and `/debug`.
* They're the production and development versions of the package.
*/
case 'interactivity':
if ( SCRIPT_DEBUG ) {
if ( 'index' === $package_sub_name ) {
continue 2;
}
} else {
if ( 'debug' === $package_sub_name ) {
continue 2;
}
}
$script_module_id = '@wordpress/interactivity';
break;

default:
$script_module_id = 'index' === $package_sub_name ?
"@wordpress/{$package_name}" :
"@wordpress/{$package_name}/{$package_sub_name}";
}

$path = gutenberg_url( "build-module/{$file_name}" );
wp_deregister_script_module( $script_module_id );
wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
}
}
add_action( 'after_setup_theme', 'gutenberg_register_script_modules', 20 );
add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );