Scripts: Include variations paths in build (WordPress#63098)

If a `block.json`'s `variations` field is set to a (PHP) file name, include that file in the build, i.e. prefix its functions with `gutenberg_` and copy the resulting file to the `build/block-library/blocks/` directory.

Note that this applies to third-party blocks, but not Core blocks. Making it work for Core blocks is a separate issue: WordPress#63077.

Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>

packages/scripts/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Update webpack configuration for the `build` and `start` commands to automatically copy PHP files listed in the `variations` field of `block.json` files from the source to the build folder ([#63098](https://github.com/WordPress/gutenberg/pull/63098)).
+
 ## 28.3.0 (2024-07-10)
 
 ## 28.2.0 (2024-06-26)

packages/scripts/README.md

@@ -97,7 +97,7 @@ This is how you execute the script with presented setup:
 
 -   `npm run build` - builds the code for production.
 -   `npm run build:custom` - builds the code for production with two entry points and a custom output directory. Paths for custom entry points are relative to the project root.
--   `npm run build:copy-php` - builds the code for production and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` field in the detected `block.json` files get copied.
+-   `npm run build:copy-php` - builds the code for production and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` and `variations` fields in the detected `block.json` files get copied.
 -   `npm run build:custom-directory` - builds the code for production using the `custom-directory` as the source code directory.
 
 This script automatically use the optimized config but sometimes you may want to specify some custom options:
@@ -382,7 +382,7 @@ This is how you execute the script with presented setup:
 -   `npm start` - starts the build for development.
 -   `npm run start:hot` - starts the build for development with "Fast Refresh". The page will automatically reload if you make changes to the files.
 -   `npm run start:custom` - starts the build for development which contains two entry points and a custom output directory. Paths for custom entry points are relative to the project root.
--   `npm run start:copy-php` - starts the build for development and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` field in the detected `block.json` files get copied.
+-   `npm run start:copy-php` - starts the build for development and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` and `variations` fields in the detected `block.json` files get copied.
 -   `npm run start:custom-directory` - builds the code for production using the `custom-directory` as the source code directory.
 
 This script automatically use the optimized config but sometimes you may want to specify some custom options:

packages/scripts/config/webpack.config.js

@@ -13,6 +13,7 @@ const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
+const { validate } = require( 'schema-utils' );
 
 /**
  * WordPress dependencies
@@ -31,7 +32,7 @@ const {
 	hasPostCSSConfig,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getPhpFilePaths,
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
@@ -49,24 +50,45 @@ const hasExperimentalModulesFlag = getAsBooleanFromENV(
 	'WP_EXPERIMENTAL_MODULES'
 );
 
+const phpFilePathsPluginSchema = {
+	type: 'object',
+	properties: {
+		props: {
+			type: 'array',
+			items: {
+				type: 'string',
+			},
+		},
+	},
+};
+
 /**
- * The plugin recomputes the render paths once on each compilation. It is necessary to avoid repeating processing
+ * The plugin recomputes PHP file 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 {
+class PhpFilePathsPlugin {
 	/**
-	 * Paths with the `render` props included in `block.json` files.
+	 * PHP file paths from `render` and `variations` props found in `block.json` files.
 	 *
 	 * @type {string[]}
 	 */
-	static renderPaths;
+	static paths;
+
+	constructor( options = {} ) {
+		validate( phpFilePathsPluginSchema, options, {
+			name: 'PHP File Paths Plugin',
+			baseDataPath: 'options',
+		} );
+
+		this.options = options;
+	}
 
 	apply( compiler ) {
 		const pluginName = this.constructor.name;
 
 		compiler.hooks.thisCompilation.tap( pluginName, () => {
-			this.constructor.renderPaths = getRenderPropPaths();
+			this.constructor.paths = getPhpFilePaths( this.options.props );
 		} );
 	}
 }
@@ -321,7 +343,7 @@ const scriptConfig = {
 				cleanStaleWebpackAssets: false,
 			} ),
 
-		new RenderPathsPlugin(),
+		new PhpFilePathsPlugin( { props: [ 'render', 'variations' ] } ),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
@@ -371,7 +393,7 @@ const scriptConfig = {
 					filter: ( filepath ) => {
 						return (
 							process.env.WP_COPY_PHP_FILES_TO_DIST ||
-							RenderPathsPlugin.renderPaths.includes(
+							PhpFilePathsPlugin.paths.includes(
 								realpathSync( filepath ).replace( /\\/g, '/' )
 							)
 						);

packages/scripts/package.json

@@ -82,6 +82,7 @@
 		"rtlcss-webpack-plugin": "^4.0.7",
 		"sass": "^1.35.2",
 		"sass-loader": "^12.1.0",
+		"schema-utils": "^4.2.0",
 		"source-map-loader": "^3.0.0",
 		"stylelint": "^14.2.0",
 		"terser-webpack-plugin": "^5.3.9",