Skip to content

WIP Use package.json React version for vendor script cache busting #76798

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

Closed
ramonjd wants to merge 3 commits into from
Closed

WIP Use package.json React version for vendor script cache busting #76798

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
1e52c59
Use package.json React version for vendor script cache busting
ramonjd Mar 25, 2026
e06243b
revert changelog
ramonjd Mar 25, 2026
aeb7c05
fallback to latest
ramonjd Mar 25, 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
9 changes: 6 additions & 3 deletions lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,29 +369,32 @@ function gutenberg_enqueue_stored_styles( $options = array() ) {
function gutenberg_register_vendor_scripts( $scripts ) {
$extension = SCRIPT_DEBUG ? '.js' : '.min.js';

// Bust browser caches when the bundled React version changes (see build/constants.php, generated from package.json).
$react_vendor_version = defined( 'GUTENBERG_REACT_VENDOR_VERSION' ) ? GUTENBERG_REACT_VENDOR_VERSION : '18.3.1';

gutenberg_override_script(
$scripts,
'react',
gutenberg_url( 'build/scripts/vendors/react' . $extension ),
// WordPress Core in `wp_register_development_scripts` sets `wp-react-refresh-entry` as a dependency to `react` when `SCRIPT_DEBUG` is true.
// We need to preserve that here.
SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' ),
'18'
$react_vendor_version
);
gutenberg_override_script(
$scripts,
'react-dom',
gutenberg_url( 'build/scripts/vendors/react-dom' . $extension ),
array( 'react' ),
'18'
$react_vendor_version
Copy link
Copy Markdown
Member Author

@ramonjd ramonjd Mar 25, 2026

Choose a reason for hiding this comment

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

Following from #46768

);

gutenberg_override_script(
$scripts,
'react-jsx-runtime',
gutenberg_url( 'build/scripts/vendors/react-jsx-runtime' . $extension ),
array( 'react' ),
'18'
$react_vendor_version
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Mar 25, 2026

Choose a reason for hiding this comment

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

Using the react version here is good but I'm not a fan of the wp-build changes. I'll comment there.

Copy link
Copy Markdown
Member

@jsnajdr jsnajdr Mar 25, 2026

Choose a reason for hiding this comment

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

A good approach how to extract and use the React version is to generate .asset.php files in the buildVendors function that runs as part of the wp-build build. The version can be extracted during the build, and then this client-asset.php code will just read the .asset.php file and use what's there. That's what most other Gutenberg scripts are doing.

The version can be extracted from the package.json file corresponding to each name in the VENDOR_SCRIPTS array. Also, both react and react-dom export a version string as a named export, that's another way how JS code can detect the version.

The root package.json also works, but doesn't need to be 100% reliable. The might be a semver spec there, like ^18.0.0.

);
}
add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
Expand Down
4 changes: 4 additions & 0 deletions lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
if ( file_exists( $constants_file ) && ! defined( 'GUTENBERG_VERSION' ) ) {
$build_constants = require_once $constants_file;
define( 'GUTENBERG_VERSION', $build_constants['version'] );
$react_vendor_version = $build_constants['react_version'] ?? '';
if ( $react_vendor_version && ! defined( 'GUTENBERG_REACT_VENDOR_VERSION' ) ) {
define( 'GUTENBERG_REACT_VENDOR_VERSION', $react_vendor_version );
}
}

/**
Expand Down
9 changes: 8 additions & 1 deletion packages/wp-build/lib/php-generator.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const __dirname = path.dirname( fileURLToPath( import.meta.url ) );
*
* @param {string} rootDir Root directory path.
* @param {string} baseUrlExpression PHP expression for base URL (e.g. "includes_url( 'build' )").
* @return {Promise<Record<string, string>>} Replacements object with {{PREFIX}}, {{VERSION}}, {{BASE_URL}}.
* @return {Promise<Record<string, string>>} Replacements object with {{PREFIX}}, {{VERSION}}, {{BASE_URL}}, {{REACT_VERSION}}.
*/
export async function getPhpReplacements( rootDir, baseUrlExpression ) {
const rootPackageJson = getPackageInfoFromFile(
Expand All @@ -31,10 +31,17 @@ export async function getPhpReplacements( rootDir, baseUrlExpression ) {
const name = rootPackageJson.wpPlugin?.name || 'gutenberg';
const version = rootPackageJson.version;

// Used to cache-bust vendor React bundles when the React pin changes independently of WordPress.
const reactVersion =
rootPackageJson.devDependencies?.react ??
rootPackageJson.dependencies?.react ??
'';

return {
'{{PREFIX}}': name,
'{{VERSION}}': version,
'{{BASE_URL}}': baseUrlExpression,
'{{REACT_VERSION}}': reactVersion,
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Mar 25, 2026

Choose a reason for hiding this comment

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

WP build is a generic tool, so we shouldn't add random variables like that IMO.

};
}

Expand Down
1 change: 1 addition & 0 deletions packages/wp-build/templates/constants.php.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@
return array(
'version' => '{{VERSION}}',
'build_url' => {{BASE_URL}},
'react_version' => '{{REACT_VERSION}}',
);
Loading