Scripts: Detect block.json changes from modules build (#57927)

* Add BlockJsonDependenciesPlugin to modules build

Add a plugin that finds block.json files and adds them as
fileDependencies of the module build. This ensures that changes to
block.json files trigger updates to the module build.

See https://webpack.js.org/contribute/plugin-patterns/

> You may also feed new file paths into the watch graph to receive
> compilation triggers when those files change. Add valid file paths
> into the `compilation.fileDependencies` Set to add them to the
> watched files.

packages/scripts/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Add experimental support for `viewScriptModule` field in block.json for `build` and `start` scripts ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).
 
+### Enhancements
+
+-   Ensure that watched module builds detect block.json changes ([#57927](https://github.com/WordPress/gutenberg/pull/57927)).
+
 ### Deprecations
 
 -   Experimental support for `viewModule` field in block.json is deprecated in favor of `viewScriptModule` ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).

packages/scripts/config/webpack.config.js

@@ -11,6 +11,7 @@ const { basename, dirname, resolve } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
+const { sync: glob } = require( 'fast-glob' );
 
 /**
  * WordPress dependencies
@@ -33,6 +34,7 @@ const {
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
+	fromProjectRoot,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -390,6 +392,37 @@ const scriptConfig = {
 };
 
 if ( hasExperimentalModulesFlag ) {
+	/**
+	 * Add block.json files to compilation to ensure changes trigger rebuilds when watching
+	 */
+	class BlockJsonDependenciesPlugin {
+		constructor() {
+			/** @type {ReadonlyArray<string>} */
+			this.blockJsonFiles = glob( '**/block.json', {
+				absolute: true,
+				cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+			} );
+		}
+
+		/**
+		 * Apply the plugin
+		 * @param {webpack.Compiler} compiler the compiler instance
+		 * @return {void}
+		 */
+		apply( compiler ) {
+			if ( this.blockJsonFiles.length ) {
+				compiler.hooks.compilation.tap(
+					'BlockJsonDependenciesPlugin',
+					( compilation ) => {
+						compilation.fileDependencies.addAll(
+							this.blockJsonFiles
+						);
+					}
+				);
+			}
+		}
+	}
+
 	/** @type {webpack.Configuration} */
 	const moduleConfig = {
 		...baseConfig,
@@ -429,6 +462,7 @@ if ( hasExperimentalModulesFlag ) {
 			// generated, and the default externals set.
 			! process.env.WP_NO_EXTERNALS &&
 				new DependencyExtractionWebpackPlugin(),
+			new BlockJsonDependenciesPlugin(),
 		].filter( Boolean ),
 	};