Copy React vendor scripts from Gutenberg, update version number

Author: jsnajdr

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

tests/phpunit/tests/dependencies/scripts.php

@@ -3923,18 +3923,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 and ReactDOM.
 		 *
-		 * 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
 		 */
-		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

@@ -574,22 +574,17 @@ async function main() {
 				) {
 					/*
 					 * Copy special directories with rename (vendors/ → vendor/).
-					 * Only copy react-jsx-runtime from vendors (react and react-dom come from Core's node_modules).
 					 */
 					const destName =
 						scriptsConfig.directoryRenames[ entry.name ];
 					const dest = path.join( scriptsDest, destName );
 
 					if ( entry.name === 'vendors' ) {
-						// Only copy react-jsx-runtime files, skip react and react-dom.
 						const vendorFiles = fs.readdirSync( src );
 						let copiedCount = 0;
 						fs.mkdirSync( dest, { recursive: true } );
 						for ( const file of vendorFiles ) {
-							if (
-								file.startsWith( 'react-jsx-runtime' ) &&
-								file.endsWith( '.js' )
-							) {
+							if ( file.endsWith( '.js' ) ) {
 								const srcFile = path.join( src, file );
 								const destFile = path.join( dest, file );
 
@@ -598,7 +593,7 @@ async function main() {
 							}
 						}
 						console.log(
-							`   ✅ ${ entry.name }/ → ${ destName }/ (react-jsx-runtime only, ${ copiedCount } files)`
+							`   ✅ ${ entry.name }/ → ${ destName }/ (${ copiedCount } files)`
 						);
 					}
 				} else {

tools/vendors/copy-vendors.js

@@ -54,22 +54,6 @@ const VENDOR_FILES = {
 		],
 	},
 
-	// React (UMD builds from node_modules)
-	'react': {
-		files: [
-			{ from: 'react/umd/react.development.js', to: 'react.js' },
-			{ from: 'react/umd/react.production.min.js', to: 'react.min.js' },
-		],
-	},
-
-	// React DOM (UMD builds from node_modules)
-	'react-dom': {
-		files: [
-			{ from: 'react-dom/umd/react-dom.development.js', to: 'react-dom.js' },
-			{ from: 'react-dom/umd/react-dom.production.min.js', to: 'react-dom.min.js' },
-		],
-	},
-
 	// Main Polyfill bundle
 	'wp-polyfill': {
 		files: [