Build/Test Tools: Restore React Refresh scripts for hot reloading.

youknowriad · youknowriad · commit e34ed7cb9898 · 2026-01-15T12:55:21.000Z
Restores the `wp_register_development_scripts()` function and associated build infrastructure to enable hot module replacement (HMR) when using `@wordpress/scripts` with the `--hot` flag. The React Refresh scripts were removed in [61438] as part of the Gutenberg build restructuring, but they are still needed for plugin developers using `wp-scripts start --hot` for block development. Props jsnajdr, wildworks, manzoorwanijk. See #64393. git-svn-id: https://develop.svn.wordpress.org/trunk@61487 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
 	],
 	"devDependencies": {
 		"@lodder/grunt-postcss": "^3.1.1",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
 		"@playwright/test": "1.56.1",
 		"@wordpress/e2e-test-utils-playwright": "1.33.2",
 		"@wordpress/prettier-config": "4.33.1",
@@ -61,6 +62,7 @@
 		"postcss": "8.5.6",
 		"prettier": "npm:wp-prettier@3.0.3",
 		"qunit": "~2.24.2",
+		"react-refresh": "0.14.0",
 		"sass": "1.94.0",
 		"sinon": "16.1.3",
 		"sinon-test": "~3.1.6",
diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
@@ -6479,17 +6479,3 @@ function wp_print_auto_sizes_contain_css_fix() {
 	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
 	<?php
 }
-
-/**
- * Registers development scripts that integrate with `@wordpress/scripts`.
- *
- * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start
- *
- * @since 6.0.0
- * @deprecated 7.0.0 Obsolete due to a change in how Gutenberg is included in Core. See #64393.
- *
- * @param WP_Scripts $scripts WP_Scripts object.
- */
-function wp_register_development_scripts( $scripts ) {
-	_deprecated_function( __FUNCTION__, '7.0.0' );
-}
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
@@ -165,6 +165,50 @@ function wp_default_packages_vendor( $scripts ) {
 	);
 }
 
+/**
+ * Registers development scripts that integrate with `@wordpress/scripts`.
+ *
+ * These scripts enable hot module replacement (HMR) for block development
+ * when using `wp-scripts start --hot`.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start
+ *
+ * @since 6.0.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts object.
+ */
+function wp_register_development_scripts( $scripts ) {
+	if (
+		! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG
+		|| empty( $scripts->registered['react'] )
+		|| defined( 'WP_RUN_CORE_TESTS' )
+	) {
+		return;
+	}
+
+	// React Refresh runtime - exposes ReactRefreshRuntime global.
+	// No dependencies.
+	$scripts->add(
+		'wp-react-refresh-runtime',
+		'/wp-includes/js/dist/development/react-refresh-runtime.js',
+		array(),
+		'0.14.0'
+	);
+
+	// React Refresh entry - injects runtime into global hook.
+	// Must load before React to set up hooks.
+	$scripts->add(
+		'wp-react-refresh-entry',
+		'/wp-includes/js/dist/development/react-refresh-entry.js',
+		array( 'wp-react-refresh-runtime' ),
+		'0.14.0'
+	);
+
+	// Add entry as a dependency of React so it loads first.
+	// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
+	$scripts->registered['react']->deps[] = 'wp-react-refresh-entry';
+}
+
 /**
  * Returns contents of an inline script used in appending polyfill scripts for
  * browsers which fail the provided tests. The provided array is a mapping from
@@ -618,6 +662,7 @@ function wp_tinymce_inline_scripts() {
  */
 function wp_default_packages( $scripts ) {
 	wp_default_packages_vendor( $scripts );
+	wp_register_development_scripts( $scripts );
 	wp_register_tinymce_scripts( $scripts );
 	wp_default_packages_scripts( $scripts );
 
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,5 @@
 const mediaConfig = require( './tools/webpack/media' );
+const developmentConfig = require( './tools/webpack/development' );
 
 module.exports = function (
 	env = { environment: 'production', watch: false, buildTarget: false }
@@ -11,10 +12,13 @@ module.exports = function (
 		env.buildTarget = env.mode === 'production' ? 'build/' : 'src/';
 	}
 
-	// Only building Core-specific media files.
+	// Only building Core-specific media files and development scripts.
 	// Blocks, packages, script modules, and vendors are now sourced from
 	// the Gutenberg build (see tools/gutenberg/copy-gutenberg-build.js).
-	const config = [ mediaConfig( env ) ];
+	const config = [
+		mediaConfig( env ),
+		developmentConfig( env ),
+	];
 
 	return config;
 };
