Copy React vendor scripts from Gutenberg, update version number

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

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',

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' );

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 {