Scripts: Enable React Fast Refresh for block development (#28273)

* Scripts: Enable React Fast Refresh for block development * Externalize React Refresh to make it work without Dev Tools
BreadGuy007 · Dec 14, 2021 · bcc8ec7 · bcc8ec7
1 parent 649b493
commit bcc8ec7
Show file tree

Hide file tree

Showing 11 changed files with 1,571 additions and 416 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -208,7 +208,8 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		$scripts,
 		'react',
 		'https://unpkg.com/[email protected]/umd/react' . $react_suffix . '.js',
-		array( 'wp-polyfill' )
+		// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
+		SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' )
 	);
 	gutenberg_register_vendor_script(
 		$scripts,
@@ -484,24 +485,6 @@ function gutenberg_register_packages_styles( $styles ) {
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 
-/**
- * Registers common scripts and styles to be used as dependencies of the editor
- * and plugins.
- *
- * @since 0.1.0
- */
-function gutenberg_enqueue_block_editor_assets() {
-	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
-		$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
-
-		wp_enqueue_script(
-			'gutenberg-live-reload',
-			$live_reload_url
-		);
-	}
-}
-add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_block_editor_assets' );
-
 /**
  * Retrieves a unique and reasonably short and human-friendly filename for a
  * vendor script based on a URL and the script handle.