Skip to content

Copy React vendor scripts from Gutenberg, update version number #11359

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

Open
jsnajdr wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Copy React vendor scripts from Gutenberg, update version number #11359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3498f0c
Copy React vendor scripts from Gutenberg, update version number
jsnajdr Mar 26, 2026
177e2a6
Remove legacy react dependencies and related test code
jsnajdr Jul 16, 2026
8f71142
Move Gutenberg vendor copying to Gruntfile
jsnajdr Jul 16, 2026
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
15 changes: 7 additions & 8 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ 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*',
],

// Files sourced from the Gutenberg repository built asset that are ignored by version control.
Expand All @@ -61,7 +59,6 @@ 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*',
],

// Files sourced from the Gutenberg repository built asset that are managed through version control.
Expand Down Expand Up @@ -455,12 +452,14 @@ 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
// React libraries: react, react-dom, react-jsx-runtime (sourced from the Gutenberg build).
{
[ 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' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react.js' ]: [ './gutenberg/build/scripts/vendors/react.js' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react.min.js' ]: [ './gutenberg/build/scripts/vendors/react.min.js' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react-dom.js' ]: [ './gutenberg/build/scripts/vendors/react-dom.js' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react-dom.min.js' ]: [ './gutenberg/build/scripts/vendors/react-dom.min.js' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react-jsx-runtime.js' ]: [ './gutenberg/build/scripts/vendors/react-jsx-runtime.js' ],
[ WORKING_DIR + 'wp-includes/js/dist/vendor/react-jsx-runtime.min.js' ]: [ './gutenberg/build/scripts/vendors/react-jsx-runtime.min.js' ],
},
// Polyfills
{
Expand Down
13 changes: 8 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,6 @@
"moment": "2.30.1",
"objectFitPolyfill": "2.3.5",
"polyfill-library": "4.8.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-is": "18.3.1",
"regenerator-runtime": "0.14.1",
"underscore": "1.13.8",
"whatwg-fetch": "3.6.20",
Expand Down
7 changes: 4 additions & 3 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
24 changes: 3 additions & 21 deletions tests/phpunit/tests/dependencies/scripts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4160,21 +4160,6 @@ public function test_vendor_script_versions_registered_manually( $script, $handl
$handle = $script;
}

/*
* Append '.1' to the version number for React and ReactDOM.
*
* This is due to a change in the build to use 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.
*
* See https://core.trac.wordpress.org/ticket/62422
*/
if ( in_array( $handle, array( 'react', 'react-dom' ), true ) ) {
$package_json[ $script ] .= '.1';
}

$script_query = $wp_scripts->query( $handle, 'registered' );

$this->assertNotFalse( $script_query, "The script '{$handle}' should be registered." );
Expand Down Expand Up @@ -4210,9 +4195,6 @@ public function data_vendor_script_versions_registered_manually() {
'objectFitPolyfill' => array( 'objectFitPolyfill', 'wp-polyfill-object-fit' ),
'polyfill-library (dom rect)' => array( 'polyfill-library', 'wp-polyfill-dom-rect' ),
'polyfill-library (node contains)' => array( 'polyfill-library', 'wp-polyfill-node-contains' ),
'react (jsx-runtime)' => array( 'react', 'react-jsx-runtime' ),
'react (React)' => array( 'react' ),
'react-dom' => array( 'react-dom' ),
'regenerator-runtime' => array( 'regenerator-runtime' ),
'underscore' => array( 'underscore' ),
'vanilla-js-hoverintent' => array( 'hoverintent', 'hoverintent-js' ),
Expand Down Expand Up @@ -4254,14 +4236,14 @@ static function ( $dependency ) {
);

// Exclude packages that are not registered in WordPress.
$exclude = array( 'react-is', 'json2php', 'espree' );
$exclude = array( 'json2php', 'espree' );
$package_json_dependencies = array_diff( $package_json_dependencies, $exclude );

/*
* Ensure the arrays are unique.
*
* This is for the react package as it is included in the data provider
* as both `react` and `react-jsx-runtime`.
* Some packages are included in the data provider more than once, e.g.
* `polyfill-library` provides both the DOM rect and node contains scripts.
*/
$package_json_dependencies = array_unique( $package_json_dependencies );
$data_provider_dependencies = array_unique( $data_provider_dependencies );
Expand Down
91 changes: 28 additions & 63 deletions tools/gutenberg/copy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,8 @@ const wpIncludesDir = path.join( rootDir, 'src', 'wp-includes' );
*
* @typedef ScriptsConfig
* @type {object}
* @property {string} source - Gutenberg-relative source directory (e.g. `'scripts'`).
* @property {string} destination - Subpath under `wp-includes/` where packages land (e.g. `'js/dist'`).
* @property {boolean} copyDirectories - Whether to copy whole directories (with optional renames) as-is.
* @property {Record<string, string>} directoryRenames - Map of source directory name → destination directory name.
* @property {string} source - Gutenberg-relative source directory (e.g. `'scripts'`).
* @property {string} destination - Subpath under `wp-includes/` where packages land (e.g. `'js/dist'`).
*/

/**
Expand Down Expand Up @@ -69,11 +67,6 @@ const COPY_CONFIG = {
scripts: {
source: 'scripts',
destination: 'js/dist',
copyDirectories: true,
// Rename vendors/ to vendor/ when copying.
directoryRenames: {
vendors: 'vendor',
},

@jsnajdr jsnajdr Jul 16, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

These params were used only by the vendors copy task, and that has been moved to Gruntfile now.

},

/*
Expand Down Expand Up @@ -175,63 +168,35 @@ function copyScripts( config ) {
const src = path.join( scriptsSrc, entry.name );

if ( entry.isDirectory() ) {
// Check if this should be copied as a directory (like vendors/).
if (
config.copyDirectories &&
config.directoryRenames &&
config.directoryRenames[ entry.name ]
) {
/*
* 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 = 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.
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' )
) {
const srcFile = path.join( src, file );
const destFile = path.join( dest, file );

fs.copyFileSync( srcFile, destFile );
copiedCount++;
}
}
console.log(
` ✅ ${ entry.name }/ → ${ destName }/ (react-jsx-runtime only, ${ copiedCount } files)`
/*
* The vendors/ directory (react, react-dom, react-jsx-runtime) is
* copied by the copy:vendor-js Grunt task, not here.
*/
if ( entry.name === 'vendors' ) {
continue;
}

/*
* Flatten package structure: package-name/index.js → package-name.js.
* This matches Core's expected file structure.
*/
const packageFiles = fs.readdirSync( src );

for ( const file of packageFiles ) {
if ( /^index\.(js|min\.js)$/.test( file ) ) {
const srcFile = path.join( src, file );
// Replace 'index.' with 'package-name.'.
const destFile = file.replace(
/^index\./,
`${ entry.name }.`
);
}
} else {
/*
* Flatten package structure: package-name/index.js → package-name.js.
* This matches Core's expected file structure.
*/
const packageFiles = fs.readdirSync( src );

for ( const file of packageFiles ) {
if ( /^index\.(js|min\.js)$/.test( file ) ) {
const srcFile = path.join( src, file );
// Replace 'index.' with 'package-name.'.
const destFile = file.replace(
/^index\./,
`${ entry.name }.`
);
const destPath = path.join( scriptsDest, destFile );
const destPath = path.join( scriptsDest, destFile );

fs.mkdirSync( path.dirname( destPath ), {
recursive: true,
} );
fs.mkdirSync( path.dirname( destPath ), {
recursive: true,
} );

fs.copyFileSync( srcFile, destPath );
}
fs.copyFileSync( srcFile, destPath );
}
}
} else if ( entry.isFile() && entry.name.endsWith( '.js' ) ) {
Expand Down
Loading