From a37b80d8f18721068cfc09c5d52daaf5d307705f Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 26 Mar 2026 12:29:13 +0100 Subject: [PATCH] Copy React vendor scripts from Gutenberg, update version number --- Gruntfile.js | 13 +++---------- src/wp-includes/script-loader.php | 7 ++++--- tests/phpunit/tests/dependencies/scripts.php | 12 ++++++------ tools/gutenberg/copy.js | 20 ++++++++++++++++---- 4 files changed, 29 insertions(+), 23 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index dae8c3e972e4c..4b3dd7c78b0db 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -51,8 +51,8 @@ module.exports = function(grunt) { */ '!wp-includes/js/dist', 'wp-includes/js/dist/vendor/*.js', - // Managed by the Gutenberg-related tasks. - '!wp-includes/js/dist/vendor/react-jsx-runtime*', + // Managed by the Gutenberg-related tasks (react, react-dom, react-jsx-runtime). + '!wp-includes/js/dist/vendor/react*', ], // Files sourced from the Gutenberg repository built asset that are ignored by version control. @@ -61,7 +61,7 @@ module.exports = function(grunt) { SOURCE_DIR + 'wp-includes/css/dist', SOURCE_DIR + 'wp-includes/js/dist/*.js', SOURCE_DIR + 'wp-includes/js/dist/script-modules', - SOURCE_DIR + 'wp-includes/js/dist/vendor/react-jsx-runtime*', + SOURCE_DIR + 'wp-includes/js/dist/vendor/react*', ], // Files sourced from the Gutenberg repository built asset that are managed through version control. @@ -455,13 +455,6 @@ module.exports = function(grunt) { [ WORKING_DIR + 'wp-includes/js/dist/vendor/regenerator-runtime.js' ]: [ './node_modules/regenerator-runtime/runtime.js' ], [ WORKING_DIR + 'wp-includes/js/dist/vendor/regenerator-runtime.min.js' ]: [ './node_modules/regenerator-runtime/runtime.js' ], }, - // React libraries: react, react-dom - { - [ WORKING_DIR + 'wp-includes/js/dist/vendor/react.js' ]: [ './node_modules/react/umd/react.development.js' ], - [ WORKING_DIR + 'wp-includes/js/dist/vendor/react.min.js' ]: [ './node_modules/react/umd/react.production.min.js' ], - [ WORKING_DIR + 'wp-includes/js/dist/vendor/react-dom.js' ]: [ './node_modules/react-dom/umd/react-dom.development.js' ], - [ WORKING_DIR + 'wp-includes/js/dist/vendor/react-dom.min.js' ]: [ './node_modules/react-dom/umd/react-dom.production.min.js' ], - }, // Polyfills { // @wordpress/babel-preset-default diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 299e8dc9b750f..013c70942b3f4 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -106,9 +106,10 @@ function wp_default_packages_vendor( $scripts ) { ); $vendor_scripts_versions = array( - 'react' => '18.3.1.1', // Final .1 due to switch to UMD build, can be removed in the next update. - 'react-dom' => '18.3.1.1', // Final .1 due to switch to UMD build, can be removed in the next update. - 'react-jsx-runtime' => '18.3.1', + // Add `-wp` suffix to React package versions to differentiate from the UMD builds. We build our own bundles now. + 'react' => '18.3.1-wp', + 'react-dom' => '18.3.1-wp', + 'react-jsx-runtime' => '18.3.1-wp', 'regenerator-runtime' => '0.14.1', 'moment' => '2.30.1', 'lodash' => '4.18.1', diff --git a/tests/phpunit/tests/dependencies/scripts.php b/tests/phpunit/tests/dependencies/scripts.php index 73c60dcffa8c0..8240f88ef295e 100644 --- a/tests/phpunit/tests/dependencies/scripts.php +++ b/tests/phpunit/tests/dependencies/scripts.php @@ -4158,18 +4158,18 @@ public function test_vendor_script_versions_registered_manually( $script, $handl } /* - * Append '.1' to the version number for React and ReactDOM. + * Append '-wp' to the version number for React-related scripts. * - * This is due to a change in the build to use the UMD version of the + * This is due to a change in the build to stop using the UMD version of the * scripts, requiring a different version number in order to break the * caches of some CDNs. * - * This can be removed in the next update to the packages. + * This can be removed in the next update to the packages (to React 19). * - * See https://core.trac.wordpress.org/ticket/62422 + * See https://core.trac.wordpress.org/ticket/64958 */ - if ( in_array( $handle, array( 'react', 'react-dom' ), true ) ) { - $package_json[ $script ] .= '.1'; + if ( in_array( $handle, array( 'react', 'react-dom', 'react-jsx-runtime' ), true ) ) { + $package_json[ $script ] .= '-wp'; } $script_query = $wp_scripts->query( $handle, 'registered' ); diff --git a/tools/gutenberg/copy.js b/tools/gutenberg/copy.js index 3da78e4b14611..20a0dee905a92 100644 --- a/tools/gutenberg/copy.js +++ b/tools/gutenberg/copy.js @@ -183,19 +183,31 @@ function copyScripts( config ) { ) { /* * Copy special directories with rename (vendors/ → vendor/). - * Only copy react-jsx-runtime from vendors (react and react-dom come from Core's node_modules). + * Copy the React vendor scripts (react, react-dom, react-jsx-runtime) + * built by Gutenberg. */ const destName = config.directoryRenames[ entry.name ]; const dest = path.join( scriptsDest, destName ); if ( entry.name === 'vendors' ) { - // Only copy react-jsx-runtime files, skip react and react-dom. + /* + * Only copy these React scripts. The build directory also + * contains future versions (react-19, react-dom-19, etc.) + * that should not be copied. + */ + const copiedVendorScripts = [ + 'react', + 'react-dom', + 'react-jsx-runtime', + ]; const vendorFiles = fs.readdirSync( src ); let copiedCount = 0; fs.mkdirSync( dest, { recursive: true } ); for ( const file of vendorFiles ) { if ( - file.startsWith( 'react-jsx-runtime' ) && + copiedVendorScripts.some( ( prefix ) => + file.startsWith( prefix + '.' ) + ) && file.endsWith( '.js' ) ) { const srcFile = path.join( src, file ); @@ -206,7 +218,7 @@ function copyScripts( config ) { } } console.log( - ` ✅ ${ entry.name }/ → ${ destName }/ (react-jsx-runtime only, ${ copiedCount } files)` + ` ✅ ${ entry.name }/ → ${ destName }/ (${ copiedCount } files)` ); } } else {