Include blocks manifest build process in Webpack config to fix create-block bug with missing blocks manifest file

packages/create-block/lib/init-package-json.js

@@ -45,8 +45,7 @@ module.exports = async ( {
 						build:
 							( isDynamicVariant
 								? 'wp-scripts build --webpack-copy-php'
-								: 'wp-scripts build' ) +
-							' && wp-scripts build-blocks-manifest',
+								: 'wp-scripts build' ) + ' --blocks-manifest',
 						format: 'wp-scripts format',
 						'lint:css': 'wp-scripts lint-style',
 						'lint:js': 'wp-scripts lint-js',
@@ -55,8 +54,7 @@ module.exports = async ( {
 						start:
 							( isDynamicVariant
 								? 'wp-scripts start --webpack-copy-php'
-								: 'wp-scripts start' ) +
-							' && wp-scripts build-blocks-manifest',
+								: 'wp-scripts start' ) + ' --blocks-manifest',
 					} ),
 					...( wpEnv && { env: 'wp-env' } ),
 					...customScripts,

packages/scripts/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add `--blocks-manifest` CLI flag to generate a PHP file containing block metadata from all `block.json` files in the project ([#79321](https://github.com/WordPress/gutenberg/pull/79321)).
+
 ## 30.13.0 (2025-03-13)
 
 ## 30.12.0 (2025-02-28)

packages/scripts/README.md

@@ -89,6 +89,7 @@ This script automatically use the optimized config but sometimes you may want to
 -   `--webpack-bundle-analyzer` – enables visualization for the size of webpack output files with an interactive zoomable treemap.
 -   `--webpack-copy-php` – enables copying all PHP files from the source directory ( default is `src` ) and its subfolders to the output directory.
 -   `--webpack-no-externals` – disables scripts’ assets generation, and omits the list of default externals.
+-   `--blocks-manifest` – generates a PHP file containing block metadata from all `block.json` files in the project. This is useful for enhancing performance when registering multiple block types, as it allows you to use `wp_register_block_metadata_collection()` and `wp_register_block_types_from_metadata_collection()` in WordPress.
 -   `--source-path` – allows customization of the source directory. The default is the project root `.` when [entry points are listed](#listing-entry-points) in the command, or `src` otherwise.
 -   `--output-path` – allows customization of the output directory. The default is the `build` folder.
 
@@ -105,11 +106,7 @@ This script uses [webpack](https://webpack.js.org/) behind the scenes. It’ll l
 
 ### `build-blocks-manifest`
 
-This script generates a PHP file containing block metadata from all
-`block.json` files in the project. This is useful for enhancing performance
-when registering multiple block types, as it allows you to use
-`wp_register_block_metadata_collection()` and
-`wp_register_block_types_from_metadata_collection()` in WordPress.
+This script generates a PHP file containing block metadata from all `block.json` files in the project. This is useful for enhancing performance when registering multiple block types, as it allows you to use `wp_register_block_metadata_collection()` and `wp_register_block_types_from_metadata_collection()` in WordPress.
 
 Usage: `wp-scripts build-blocks-manifest [options]`
 
@@ -426,6 +423,7 @@ This script automatically use the optimized config but sometimes you may want to
 -   `--webpack-copy-php` – enables copying all PHP files from the source directory ( default is `src` ) and its subfolders to the output directory.
 -   `--webpack-devtool` – controls how source maps are generated. See options at https://webpack.js.org/configuration/devtool/#devtool.
 -   `--webpack-no-externals` – disables scripts’ assets generation, and omits the list of default externals.
+-   `--blocks-manifest` – generates a PHP file containing block metadata from all `block.json` files in the project. This is useful for enhancing performance when registering multiple block types, as it allows you to use `wp_register_block_metadata_collection()` and `wp_register_block_types_from_metadata_collection()` in WordPress.
 -   `--source-path` – allows customization of the source directory. The default is the project root `.` when [entry points are listed](#listing-entry-points) in the command, or `src` otherwise.
 -   `--output-path` – allows customization of the output directory. The default is the `build` folder.
 

packages/scripts/config/webpack.config.js

@@ -12,6 +12,7 @@ const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
+const { exec } = require( 'child_process' );
 
 /**
  * WordPress dependencies
@@ -36,6 +37,7 @@ const {
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 	fromProjectRoot,
+	fromScriptsRoot,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -45,6 +47,7 @@ if ( ! browserslist.findConfig( '.' ) ) {
 	target += ':' + fromConfigRoot( '.browserslistrc' );
 }
 const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction;
+const hasBlocksManifest = getAsBooleanFromENV( 'WP_BLOCKS_MANIFEST' );
 const hasExperimentalModulesFlag = getAsBooleanFromENV(
 	'WP_EXPERIMENTAL_MODULES'
 );
@@ -260,6 +263,26 @@ if ( baseConfig.devtool ) {
 	} );
 }
 
+/**
+ * Build blocks manifest.
+ */
+class BlocksManifestPlugin {
+	/**
+	 * Apply the plugin.
+	 *
+	 * @param {webpack.Compiler} compiler The compiler instance.
+	 */
+	apply( compiler ) {
+		compiler.hooks.afterEmit.tap( 'BlocksManifest', () => {
+			exec(
+				`node ${ fromScriptsRoot(
+					'build-blocks-manifest'
+				) } --input="${ compiler.options.output.path }"`
+			);
+		} );
+	}
+}
+
 /** @type {webpack.Configuration} */
 const scriptConfig = {
 	...baseConfig,
@@ -397,6 +420,8 @@ const scriptConfig = {
 		} ),
 		// RtlCssPlugin to generate RTL CSS files.
 		new RtlCssPlugin(),
+		// Generate blocks manifest after changes.
+		hasBlocksManifest && new BlocksManifestPlugin(),
 		// React Fast Refresh.
 		hasReactFastRefresh && new ReactRefreshWebpackPlugin(),
 		// WP_NO_EXTERNALS global variable controls whether scripts' assets get

packages/scripts/scripts/build-blocks-manifest.js

@@ -12,19 +12,17 @@ const chalk = require( 'chalk' );
  */
 const { getArgFromCLI } = require( '../utils' );
 
-// Set default paths
+// Parses command line arguments.
 const defaultInputDir = 'build';
-const defaultOutputFile = path.join( 'build', 'blocks-manifest.php' );
-
-// Parse command line arguments
 const inputDir = getArgFromCLI( '--input' ) || defaultInputDir;
+const defaultOutputFile = path.join( inputDir, 'blocks-manifest.php' );
 const outputFile = getArgFromCLI( '--output' ) || defaultOutputFile;
 
 const resolvedInputDir = path.resolve( process.cwd(), inputDir );
 if ( ! fs.existsSync( resolvedInputDir ) ) {
 	const ERROR = chalk.reset.inverse.bold.red( ' ERROR ' );
 	process.stdout.write(
-		`${ ERROR } Input directory "${ inputDir }" does not exist.\n`
+		`${ ERROR } Input directory "${ resolvedInputDir }" does not exist.\n`
 	);
 	process.exit( 1 );
 }

packages/scripts/utils/config.js

@@ -114,6 +114,7 @@ const hasPostCSSConfig = () =>
 const getWebpackArgs = () => {
 	// Gets all args from CLI without those prefixed with `--webpack`.
 	let webpackArgs = getArgsFromCLI( [
+		'--blocks-manifest',
 		'--experimental-modules',
 		'--source-path',
 		'--webpack',
@@ -146,6 +147,10 @@ const getWebpackArgs = () => {
 		process.env.WP_NO_EXTERNALS = true;
 	}
 
+	if ( hasArgInCLI( '--blocks-manifest' ) ) {
+		process.env.WP_BLOCKS_MANIFEST = true;
+	}
+
 	const hasWebpackOutputOption =
 		hasArgInCLI( '-o' ) || hasArgInCLI( '--output' );
 	if (

packages/scripts/utils/index.js

@@ -23,16 +23,22 @@ const {
 	hasPostCSSConfig,
 	hasPrettierConfig,
 } = require( './config' );
-const { fromProjectRoot, fromConfigRoot, hasProjectFile } = require( './file' );
+const {
+	fromConfigRoot,
+	fromProjectRoot,
+	fromScriptsRoot,
+	hasProjectFile,
+} = require( './file' );
 const { getPackageProp, hasPackageProp } = require( './package' );
 const {
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 } = require( './block-json' );
 
 module.exports = {
-	fromProjectRoot,
 	fromConfigRoot,
+	fromProjectRoot,
+	fromScriptsRoot,
 	getAsBooleanFromENV,
 	getArgFromCLI,
 	getArgsFromCLI,