Scripts: Include variations paths in build

packages/scripts/config/webpack.config.js

@@ -31,7 +31,7 @@ const {
 	hasPostCSSConfig,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getPhpFilePaths,
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
@@ -50,23 +50,26 @@ const hasExperimentalModulesFlag = getAsBooleanFromENV(
 );
 
 /**
- * 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;
 
 	apply( compiler ) {
 		const pluginName = this.constructor.name;
 
 		compiler.hooks.thisCompilation.tap( pluginName, () => {
-			this.constructor.renderPaths = getRenderPropPaths();
+			this.constructor.paths = getPhpFilePaths( [
+				'render',
+				'variations',
+			] );
 		} );
 	}
 }
@@ -321,7 +324,7 @@ const scriptConfig = {
 				cleanStaleWebpackAssets: false,
 			} ),
 
-		new RenderPathsPlugin(),
+		new PhpFilePathsPlugin(),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
@@ -371,7 +374,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/utils/config.js

@@ -354,6 +354,16 @@ function getWebpackEntryPoints( buildType ) {
  * @return {Array}  The list of all the `render` prop paths included in `block.json` files.
  */
 function getRenderPropPaths() {
+	return getPhpFilePaths( [ 'render' ] );
+}
+
+/**
+ * Returns the list of PHP file paths found in `block.json` files for the given props.
+ *
+ * @param {string[]} props The props to search for in the `block.json` files.
+ * @return {string[]} The list of PHP file paths.
+ */
+function getPhpFilePaths( props ) {
 	// Continue only if the source directory exists.
 	if ( ! hasProjectFile( getWordPressSrcDirectory() ) ) {
 		return [];
@@ -367,20 +377,29 @@ function getRenderPropPaths() {
 
 	const srcDirectory = fromProjectRoot( getWordPressSrcDirectory() + sep );
 
-	const renderPaths = blockMetadataFiles.map( ( blockMetadataFile ) => {
-		const { render } = JSON.parse( readFileSync( blockMetadataFile ) );
-		if ( render && render.startsWith( 'file:' ) ) {
+	return blockMetadataFiles.flatMap( ( blockMetadataFile ) => {
+		const blockJson = JSON.parse( readFileSync( blockMetadataFile ) );
+
+		const paths = [];
+		for ( const prop of props ) {
+			if (
+				typeof blockJson?.[ prop ] !== 'string' ||
+				! blockJson[ prop ]?.startsWith( 'file:' )
+			) {
+				continue;
+			}
+
 			// Removes the `file:` prefix.
 			const filepath = join(
 				dirname( blockMetadataFile ),
-				render.replace( 'file:', '' )
+				blockJson[ prop ].replace( 'file:', '' )
 			);
 
 			// Takes the path without the file extension, and relative to the defined source directory.
 			if ( ! filepath.startsWith( srcDirectory ) ) {
 				log(
 					chalk.yellow(
-						`Skipping "${ render.replace(
+						`Skipping "${ blockJson[ prop ].replace(
 							'file:',
 							''
 						) }" listed in "${ blockMetadataFile.replace(
@@ -389,21 +408,20 @@ function getRenderPropPaths() {
 						) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
 					)
 				);
-				return false;
+				continue;
 			}
-			return filepath.replace( /\\/g, '/' );
+			paths.push( filepath.replace( /\\/g, '/' ) );
 		}
-		return false;
+		return paths;
 	} );
-
-	return renderPaths.filter( ( renderPath ) => renderPath );
 }
 
 module.exports = {
 	getJestOverrideConfigFile,
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
+	getPhpFilePaths,
 	getRenderPropPaths,
 	hasBabelConfig,
 	hasCssnanoConfig,

packages/scripts/utils/index.js

@@ -16,6 +16,7 @@ const {
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
+	getPhpFilePaths,
 	getRenderPropPaths,
 	hasBabelConfig,
 	hasCssnanoConfig,
@@ -43,6 +44,7 @@ module.exports = {
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
+	getPhpFilePaths,
 	getRenderPropPaths,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,