From adb2bf492972ed281323d967698f10ff51f76e71 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 1 Aug 2023 15:58:13 +0200 Subject: [PATCH 1/8] Add metadata files to blogging-prompt and business-hours blocks --- .../extensions/blocks/blogging-prompt/block.json | 11 +++++++++++ .../extensions/blocks/business-hours/block.json | 11 +++++++++++ .../jetpack/tools/webpack.config.extensions.js | 9 +++++++++ 3 files changed, 31 insertions(+) create mode 100644 projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json create mode 100644 projects/plugins/jetpack/extensions/blocks/business-hours/block.json diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json new file mode 100644 index 0000000000000..d2d2626a39375 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "jetpack/blogging-prompt", + "title": "Writing Prompt", + "description": "Answer a new and inspiring writing prompt each day.", + "keywords": [ "writing", "blogging" ], + "version": "12.5.0", + "textdomain": "jetpack", + "category": "text" +} diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/block.json b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json new file mode 100644 index 0000000000000..2eb41249b234d --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "jetpack/business-hours", + "title": "Business Hours", + "description": "Display opening hours for your business.", + "keywords": [ "opening hours", "closing time", "schedule", "working day" ], + "version": "12.5.0", + "textdomain": "jetpack", + "category": "grow" +} diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js index 127621bbd07b7..83c0a7d02485c 100644 --- a/projects/plugins/jetpack/tools/webpack.config.extensions.js +++ b/projects/plugins/jetpack/tools/webpack.config.extensions.js @@ -192,6 +192,15 @@ module.exports = [ }, ], } ), + new CopyWebpackPlugin( { + patterns: [ + { + from: '**/block.json', + to: '[path][name][ext]', + context: path.join( __dirname, '../extensions/blocks' ), + }, + ], + } ), new CopyBlockEditorAssetsPlugin(), ], }, From 5b73d39589ae238620db49d897490ef870e6af6b Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 1 Aug 2023 15:59:26 +0200 Subject: [PATCH 2/8] changelog --- projects/plugins/jetpack/changelog/add-blocks-metadata-file | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-blocks-metadata-file diff --git a/projects/plugins/jetpack/changelog/add-blocks-metadata-file b/projects/plugins/jetpack/changelog/add-blocks-metadata-file new file mode 100644 index 0000000000000..a68a6fc2b42d5 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-blocks-metadata-file @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +Add metadata file to blogging-prompt and business-hours blocks From c8ef2587b6a293260dd0ea6cd0a49037201e1701 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 2 Aug 2023 14:30:52 +0200 Subject: [PATCH 3/8] Business hours: use block.json in backend block registration --- projects/packages/blocks/src/class-blocks.php | 7 ++++--- .../extensions/blocks/business-hours/business-hours.php | 4 ++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/packages/blocks/src/class-blocks.php b/projects/packages/blocks/src/class-blocks.php index 9286bd4ebc36d..e9a8a8e84101d 100644 --- a/projects/packages/blocks/src/class-blocks.php +++ b/projects/packages/blocks/src/class-blocks.php @@ -36,10 +36,11 @@ class Blocks { * @type array $version_requirements Array containing required Gutenberg version and, if known, the WordPress version that was released with this minimum version. * @type bool $plan_check Should we check for a specific plan before registering the block. * } + * @param string $metadata_dir Directory where the block's metadata is located. * * @return WP_Block_Type|false The registered block type on success, or false on failure. */ - public static function jetpack_register_block( $slug, $args = array() ) { + public static function jetpack_register_block( $slug, $args = array(), $metadata_dir = '' ) { if ( 0 !== strpos( $slug, 'jetpack/' ) && ! strpos( $slug, '/' ) ) { _doing_it_wrong( 'jetpack_register_block', 'Prefix the block with jetpack/ ', 'Jetpack 9.0.0' ); $slug = 'jetpack/' . $slug; @@ -94,12 +95,12 @@ function () use ( $feature_name, $method_name ) { // Ensure editor styles are registered so that the site editor knows about the // editor style dependency when copying styles to the editor iframe. - if ( ! isset( $args['editor_style'] ) ) { + if ( ! isset( $args['editor_style'] ) && ! $metadata_dir ) { $args['editor_style'] = 'jetpack-blocks-editor'; } } - return register_block_type( $slug, $args ); + return register_block_type( $metadata_dir ? $metadata_dir : $slug, $args ); } /** diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php index 2540e5b764d64..21182ef9ed35b 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php @@ -21,6 +21,9 @@ * registration if we need to. */ function register_block() { + $dir = dirname( JETPACK__PLUGIN_FILE ); + $json_dir = $dir . '/_inc/blocks/' . FEATURE_NAME; + Blocks::jetpack_register_block( BLOCK_NAME, array( @@ -39,6 +42,7 @@ function register_block() { ), 'align' => array( 'wide', 'full' ), ), + $json_dir, ) ); } From 2a9fca5bc5038db0fb3370520969b727d2483da8 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 2 Aug 2023 14:32:22 +0200 Subject: [PATCH 4/8] changelog --- projects/packages/blocks/changelog/add-blocks-metadata-file | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/blocks/changelog/add-blocks-metadata-file diff --git a/projects/packages/blocks/changelog/add-blocks-metadata-file b/projects/packages/blocks/changelog/add-blocks-metadata-file new file mode 100644 index 0000000000000..b1a7f0ea15f7c --- /dev/null +++ b/projects/packages/blocks/changelog/add-blocks-metadata-file @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Allow block registration with path to metadata file From 22bd16b12ce7c692b93c27ce1d950b87d999ccf5 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 3 Aug 2023 11:29:45 +0200 Subject: [PATCH 5/8] Async load business hours and blogging prompt blocks --- .../blocks/blogging-prompt/block.json | 26 +++++++++- .../blogging-prompt/blogging-prompt.php | 8 ++- .../blocks/business-hours/block.json | 19 ++++++- .../blocks/business-hours/business-hours.php | 18 +------ .../plugins/jetpack/extensions/index.json | 3 +- .../tools/webpack.config.extensions.js | 51 +++++++++++++++---- 6 files changed, 95 insertions(+), 30 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json index d2d2626a39375..4ef469273fb93 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json @@ -7,5 +7,29 @@ "keywords": [ "writing", "blogging" ], "version": "12.5.0", "textdomain": "jetpack", - "category": "text" + "category": "text", + "supports": { + "align": false, + "alignWide": false, + "anchor": false, + "className": true, + "color": { + "background": true, + "gradients": true, + "link": true, + "text": true + }, + "customClassName": true, + "html": false, + "inserter": true, + "multiple": false, + "reusable": true, + "spacing": { + "margin": [ "top", "bottom" ], + "padding": true, + "blockGap": false + } + }, + "editorScript": "file:./editor.js", + "editorStyle": "file:./editor.css" } diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php index 7b0a236bbefbe..517e008d2214c 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php @@ -22,9 +22,15 @@ */ function register_block() { if ( ( defined( 'IS_WPCOM' ) && IS_WPCOM ) || \Jetpack::is_connection_ready() ) { + $dir = dirname( JETPACK__PLUGIN_FILE ); + $json_dir = $dir . '/_inc/blocks/' . FEATURE_NAME; + Blocks::jetpack_register_block( BLOCK_NAME, - array( 'render_callback' => __NAMESPACE__ . '\load_assets' ) + array( + 'render_callback' => __NAMESPACE__ . '\load_assets', + ), + $json_dir, ); } } diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/block.json b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json index 2eb41249b234d..eb30573756510 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/block.json +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json @@ -7,5 +7,22 @@ "keywords": [ "opening hours", "closing time", "schedule", "working day" ], "version": "12.5.0", "textdomain": "jetpack", - "category": "grow" + "category": "grow", + "supports": { + "html": true, + "color": { + "gradients": true + }, + "spacing": { + "margin": true, + "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + }, + "align": [ "wide", "full" ] + }, + "editorScript": "file:./editor.js", + "editorStyle": "file:./editor.css" } diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php index 21182ef9ed35b..40d3e95376066 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php @@ -28,22 +28,8 @@ function register_block() { BLOCK_NAME, array( 'render_callback' => __NAMESPACE__ . '\render', - 'supports' => array( - 'color' => array( - 'gradients' => true, - ), - 'spacing' => array( - 'margin' => true, - 'padding' => true, - ), - 'typography' => array( - 'fontSize' => true, - 'lineHeight' => true, - ), - 'align' => array( 'wide', 'full' ), - ), - $json_dir, - ) + ), + $json_dir, ); } add_action( 'init', __NAMESPACE__ . '\register_block' ); diff --git a/projects/plugins/jetpack/extensions/index.json b/projects/plugins/jetpack/extensions/index.json index 32f6931c888eb..69f2a8f39511d 100644 --- a/projects/plugins/jetpack/extensions/index.json +++ b/projects/plugins/jetpack/extensions/index.json @@ -93,5 +93,6 @@ "tock", "videopress", "wordads" - ] + ], + "_bundles": { "test": [ "blogging-prompt", "business-hours" ] } } diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js index 83c0a7d02485c..8085054736325 100644 --- a/projects/plugins/jetpack/tools/webpack.config.extensions.js +++ b/projects/plugins/jetpack/tools/webpack.config.extensions.js @@ -19,6 +19,12 @@ const editorSetup = path.join( __dirname, '../extensions', 'editor' ); const viewSetup = path.join( __dirname, '../extensions', 'view' ); const blockEditorDirectories = [ 'plugins', 'blocks' ]; const noop = function () {}; +const presetPath = path.join( __dirname, '../extensions', 'index.json' ); +const presetIndex = require( presetPath ); +const presetBundles = presetIndex._bundles || {}; +const bundledBlocks = Object.keys( presetBundles ).reduce( ( blocks, bundle ) => { + return blocks.concat( presetBundles[ bundle ] ); +}, [] ); /** * Filters block editor scripts @@ -30,14 +36,14 @@ const noop = function () {}; */ function presetProductionExtensions( type, inputDir, presetBlocks ) { return presetBlocks + .filter( block => ! bundledBlocks.includes( block ) ) .flatMap( block => blockEditorDirectories.map( dir => path.join( inputDir, dir, block, `${ type }.js` ) ) ) - .filter( fs.existsSync ); + .filter( fs.existsSync ) + .filter( block => ! bundledBlocks.includes( block ) ); } -const presetPath = path.join( __dirname, '../extensions', 'index.json' ); -const presetIndex = require( presetPath ); const presetProductionBlocks = presetIndex.production || []; const presetNoPostEditorBlocks = presetIndex[ 'no-post-editor' ] || []; @@ -49,13 +55,15 @@ const presetExperimentalBlocks = [ const presetBetaBlocks = [ ...presetExperimentalBlocks, ...( presetIndex.beta || [] ) ]; // Helps split up each block into its own folder view script -const viewBlocksScripts = presetBetaBlocks.reduce( ( viewBlocks, block ) => { - const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); - if ( fs.existsSync( viewScriptPath ) ) { - viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ]; - } - return viewBlocks; -}, {} ); +const viewBlocksScripts = presetBetaBlocks + .filter( block => ! bundledBlocks.includes( block ) ) + .reduce( ( viewBlocks, block ) => { + const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); + if ( fs.existsSync( viewScriptPath ) ) { + viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ]; + } + return viewBlocks; + }, {} ); // Combines all the different production blocks into one editor.js script const editorScript = [ @@ -96,6 +104,22 @@ const editorNoPostEditorScript = [ ), ]; +const editorSingleBlocksScripts = bundledBlocks.reduce( ( editorBlocks, block ) => { + const editorScriptPath = path.join( __dirname, '../extensions/blocks', block, 'editor.js' ); + if ( fs.existsSync( editorScriptPath ) ) { + editorBlocks[ block + '/editor' ] = [ editorScriptPath ]; + } + return editorBlocks; +}, {} ); + +const viewSingleBlocksScripts = bundledBlocks.reduce( ( viewBlocks, block ) => { + const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); + if ( fs.existsSync( viewScriptPath ) ) { + viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ]; + } + return viewBlocks; +}, {} ); + const sharedWebpackConfig = { mode: jetpackWebpackConfig.mode, devtool: jetpackWebpackConfig.devtool, @@ -277,4 +301,11 @@ module.exports = [ } ), ], }, + { + ...sharedWebpackConfig, + entry: { + ...editorSingleBlocksScripts, + ...viewSingleBlocksScripts, + }, + }, ]; From b9745050d067d57b887a5a0795f9919b06790c30 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 8 Aug 2023 14:12:41 -0400 Subject: [PATCH 6/8] Enable bundles build --- .../blocks/blogging-prompt/block.json | 4 +- .../blogging-prompt/blogging-prompt.php | 2 +- .../blocks/business-hours/block.json | 4 +- .../blocks/business-hours/business-hours.php | 2 +- .../tools/webpack.config.extensions.js | 146 ++++++++++++------ 5 files changed, 105 insertions(+), 53 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json index 4ef469273fb93..ffc4e7c0e6053 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/block.json @@ -29,7 +29,5 @@ "padding": true, "blockGap": false } - }, - "editorScript": "file:./editor.js", - "editorStyle": "file:./editor.css" + } } diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php index 517e008d2214c..3636f7357a887 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php @@ -30,7 +30,7 @@ function register_block() { array( 'render_callback' => __NAMESPACE__ . '\load_assets', ), - $json_dir, + $json_dir ); } } diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/block.json b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json index eb30573756510..1b371bd0db7ce 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/block.json +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/block.json @@ -22,7 +22,5 @@ "lineHeight": true }, "align": [ "wide", "full" ] - }, - "editorScript": "file:./editor.js", - "editorStyle": "file:./editor.css" + } } diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php index 40d3e95376066..f82a8a71a79cc 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/business-hours.php @@ -29,7 +29,7 @@ function register_block() { array( 'render_callback' => __NAMESPACE__ . '\render', ), - $json_dir, + $json_dir ); } add_action( 'init', __NAMESPACE__ . '\register_block' ); diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js index 8085054736325..e8ce0249d1e5c 100644 --- a/projects/plugins/jetpack/tools/webpack.config.extensions.js +++ b/projects/plugins/jetpack/tools/webpack.config.extensions.js @@ -19,12 +19,23 @@ const editorSetup = path.join( __dirname, '../extensions', 'editor' ); const viewSetup = path.join( __dirname, '../extensions', 'view' ); const blockEditorDirectories = [ 'plugins', 'blocks' ]; const noop = function () {}; + const presetPath = path.join( __dirname, '../extensions', 'index.json' ); const presetIndex = require( presetPath ); +const presetProductionBlocks = presetIndex.production || []; +const presetNoPostEditorBlocks = presetIndex[ 'no-post-editor' ] || []; +const presetExperimentalBlocks = [ + ...presetProductionBlocks, + ...( presetIndex.experimental || [] ), +]; +// Beta Blocks include all blocks: beta, experimental, and production blocks. +const presetBetaBlocks = [ ...presetExperimentalBlocks, ...( presetIndex.beta || [] ) ]; +// Bundled blocks are built individually or grouped together in bundles. const presetBundles = presetIndex._bundles || {}; -const bundledBlocks = Object.keys( presetBundles ).reduce( ( blocks, bundle ) => { - return blocks.concat( presetBundles[ bundle ] ); -}, [] ); +const bundledBlocks = Object.keys( presetBundles ).reduce( + ( blocks, bundle ) => [ ...blocks, ...presetBundles[ bundle ] ], + [] +); /** * Filters block editor scripts @@ -35,27 +46,20 @@ const bundledBlocks = Object.keys( presetBundles ).reduce( ( blocks, bundle ) => * @returns {Array} list of block scripts */ function presetProductionExtensions( type, inputDir, presetBlocks ) { - return presetBlocks - .filter( block => ! bundledBlocks.includes( block ) ) - .flatMap( block => - blockEditorDirectories.map( dir => path.join( inputDir, dir, block, `${ type }.js` ) ) - ) - .filter( fs.existsSync ) - .filter( block => ! bundledBlocks.includes( block ) ); + return ( + presetBlocks + // Exclude blocks that are bundled separately from the production/experimental/beta bundles. + .filter( block => ! bundledBlocks.includes( block ) ) + .flatMap( block => + blockEditorDirectories.map( dir => path.join( inputDir, dir, block, `${ type }.js` ) ) + ) + .filter( fs.existsSync ) + ); } -const presetProductionBlocks = presetIndex.production || []; -const presetNoPostEditorBlocks = presetIndex[ 'no-post-editor' ] || []; - -const presetExperimentalBlocks = [ - ...presetProductionBlocks, - ...( presetIndex.experimental || [] ), -]; -// Beta Blocks include all blocks: beta, experimental, and production blocks. -const presetBetaBlocks = [ ...presetExperimentalBlocks, ...( presetIndex.beta || [] ) ]; - // Helps split up each block into its own folder view script const viewBlocksScripts = presetBetaBlocks + // Exclude blocks that are bundled separately from the production/experimental/beta bundles. .filter( block => ! bundledBlocks.includes( block ) ) .reduce( ( viewBlocks, block ) => { const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); @@ -104,22 +108,6 @@ const editorNoPostEditorScript = [ ), ]; -const editorSingleBlocksScripts = bundledBlocks.reduce( ( editorBlocks, block ) => { - const editorScriptPath = path.join( __dirname, '../extensions/blocks', block, 'editor.js' ); - if ( fs.existsSync( editorScriptPath ) ) { - editorBlocks[ block + '/editor' ] = [ editorScriptPath ]; - } - return editorBlocks; -}, {} ); - -const viewSingleBlocksScripts = bundledBlocks.reduce( ( viewBlocks, block ) => { - const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); - if ( fs.existsSync( viewScriptPath ) ) { - viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ]; - } - return viewBlocks; -}, {} ); - const sharedWebpackConfig = { mode: jetpackWebpackConfig.mode, devtool: jetpackWebpackConfig.devtool, @@ -194,8 +182,77 @@ const sharedWebpackConfig = { }, }; -// We export two configuration files: One for admin.js, and one for components.jsx. -// The latter produces pre-rendered components HTML. +/** + * Bundles logic + */ + +const bundles = {}; +const bundlesPlugins = []; + +Object.keys( presetBundles ).forEach( bundleName => { + const blocks = presetBundles[ bundleName ]; + + // Bundle editor assets + bundles[ bundleName + '/editor' ] = blocks.reduce( ( arr, block ) => { + const editorScriptPath = path.join( __dirname, '../extensions/blocks', block, 'editor.js' ); + + if ( fs.existsSync( editorScriptPath ) ) { + arr.push( editorScriptPath ); + } + + return arr; + }, [] ); + + // Bundle view assets + bundles[ bundleName + '/view' ] = blocks.reduce( ( arr, block ) => { + const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); + + if ( fs.existsSync( viewScriptPath ) ) { + arr.push( viewScriptPath ); + } + + return arr; + }, [] ); + + // Copy block.json files and set assets paths + blocks.forEach( block => { + bundlesPlugins.push( + new CopyWebpackPlugin( { + patterns: [ + { + from: `${ block }/block.json`, + to: `${ block }/[path][name][ext]`, + context: path.join( __dirname, '../extensions/blocks' ), + transform( content ) { + let metadata = {}; + + try { + metadata = JSON.parse( content.toString() ); + } catch ( e ) {} + + return JSON.stringify( { + ...metadata, + editorScript: `file:../${ bundleName }/editor.js`, + editorStyle: `file:../${ bundleName }/editor.css`, + viewScript: `file:../${ bundleName }/view.js`, + style: `file:../${ bundleName }/view.css`, + } ); + }, + noErrorOnMissing: true, + }, + ], + } ) + ); + } ); +} ); + +const bundlesConfig = { + ...sharedWebpackConfig, + entry: bundles, + plugins: [ ...sharedWebpackConfig.plugins, ...bundlesPlugins ], +}; + +// We export three configuration files: One for admin.js, one for components.jsx (produces pre-rendered components HTML), and one for bundles. module.exports = [ { ...sharedWebpackConfig, @@ -216,12 +273,17 @@ module.exports = [ }, ], } ), + // Copy the block.json files to the matching block folder in the build directory. new CopyWebpackPlugin( { patterns: [ { from: '**/block.json', to: '[path][name][ext]', context: path.join( __dirname, '../extensions/blocks' ), + globOptions: { + ignore: bundledBlocks.map( block => `**/${ block }/**` ), + }, + noErrorOnMissing: true, }, ], } ), @@ -301,11 +363,5 @@ module.exports = [ } ), ], }, - { - ...sharedWebpackConfig, - entry: { - ...editorSingleBlocksScripts, - ...viewSingleBlocksScripts, - }, - }, + bundlesConfig, ]; From 325cfc9bd77aa70a2ebd951f47d6522a97cddf2f Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 8 Aug 2023 14:34:35 -0400 Subject: [PATCH 7/8] Move bundles config in separate file --- .../plugins/jetpack/extensions/bundles.json | 9 ++++++ .../plugins/jetpack/extensions/index.json | 3 +- .../tools/webpack.config.extensions.js | 32 +++++++++---------- 3 files changed, 26 insertions(+), 18 deletions(-) create mode 100644 projects/plugins/jetpack/extensions/bundles.json diff --git a/projects/plugins/jetpack/extensions/bundles.json b/projects/plugins/jetpack/extensions/bundles.json new file mode 100644 index 0000000000000..9106d261a9766 --- /dev/null +++ b/projects/plugins/jetpack/extensions/bundles.json @@ -0,0 +1,9 @@ +[ + { + "name": "first-bundle", + "title": "First Bundle", + "description": "This is a proof of concept", + "blocks": [ "blogging-prompt", "business-hours" ], + "version": "1.0.0" + } +] diff --git a/projects/plugins/jetpack/extensions/index.json b/projects/plugins/jetpack/extensions/index.json index 69f2a8f39511d..32f6931c888eb 100644 --- a/projects/plugins/jetpack/extensions/index.json +++ b/projects/plugins/jetpack/extensions/index.json @@ -93,6 +93,5 @@ "tock", "videopress", "wordads" - ], - "_bundles": { "test": [ "blogging-prompt", "business-hours" ] } + ] } diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js index e8ce0249d1e5c..e925c44f14272 100644 --- a/projects/plugins/jetpack/tools/webpack.config.extensions.js +++ b/projects/plugins/jetpack/tools/webpack.config.extensions.js @@ -30,12 +30,14 @@ const presetExperimentalBlocks = [ ]; // Beta Blocks include all blocks: beta, experimental, and production blocks. const presetBetaBlocks = [ ...presetExperimentalBlocks, ...( presetIndex.beta || [] ) ]; + // Bundled blocks are built individually or grouped together in bundles. -const presetBundles = presetIndex._bundles || {}; -const bundledBlocks = Object.keys( presetBundles ).reduce( - ( blocks, bundle ) => [ ...blocks, ...presetBundles[ bundle ] ], - [] -); +const bundlesPath = path.join( __dirname, '../extensions', 'bundles.json' ); +const bundlesIndex = require( bundlesPath ); +const bundles = bundlesIndex || []; +const bundledBlocks = bundles + .reduce( ( blocks, bundle ) => [ ...blocks, ...bundle.blocks ], [] ) + .filter( Boolean ); /** * Filters block editor scripts @@ -186,14 +188,12 @@ const sharedWebpackConfig = { * Bundles logic */ -const bundles = {}; +const bundlesEntry = {}; const bundlesPlugins = []; -Object.keys( presetBundles ).forEach( bundleName => { - const blocks = presetBundles[ bundleName ]; - +bundles.forEach( ( { name, blocks } ) => { // Bundle editor assets - bundles[ bundleName + '/editor' ] = blocks.reduce( ( arr, block ) => { + bundlesEntry[ name + '/editor' ] = blocks.reduce( ( arr, block ) => { const editorScriptPath = path.join( __dirname, '../extensions/blocks', block, 'editor.js' ); if ( fs.existsSync( editorScriptPath ) ) { @@ -204,7 +204,7 @@ Object.keys( presetBundles ).forEach( bundleName => { }, [] ); // Bundle view assets - bundles[ bundleName + '/view' ] = blocks.reduce( ( arr, block ) => { + bundlesEntry[ name + '/view' ] = blocks.reduce( ( arr, block ) => { const viewScriptPath = path.join( __dirname, '../extensions/blocks', block, 'view.js' ); if ( fs.existsSync( viewScriptPath ) ) { @@ -232,10 +232,10 @@ Object.keys( presetBundles ).forEach( bundleName => { return JSON.stringify( { ...metadata, - editorScript: `file:../${ bundleName }/editor.js`, - editorStyle: `file:../${ bundleName }/editor.css`, - viewScript: `file:../${ bundleName }/view.js`, - style: `file:../${ bundleName }/view.css`, + editorScript: `file:../${ name }/editor.js`, + editorStyle: `file:../${ name }/editor.css`, + viewScript: `file:../${ name }/view.js`, + style: `file:../${ name }/view.css`, } ); }, noErrorOnMissing: true, @@ -248,7 +248,7 @@ Object.keys( presetBundles ).forEach( bundleName => { const bundlesConfig = { ...sharedWebpackConfig, - entry: bundles, + entry: bundlesEntry, plugins: [ ...sharedWebpackConfig.plugins, ...bundlesPlugins ], }; From e0eaa240db61b0aa3a0b2e77dc918a5b533f357b Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 8 Aug 2023 14:48:02 -0400 Subject: [PATCH 8/8] Enable single blocks build --- projects/plugins/jetpack/extensions/bundles.json | 5 +++-- .../jetpack/tools/webpack.config.extensions.js | 11 +++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/projects/plugins/jetpack/extensions/bundles.json b/projects/plugins/jetpack/extensions/bundles.json index 9106d261a9766..4c63df899a77a 100644 --- a/projects/plugins/jetpack/extensions/bundles.json +++ b/projects/plugins/jetpack/extensions/bundles.json @@ -3,7 +3,8 @@ "name": "first-bundle", "title": "First Bundle", "description": "This is a proof of concept", - "blocks": [ "blogging-prompt", "business-hours" ], + "blocks": [ "blogging-prompt" ], "version": "1.0.0" - } + }, + "business-hours" ] diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js index e925c44f14272..6420e49d8cdb8 100644 --- a/projects/plugins/jetpack/tools/webpack.config.extensions.js +++ b/projects/plugins/jetpack/tools/webpack.config.extensions.js @@ -36,7 +36,11 @@ const bundlesPath = path.join( __dirname, '../extensions', 'bundles.json' ); const bundlesIndex = require( bundlesPath ); const bundles = bundlesIndex || []; const bundledBlocks = bundles - .reduce( ( blocks, bundle ) => [ ...blocks, ...bundle.blocks ], [] ) + .reduce( + ( blocks, bundle ) => + 'string' === typeof bundle ? [ ...blocks, bundle ] : [ ...blocks, ...bundle.blocks ], + [] + ) .filter( Boolean ); /** @@ -191,7 +195,10 @@ const sharedWebpackConfig = { const bundlesEntry = {}; const bundlesPlugins = []; -bundles.forEach( ( { name, blocks } ) => { +bundles.forEach( bundle => { + const name = 'string' === typeof bundle ? bundle : bundle.name; + const blocks = 'string' === typeof bundle ? [ bundle ] : bundle.blocks; + // Bundle editor assets bundlesEntry[ name + '/editor' ] = blocks.reduce( ( arr, block ) => { const editorScriptPath = path.join( __dirname, '../extensions/blocks', block, 'editor.js' );