Build: Include Core blocks' render and variations files (#63311)

If a Core block's `block.json` contains a `render` and/or `variations` field that points to a PHP file name, copy those files to the build directory. Co-authored-by: ockham <bernhard-reiter@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org>
WordPress · Sep 10, 2024 · cc133bf · cc133bf
1 parent aca9273
commit cc133bf
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 60 deletions.
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
@@ -13,7 +13,6 @@ 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
@@ -32,11 +31,11 @@ const {
 	hasPostCSSConfig,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getPhpFilePaths,
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 	fromProjectRoot,
+	PhpFilePathsPlugin,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -50,49 +49,6 @@ const hasExperimentalModulesFlag = getAsBooleanFromENV(
 	'WP_EXPERIMENTAL_MODULES'
 );
 
-const phpFilePathsPluginSchema = {
-	type: 'object',
-	properties: {
-		props: {
-			type: 'array',
-			items: {
-				type: 'string',
-			},
-		},
-	},
-};
-
-/**
- * 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 PhpFilePathsPlugin {
-	/**
-	 * PHP file paths from `render` and `variations` props found in `block.json` files.
-	 *
-	 * @type {string[]}
-	 */
-	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.paths = getPhpFilePaths( this.options.props );
-		} );
-	}
-}
-
 const cssLoaders = [
 	{
 		loader: MiniCSSExtractPlugin.loader,
@@ -345,7 +301,10 @@ const scriptConfig = {
 				cleanStaleWebpackAssets: false,
 			} ),
 
-		new PhpFilePathsPlugin( { props: [ 'render', 'variations' ] } ),
+		new PhpFilePathsPlugin( {
+			context: getWordPressSrcDirectory(),
+			props: [ 'render', 'variations' ],
+		} ),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{

diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js
@@ -351,22 +351,23 @@ function getWebpackEntryPoints( buildType ) {
 /**
  * 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.
+ * @param {string}   context The path to search for `block.json` files.
+ * @param {string[]} props   The props to search for in the `block.json` files.
  * @return {string[]} The list of PHP file paths.
  */
-function getPhpFilePaths( props ) {
+function getPhpFilePaths( context, props ) {
 	// Continue only if the source directory exists.
-	if ( ! hasProjectFile( getWordPressSrcDirectory() ) ) {
+	if ( ! hasProjectFile( context ) ) {
 		return [];
 	}
 
 	// Checks whether any block metadata files can be detected in the defined source directory.
 	const blockMetadataFiles = glob( '**/block.json', {
 		absolute: true,
-		cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+		cwd: fromProjectRoot( context ),
 	} );
 
-	const srcDirectory = fromProjectRoot( getWordPressSrcDirectory() + sep );
+	const srcDirectory = fromProjectRoot( context + sep );
 
 	return blockMetadataFiles.flatMap( ( blockMetadataFile ) => {
 		const blockJson = JSON.parse( readFileSync( blockMetadataFile ) );
@@ -396,7 +397,7 @@ function getPhpFilePaths( props ) {
 						) }" listed in "${ blockMetadataFile.replace(
 							fromProjectRoot( sep ),
 							''
-						) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
+						) }". File is located outside of the "${ context }" directory.`
 					)
 				);
 				continue;

diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js
@@ -29,6 +29,7 @@ const {
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 } = require( './block-json' );
+const { PhpFilePathsPlugin } = require( './php-file-paths-plugin' );
 
 module.exports = {
 	fromProjectRoot,
@@ -55,5 +56,6 @@ module.exports = {
 	hasPostCSSConfig,
 	hasPrettierConfig,
 	hasProjectFile,
+	PhpFilePathsPlugin,
 	spawnScript,
 };
diff --git a/packages/scripts/utils/php-file-paths-plugin.js b/packages/scripts/utils/php-file-paths-plugin.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+const { validate } = require( 'schema-utils' );
+
+/**
+ * Internal dependencies
+ */
+const { getPhpFilePaths } = require( './config' );
+
+const phpFilePathsPluginSchema = {
+	type: 'object',
+	properties: {
+		context: {
+			type: 'string',
+		},
+		props: {
+			type: 'array',
+			items: {
+				type: 'string',
+			},
+		},
+	},
+};
+
+/**
+ * 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 PhpFilePathsPlugin {
+	/**
+	 * PHP file paths from `render` and `variations` props found in `block.json` files.
+	 *
+	 * @type {string[]}
+	 */
+	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.paths = getPhpFilePaths(
+				this.options.context,
+				this.options.props
+			);
+		} );
+	}
+}
+
+module.exports = { PhpFilePathsPlugin };
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
@@ -4,11 +4,13 @@
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const { join, sep } = require( 'path' );
 const fastGlob = require( 'fast-glob' );
+const { realpathSync } = require( 'fs' );
 
 /**
  * WordPress dependencies
  */
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' );
 
 /**
  * Internal dependencies
@@ -90,6 +92,10 @@ module.exports = [
 		plugins: [
 			...plugins,
 			new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
+			new PhpFilePathsPlugin( {
+				context: './packages/block-library/src/',
+				props: [ 'render', 'variations' ],
+			} ),
 			new CopyWebpackPlugin( {
 				patterns: [].concat(
 					[
@@ -127,17 +133,32 @@ module.exports = [
 							'build/widgets/blocks/',
 					} ).flatMap( ( [ from, to ] ) => [
 						{
-							from: `${ from }/**/index.php`,
+							from: `${ from }/**/*.php`,
 							to( { absoluteFilename } ) {
-								const [ , dirname ] = absoluteFilename.match(
-									new RegExp(
-										`([\\w-]+)${ escapeRegExp(
-											sep
-										) }index\\.php$`
+								const [ , dirname, basename ] =
+									absoluteFilename.match(
+										new RegExp(
+											`([\\w-]+)${ escapeRegExp(
+												sep
+											) }([\\w-]+)\\.php$`
+										)
+									);
+
+								if ( basename === 'index' ) {
+									return join( to, `${ dirname }.php` );
+								}
+								return join( to, dirname, `${ basename }.php` );
+							},
+							filter: ( filepath ) => {
+								return (
+									filepath.endsWith( sep + 'index.php' ) ||
+									PhpFilePathsPlugin.paths.includes(
+										realpathSync( filepath ).replace(
+											/\\/g,
+											'/'
+										)
 									)
 								);
-
-								return join( to, `${ dirname }.php` );
 							},
 							transform: ( content ) => {
 								const prefix = 'gutenberg_';