Scripts: Optimize updating render paths when developing blocks (WordP…

…ress#51162)

* Scripts: Optimize updating render paths when developing blocks

* Add CHANGELOG entry to `@wordpress/scripts`

* Update CHANGELOG.md

packages/scripts/CHANGELOG.md

@@ -5,6 +5,11 @@
 ### Enhancements
 
 -   The bundled `terser-webpack-plugin` dependency has been updated from requiring `^5.1.4` to requiring `^5.3.9` ([#50994](https://github.com/WordPress/gutenberg/pull/50994)).
+-   Optimize updating render paths when developing blocks with the `start` command ([#51162](https://github.com/WordPress/gutenberg/pull/51162)).
+
+### Bug Fixes
+
+-   Ensure files listed in `render` field of `block.json` files are always copied to the build folder when using the `start` command ([#50939](https://github.com/WordPress/gutenberg/pull/50939)).
 
 ## 26.5.0 (2023-05-24)
 

packages/scripts/config/webpack.config.js

@@ -38,8 +38,27 @@ if ( ! browserslist.findConfig( '.' ) ) {
 }
 const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction;
 
-// Get paths of the `render` props included in `block.json` files
-let renderPaths = getRenderPropPaths();
+/**
+ * The plugin recomputes the render paths once on each compilation. It is necessary to avoid repeating processing
+ * when filtering every discovered PHP file in the source folder. This is the most performant way to ensure that
+ * changes in `block.json` files are picked up in watch mode.
+ */
+class RenderPathsPlugin {
+	/**
+	 * Paths with the `render` props included in `block.json` files.
+	 *
+	 * @type {string[]}
+	 */
+	static renderPaths;
+
+	apply( compiler ) {
+		const pluginName = this.constructor.name;
+
+		compiler.hooks.thisCompilation.tap( pluginName, () => {
+			this.constructor.renderPaths = getRenderPropPaths();
+		} );
+	}
+}
 
 const cssLoaders = [
 	{
@@ -234,6 +253,7 @@ const config = {
 			// multiple configurations returned in the webpack config.
 			cleanStaleWebpackAssets: false,
 		} ),
+		new RenderPathsPlugin(),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
@@ -275,10 +295,9 @@ const config = {
 					context: getWordPressSrcDirectory(),
 					noErrorOnMissing: true,
 					filter: ( filepath ) => {
-						renderPaths = getRenderPropPaths();
 						return (
 							process.env.WP_COPY_PHP_FILES_TO_DIST ||
-							renderPaths.includes( filepath )
+							RenderPathsPlugin.renderPaths.includes( filepath )
 						);
 					},
 				},