diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index f306fbd54a8a6..b3b8af22b5812 100644 --- a/packages/scripts/config/webpack.config.js +++ b/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, '/' ) ) ); diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 8b1bbb1ca5059..44bcfb916b1f1 100644 --- a/packages/scripts/utils/config.js +++ b/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,14 +408,12 @@ 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 = { @@ -404,6 +421,7 @@ module.exports = { getWebpackArgs, getWordPressSrcDirectory, getWebpackEntryPoints, + getPhpFilePaths, getRenderPropPaths, hasBabelConfig, hasCssnanoConfig, diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js index 148895ecbc4ed..7c2a3d5ea3425 100644 --- a/packages/scripts/utils/index.js +++ b/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,