From 4487adf565319ce3ac43cf768c5c99e49b0c3c2a Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 9 Jul 2024 16:27:46 +0200 Subject: [PATCH 01/11] Build: Include render files --- tools/webpack/blocks.js | 56 +++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 8 deletions(-) diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 36329d39c1212..56067e96d155b 100644 --- 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 { getRenderPropPaths } = require( '@wordpress/scripts/utils' ); /** * Internal dependencies @@ -77,6 +79,28 @@ const createEntrypoints = () => { }, {} ); }; +/** + * The plugin recomputes the render 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 { + /** + * Paths with the `render` props included in `block.json` files. + * + * @type {string[]} + */ + static renderPaths; + + apply( compiler ) { + const pluginName = this.constructor.name; + + compiler.hooks.thisCompilation.tap( pluginName, () => { + this.constructor.renderPaths = getRenderPropPaths(); + } ); + } +} + module.exports = [ { ...baseConfig, @@ -90,6 +114,7 @@ module.exports = [ plugins: [ ...plugins, new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ), + new RenderPathsPlugin(), new CopyWebpackPlugin( { patterns: [].concat( [ @@ -127,17 +152,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' ) || + RenderPathsPlugin.renderPaths.includes( + realpathSync( filepath ).replace( + /\\/g, + '/' + ) ) ); - - return join( to, `${ dirname }.php` ); }, transform: ( content ) => { const prefix = 'gutenberg_'; From 7dee6933a7e4d98c068e861f2474b8f24b2442dc Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 16 Jul 2024 12:46:18 +0200 Subject: [PATCH 02/11] Move PhpFilePathsPlugin to separate file --- packages/scripts/config/webpack.config.js | 46 +--------------- packages/scripts/utils/index.js | 2 + .../scripts/utils/php-file-paths-plugin.js | 54 +++++++++++++++++++ 3 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 packages/scripts/utils/php-file-paths-plugin.js diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 4c60e3859207d..ca27e143e1f4d 100644 --- 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, diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js index dc4008b16197d..cb7e592f83d55 100644 --- 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 new file mode 100644 index 0000000000000..f39d99947d54f --- /dev/null +++ b/packages/scripts/utils/php-file-paths-plugin.js @@ -0,0 +1,54 @@ +/** + * External dependencies + */ +const { validate } = require( 'schema-utils' ); + +/** + * Internal dependencies + */ +const { getPhpFilePaths } = require( '../utils' ); + +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 ); + } ); + } +} + +module.exports = { PhpFilePathsPlugin }; From 8dc7a5815303bef48cad3bbc943fd6b568f485c2 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 16 Jul 2024 12:49:25 +0200 Subject: [PATCH 03/11] Re-use PhpFilePathsPlugin --- tools/webpack/blocks.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 56067e96d155b..5beb9995edbf8 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -10,7 +10,7 @@ const { realpathSync } = require( 'fs' ); * WordPress dependencies */ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); -const { getRenderPropPaths } = require( '@wordpress/scripts/utils' ); +const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' ); /** * Internal dependencies @@ -79,28 +79,6 @@ const createEntrypoints = () => { }, {} ); }; -/** - * The plugin recomputes the render 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 { - /** - * Paths with the `render` props included in `block.json` files. - * - * @type {string[]} - */ - static renderPaths; - - apply( compiler ) { - const pluginName = this.constructor.name; - - compiler.hooks.thisCompilation.tap( pluginName, () => { - this.constructor.renderPaths = getRenderPropPaths(); - } ); - } -} - module.exports = [ { ...baseConfig, @@ -114,7 +92,7 @@ module.exports = [ plugins: [ ...plugins, new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ), - new RenderPathsPlugin(), + new PhpFilePathsPlugin( { props: [ 'render' ] } ), new CopyWebpackPlugin( { patterns: [].concat( [ @@ -171,7 +149,7 @@ module.exports = [ filter: ( filepath ) => { return ( filepath.endsWith( sep + 'index.php' ) || - RenderPathsPlugin.renderPaths.includes( + PhpFilePathsPlugin.renderPaths.includes( realpathSync( filepath ).replace( /\\/g, '/' From f1d7830c89566f063e2a424c5f32eb23ac126458 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 16 Jul 2024 12:58:19 +0200 Subject: [PATCH 04/11] Parametrize context --- packages/scripts/config/webpack.config.js | 5 ++++- packages/scripts/utils/config.js | 13 +++++++------ packages/scripts/utils/php-file-paths-plugin.js | 8 +++++++- tools/webpack/blocks.js | 5 ++++- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index ca27e143e1f4d..91ef19fc27ed6 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -301,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 index 7196c0376377d..dfb44730438c4 100644 --- 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/php-file-paths-plugin.js b/packages/scripts/utils/php-file-paths-plugin.js index f39d99947d54f..450dd0ad498ea 100644 --- a/packages/scripts/utils/php-file-paths-plugin.js +++ b/packages/scripts/utils/php-file-paths-plugin.js @@ -11,6 +11,9 @@ const { getPhpFilePaths } = require( '../utils' ); const phpFilePathsPluginSchema = { type: 'object', properties: { + context: { + type: 'string', + }, props: { type: 'array', items: { @@ -46,7 +49,10 @@ class PhpFilePathsPlugin { const pluginName = this.constructor.name; compiler.hooks.thisCompilation.tap( pluginName, () => { - this.constructor.paths = getPhpFilePaths( this.options.props ); + this.constructor.paths = getPhpFilePaths( + this.options.context, + this.options.props + ); } ); } } diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 5beb9995edbf8..db1b6b89e5bf9 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -92,7 +92,10 @@ module.exports = [ plugins: [ ...plugins, new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ), - new PhpFilePathsPlugin( { props: [ 'render' ] } ), + new PhpFilePathsPlugin( { + context: './packages/block-library/src/', + props: [ 'render' ], + } ), new CopyWebpackPlugin( { patterns: [].concat( [ From 8f7b0c2c3edd664315e7bc69a7accb391b6e5a67 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 16 Jul 2024 13:00:33 +0200 Subject: [PATCH 05/11] Fix import path --- packages/scripts/utils/php-file-paths-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scripts/utils/php-file-paths-plugin.js b/packages/scripts/utils/php-file-paths-plugin.js index 450dd0ad498ea..6f95dae6505a8 100644 --- a/packages/scripts/utils/php-file-paths-plugin.js +++ b/packages/scripts/utils/php-file-paths-plugin.js @@ -6,7 +6,7 @@ const { validate } = require( 'schema-utils' ); /** * Internal dependencies */ -const { getPhpFilePaths } = require( '../utils' ); +const { getPhpFilePaths } = require( './config' ); const phpFilePathsPluginSchema = { type: 'object', From 1edc3b031a6525331d6caf7f85591664172225a3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 16 Jul 2024 13:12:05 +0200 Subject: [PATCH 06/11] Fix paths --- tools/webpack/blocks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index db1b6b89e5bf9..c4d5b6f609240 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -152,7 +152,7 @@ module.exports = [ filter: ( filepath ) => { return ( filepath.endsWith( sep + 'index.php' ) || - PhpFilePathsPlugin.renderPaths.includes( + PhpFilePathsPlugin.paths.includes( realpathSync( filepath ).replace( /\\/g, '/' From 5a635e9104dce30c661c24f072c5fcccebb366de Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 17 Jul 2024 12:49:29 +0200 Subject: [PATCH 07/11] Also copy variations PHP files --- tools/webpack/blocks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index c4d5b6f609240..fa0c6123dbcdb 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -94,7 +94,7 @@ module.exports = [ new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ), new PhpFilePathsPlugin( { context: './packages/block-library/src/', - props: [ 'render' ], + props: [ 'render', 'variations' ], } ), new CopyWebpackPlugin( { patterns: [].concat( From aaa23d3056a89ff68db548dc622c47926266167a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Fri, 6 Sep 2024 19:01:39 +0200 Subject: [PATCH 08/11] Update CHANGELOG.md --- packages/scripts/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index ea8a59d1ad2ad..c5ef97f044ab0 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -10,7 +10,8 @@ ### Enhancements -- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). +- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). +- Add automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). ### Bug Fixes From 030c3c02edaac0fa7a4c9b2cf6c98a536bda6cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Fri, 6 Sep 2024 19:02:20 +0200 Subject: [PATCH 09/11] Update CHANGELOG.md --- packages/scripts/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index c5ef97f044ab0..45a7116a60926 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -11,7 +11,7 @@ ### Enhancements - Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). -- Add automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). +- Adds automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). ### Bug Fixes From 8a4fdaff5d8675e2d9371c4f9b947d76273c3b50 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Sep 2024 16:31:25 +0200 Subject: [PATCH 10/11] Revert "Update CHANGELOG.md" This reverts commit d09527f7d7d01b9d456507a9a8b8353991a970ac. --- packages/scripts/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 45a7116a60926..c5ef97f044ab0 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -11,7 +11,7 @@ ### Enhancements - Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). -- Adds automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). +- Add automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). ### Bug Fixes From 916ab9bba0555f22acbfd1a946e9d5095eb77ea5 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Sep 2024 16:31:33 +0200 Subject: [PATCH 11/11] Revert "Update CHANGELOG.md" This reverts commit 2175f278e62dfe49817c57c97691874bc73f7c77. --- packages/scripts/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index c5ef97f044ab0..ea8a59d1ad2ad 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -10,8 +10,7 @@ ### Enhancements -- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). -- Add automatic support for handling `variations` field from `block.json` in the `build` and `start` scripts ([#63311](https://github.com/WordPress/gutenberg/pull/63311)). +- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). ### Bug Fixes