From 643885684ef4301530e3ca1e357c3cbeaa117413 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 24 Mar 2022 11:23:01 -0400 Subject: [PATCH 01/21] Add npmDevDependencies as a template variable. Update messaging to show what packages are being installed. --- .../create-block/lib/init-package-json.js | 55 +++++++++++++++---- packages/create-block/lib/scaffold.js | 2 + 2 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index 94608207fd935..44fe5f9ed4b45 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -22,6 +22,7 @@ module.exports = async ( { wpEnv, wpScripts, npmDependencies, + npmDevDependencies, customScripts, } ) => { const cwd = join( process.cwd(), slug ); @@ -58,23 +59,35 @@ module.exports = async ( { ) ); - if ( wpScripts && size( npmDependencies ) ) { + /** + * Helper to determine if we can install this package. + * + * @param {string} packageArg The package to install. + */ + function checkDependency( packageArg ) { + const { type } = npmPackageArg( packageArg ); + if ( + ! [ 'git', 'tag', 'version', 'range', 'remote' ].includes( type ) + ) { + throw new Error( + `Provided package type "${ type }" is not supported.` + ); + } + } + + if ( + wpScripts && + ( size( npmDependencies ) || size( npmDevDependencies ) ) + ) { info( '' ); info( 'Installing npm dependencies. It might take a couple of minutes...' ); for ( const packageArg of npmDependencies ) { try { - const { type } = npmPackageArg( packageArg ); - if ( - ! [ 'git', 'tag', 'version', 'range', 'remote' ].includes( - type - ) - ) { - throw new Error( - `Provided package type "${ type }" is not supported.` - ); - } + checkDependency( packageArg ); + info( '' ); + info( `Installing "${ packageArg }".` ); await command( `npm install ${ packageArg }`, { cwd, } ); @@ -84,5 +97,25 @@ module.exports = async ( { error( message ); } } + info( '' ); + info( + 'Installing npm devDependencies. It might take a couple of minutes...' + ); + for ( const packageArg of npmDevDependencies ) { + try { + checkDependency( packageArg ); + info( '' ); + info( `Installing "${ packageArg }".` ); + await command( `npm install ${ packageArg } --save-dev`, { + cwd, + } ); + } catch ( { message } ) { + info( '' ); + info( + `Skipping "${ packageArg }" npm dev dependency. Reason:` + ); + error( message ); + } + } } }; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index b9de1bcd42246..a13b742ae9a23 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -36,6 +36,7 @@ module.exports = async ( wpScripts, wpEnv, npmDependencies, + npmDevDependencies, customScripts, folderName, editorScript, @@ -74,6 +75,7 @@ module.exports = async ( wpScripts, wpEnv, npmDependencies, + npmDevDependencies, customScripts, folderName, editorScript, From a6ecbe4c2c42630262d4e88f1df039f0fb5e47df Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 2 Jun 2022 16:12:00 +0100 Subject: [PATCH 02/21] Adding --block-only to available flags. --- packages/create-block/lib/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index cacb10c012ec8..53e1d06ed5458 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -57,10 +57,15 @@ program 'disable integration with `@wordpress/scripts` package' ) .option( '--wp-env', 'enable integration with `@wordpress/env` package' ) + .option( + '--block-only', + 'scaffold only block files inside of a directory with the value passed' + ) .action( async ( slug, { + blockOnly, category, namespace, shortDescription: description, @@ -76,6 +81,7 @@ program const defaultValues = getDefaultValues( pluginTemplate ); const optionsValues = pickBy( { + blockOnly, category, description, namespace, From a6353409662c2681d1ca7848fdf56d404c9fefc0 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 8 Jun 2022 12:41:49 -0400 Subject: [PATCH 03/21] Adding --block-only to available flags --- packages/create-block/lib/index.js | 5 +-- packages/create-block/lib/init-block.js | 25 ++++++++----- packages/create-block/lib/output.js | 8 ++-- packages/create-block/lib/scaffold.js | 50 +++++++++++++++---------- 4 files changed, 49 insertions(+), 39 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 53e1d06ed5458..7530440cb7598 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -57,10 +57,7 @@ program 'disable integration with `@wordpress/scripts` package' ) .option( '--wp-env', 'enable integration with `@wordpress/env` package' ) - .option( - '--block-only', - 'scaffold only block files inside of a directory with the value passed' - ) + .option( '--block-only', 'scaffold only block files' ) .action( async ( slug, diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index b02aaf142a816..35f266fa6a464 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -15,6 +15,7 @@ const { writeOutputTemplate } = require( './output' ); async function initBlockJSON( { $schema, apiVersion, + blockOnly, slug, namespace, title, @@ -33,7 +34,9 @@ async function initBlockJSON( { info( '' ); info( 'Creating a "block.json" file.' ); - const outputFile = join( process.cwd(), slug, folderName, 'block.json' ); + const outputFile = blockOnly + ? join( process.cwd(), folderName, slug, 'block.json' ) + : join( process.cwd(), slug, folderName, 'block.json' ); await makeDir( dirname( outputFile ) ); await writeFile( outputFile, @@ -65,15 +68,17 @@ async function initBlockJSON( { module.exports = async function ( outputTemplates, view ) { await Promise.all( - Object.keys( outputTemplates ).map( - async ( outputFile ) => - await writeOutputTemplate( - outputTemplates[ outputFile ], - join( view.folderName, outputFile ), - view - ) - ) - ); + Object.keys( outputTemplates ).map( async ( outputFile ) => { + const pathName = view.blockOnly + ? join( process.cwd(), view.folderName, view.slug, outputFile ) + : join( view.folderName, outputFile ); + await writeOutputTemplate( + outputTemplates[ outputFile ], + pathName, + view + ); + } ) + ); await initBlockJSON( view ); }; diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index 9671a52bb20c3..8ea05717fe535 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -13,11 +13,9 @@ const writeOutputAsset = async ( inputFile, outputFile, view ) => { }; const writeOutputTemplate = async ( inputFile, outputFile, view ) => { - // Output files can have names that depend on the slug provided. - const outputFilePath = join( - view.slug, - outputFile.replace( /\$slug/g, view.slug ) - ); + const outputFilePath = view.blockOnly + ? outputFile + : join( view.slug, outputFile.replace( /\$slug/g, view.slug ) ); await makeDir( dirname( outputFilePath ) ); writeFile( outputFilePath, render( inputFile, view ) ); }; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index a13b742ae9a23..f324428e5e75a 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -2,6 +2,8 @@ * External dependencies */ const { snakeCase, camelCase, upperFirst } = require( 'lodash' ); +const { existsSync } = require( 'fs' ); +const { resolve } = require( 'path' ); /** * Internal dependencies @@ -12,12 +14,14 @@ const initWPScripts = require( './init-wp-scripts' ); const initWPEnv = require( './init-wp-env' ); const { code, info, success } = require( './log' ); const { writeOutputAsset, writeOutputTemplate } = require( './output' ); +const CLIError = require( './cli-error' ); module.exports = async ( { blockOutputTemplates, pluginOutputTemplates, outputAssets }, { $schema, apiVersion, + blockOnly, namespace, slug, title, @@ -53,6 +57,7 @@ module.exports = async ( const view = { $schema, apiVersion, + blockOnly, namespace, namespaceSnakeCase: snakeCase( namespace ), slug, @@ -83,16 +88,19 @@ module.exports = async ( style, }; - await Promise.all( - Object.keys( pluginOutputTemplates ).map( - async ( outputFile ) => - await writeOutputTemplate( - pluginOutputTemplates[ outputFile ], - outputFile, - view - ) - ) - ); + if ( ! blockOnly ) { + // If blockOnly exists, we don't need to scaffold the plugin files. + await Promise.all( + Object.keys( pluginOutputTemplates ).map( + async ( outputFile ) => + await writeOutputTemplate( + pluginOutputTemplates[ outputFile ], + outputFile, + view + ) + ) + ); + } await Promise.all( Object.keys( outputAssets ).map( @@ -107,21 +115,23 @@ module.exports = async ( await initBlock( blockOutputTemplates, view ); - await initPackageJSON( view ); + if ( ! blockOnly ) { + await initPackageJSON( view ); + if ( wpScripts ) { + await initWPScripts( view ); + } - if ( wpScripts ) { - await initWPScripts( view ); - } - - if ( wpEnv ) { - await initWPEnv( view ); + if ( wpEnv ) { + await initWPEnv( view ); + } } info( '' ); success( `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.` ); - if ( wpScripts ) { + + if ( ! blockOnly && wpScripts ) { info( '' ); info( 'You can run several commands inside:' ); info( '' ); @@ -150,13 +160,13 @@ module.exports = async ( info( 'To enter the directory type:' ); info( '' ); code( ` $ cd ${ slug }` ); - if ( wpScripts ) { + if ( ! blockOnly && wpScripts ) { info( '' ); info( 'You can start development with:' ); info( '' ); code( ' $ npm start' ); } - if ( wpEnv ) { + if ( ! blockOnly && wpEnv ) { info( '' ); info( 'You can start WordPress with:' ); info( '' ); From 0f2a9d63f2c017b667d9d4374a9d7c7507658586 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 14 Jun 2022 13:58:00 -0400 Subject: [PATCH 04/21] Remove extra dependeny loop. --- .../create-block/lib/init-package-json.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index 468a160a3b41b..834b42f3d53d1 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -121,25 +121,5 @@ module.exports = async ( { } } } - info( '' ); - info( - 'Installing npm devDependencies. It might take a couple of minutes...' - ); - for ( const packageArg of npmDevDependencies ) { - try { - checkDependency( packageArg ); - info( '' ); - info( `Installing "${ packageArg }".` ); - await command( `npm install ${ packageArg } --save-dev`, { - cwd, - } ); - } catch ( { message } ) { - info( '' ); - info( - `Skipping "${ packageArg }" npm dev dependency. Reason:` - ); - error( message ); - } - } } }; From 1b753f3c38796d2ce066be0f0d16e68ef2141981 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 15 Jun 2022 09:43:21 +0200 Subject: [PATCH 05/21] Apply suggestions from code review --- packages/create-block/lib/scaffold.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index f324428e5e75a..08b50e84cc334 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -2,8 +2,6 @@ * External dependencies */ const { snakeCase, camelCase, upperFirst } = require( 'lodash' ); -const { existsSync } = require( 'fs' ); -const { resolve } = require( 'path' ); /** * Internal dependencies @@ -14,7 +12,6 @@ const initWPScripts = require( './init-wp-scripts' ); const initWPEnv = require( './init-wp-env' ); const { code, info, success } = require( './log' ); const { writeOutputAsset, writeOutputTemplate } = require( './output' ); -const CLIError = require( './cli-error' ); module.exports = async ( { blockOutputTemplates, pluginOutputTemplates, outputAssets }, From 5b079b5327a760befe45f59581675f1efad0a29a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 29 Jun 2022 12:13:19 -0400 Subject: [PATCH 06/21] Remove extra code block added in error. --- .../create-block/lib/init-package-json.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index c281cd2ac314b..caaf3ef28b723 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -121,25 +121,5 @@ module.exports = async ( { } } } - info( '' ); - info( - 'Installing npm devDependencies. It might take a couple of minutes...' - ); - for ( const packageArg of npmDevDependencies ) { - try { - checkDependency( packageArg ); - info( '' ); - info( `Installing "${ packageArg }".` ); - await command( `npm install ${ packageArg } --save-dev`, { - cwd, - } ); - } catch ( { message } ) { - info( '' ); - info( - `Skipping "${ packageArg }" npm dev dependency. Reason:` - ); - error( message ); - } - } } }; From 5d27273fedd41942ae8164e267be259c12d3bf8f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 8 Aug 2022 12:33:06 -0400 Subject: [PATCH 07/21] Add correct messaging based on existence of --block-only flag. --- packages/create-block/lib/scaffold.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index a4686b5caa677..5306cf23eddfb 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -51,9 +51,12 @@ module.exports = async ( ) => { slug = slug.toLowerCase(); namespace = namespace.toLowerCase(); + const creationMessage = blockOnly + ? `Creating a new block in the "${ folderName }/${ slug }" directory.` + : `Creating a new WordPress plugin in the "${ slug }" directory.`; info( '' ); - info( `Creating a new WordPress plugin in the "${ slug }" directory.` ); + info( creationMessage ); const view = { $schema, @@ -128,9 +131,10 @@ module.exports = async ( } info( '' ); - success( - `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.` - ); + const successMessage = blockOnly + ? `Done: Block "${ title }" bootstrapped in the "${ folderName }/${ slug }" directory.` + : `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.`; + success( successMessage ); if ( ! blockOnly && wpScripts ) { info( '' ); @@ -156,11 +160,11 @@ module.exports = async ( info( '' ); code( ' $ npm run packages-update' ); info( ' Updates WordPress packages to the latest version.' ); + info( '' ); + info( 'To enter the directory type:' ); + info( '' ); + code( ` $ cd ${ slug }` ); } - info( '' ); - info( 'To enter the directory type:' ); - info( '' ); - code( ` $ cd ${ slug }` ); if ( ! blockOnly && wpScripts ) { info( '' ); info( 'You can start development with:' ); From 342443ce7b4efc6ed02fca1e747d3350a9428dfd Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 8 Aug 2022 12:57:57 -0400 Subject: [PATCH 08/21] Scaffold the block in the directory where the command is run. --- packages/create-block/lib/init-block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index 35f266fa6a464..be1f688a9e489 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -70,7 +70,7 @@ module.exports = async function ( outputTemplates, view ) { await Promise.all( Object.keys( outputTemplates ).map( async ( outputFile ) => { const pathName = view.blockOnly - ? join( process.cwd(), view.folderName, view.slug, outputFile ) + ? join( process.cwd(), view.slug, outputFile ) : join( view.folderName, outputFile ); await writeOutputTemplate( From 3d75b5575f67968d527c946b4b5cb7eaae5ad452 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 8 Aug 2022 13:45:32 -0400 Subject: [PATCH 09/21] Add changelog and readme entries for the new flag. --- packages/create-block/CHANGELOG.md | 2 ++ packages/create-block/README.md | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index b2a76d926ae65..510c22403e877 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- Add `--block-only` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642)) + ## 3.6.0 (2022-07-13) ### Enhancement diff --git a/packages/create-block/README.md b/packages/create-block/README.md index b7769488a6d02..5eac2002c0599 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -41,6 +41,7 @@ Options: ```bash -V, --version output the version number -t, --template project template type name; allowed values: "static" (default), "es5", the name of an external npm package, or the path to a local directory +--block-only scaffold a new block --namespace internal namespace for the block name --title display title for the block and the WordPress plugin --short-description short description for the block and the WordPress plugin From ecab1023ec1cad29073c5cffd4f94a6ba09e0760 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 9 Aug 2022 10:50:11 -0400 Subject: [PATCH 10/21] Change the flag to --no-plugin and adjust internal logic accordingly. --- packages/create-block/CHANGELOG.md | 2 +- packages/create-block/README.md | 2 +- packages/create-block/lib/index.js | 6 +++--- packages/create-block/lib/init-block.js | 8 ++++---- packages/create-block/lib/output.js | 2 +- packages/create-block/lib/scaffold.js | 27 ++++++++++++------------- 6 files changed, 23 insertions(+), 24 deletions(-) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 510c22403e877..dd63ca3d69eac 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,7 +2,7 @@ ## Unreleased -- Add `--block-only` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642)) +- Add `--no-plugin` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642)) ## 3.6.0 (2022-07-13) diff --git a/packages/create-block/README.md b/packages/create-block/README.md index 5eac2002c0599..eb542f85e9e98 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -41,7 +41,7 @@ Options: ```bash -V, --version output the version number -t, --template project template type name; allowed values: "static" (default), "es5", the name of an external npm package, or the path to a local directory ---block-only scaffold a new block +--no-plugin scaffold block files only --namespace internal namespace for the block name --title display title for the block and the WordPress plugin --short-description short description for the block and the WordPress plugin diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 7530440cb7598..ed76375e220fa 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -57,12 +57,12 @@ program 'disable integration with `@wordpress/scripts` package' ) .option( '--wp-env', 'enable integration with `@wordpress/env` package' ) - .option( '--block-only', 'scaffold only block files' ) + .option( '--no-plugin', 'scaffold only block files' ) .action( async ( slug, { - blockOnly, + plugin, category, namespace, shortDescription: description, @@ -78,7 +78,7 @@ program const defaultValues = getDefaultValues( pluginTemplate ); const optionsValues = pickBy( { - blockOnly, + plugin, category, description, namespace, diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index be1f688a9e489..149a1c6ca07ab 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -15,7 +15,7 @@ const { writeOutputTemplate } = require( './output' ); async function initBlockJSON( { $schema, apiVersion, - blockOnly, + plugin, slug, namespace, title, @@ -34,8 +34,8 @@ async function initBlockJSON( { info( '' ); info( 'Creating a "block.json" file.' ); - const outputFile = blockOnly - ? join( process.cwd(), folderName, slug, 'block.json' ) + const outputFile = ! plugin + ? join( process.cwd(), slug, 'block.json' ) : join( process.cwd(), slug, folderName, 'block.json' ); await makeDir( dirname( outputFile ) ); await writeFile( @@ -69,7 +69,7 @@ async function initBlockJSON( { module.exports = async function ( outputTemplates, view ) { await Promise.all( Object.keys( outputTemplates ).map( async ( outputFile ) => { - const pathName = view.blockOnly + const pathName = ! view.plugin ? join( process.cwd(), view.slug, outputFile ) : join( view.folderName, outputFile ); diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index 8ea05717fe535..d117cb11cb4c9 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -13,7 +13,7 @@ const writeOutputAsset = async ( inputFile, outputFile, view ) => { }; const writeOutputTemplate = async ( inputFile, outputFile, view ) => { - const outputFilePath = view.blockOnly + const outputFilePath = ! view.plugin ? outputFile : join( view.slug, outputFile.replace( /\$slug/g, view.slug ) ); await makeDir( dirname( outputFilePath ) ); diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 5306cf23eddfb..3d2c7f0e213e9 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -22,7 +22,7 @@ module.exports = async ( { $schema, apiVersion, - blockOnly, + plugin, namespace, slug, title, @@ -51,9 +51,9 @@ module.exports = async ( ) => { slug = slug.toLowerCase(); namespace = namespace.toLowerCase(); - const creationMessage = blockOnly - ? `Creating a new block in the "${ folderName }/${ slug }" directory.` - : `Creating a new WordPress plugin in the "${ slug }" directory.`; + const creationMessage = plugin + ? `Creating a new WordPress plugin in the "${ slug }" directory.` + : `Creating a new block in the "${ slug }" directory.`; info( '' ); info( creationMessage ); @@ -61,7 +61,7 @@ module.exports = async ( const view = { $schema, apiVersion, - blockOnly, + plugin, namespace, namespaceSnakeCase: snakeCase( namespace ), slug, @@ -92,8 +92,7 @@ module.exports = async ( style, }; - if ( ! blockOnly ) { - // If blockOnly exists, we don't need to scaffold the plugin files. + if ( plugin ) { await Promise.all( Object.keys( pluginOutputTemplates ).map( async ( outputFile ) => @@ -119,7 +118,7 @@ module.exports = async ( await initBlock( blockOutputTemplates, view ); - if ( ! blockOnly ) { + if ( plugin ) { await initPackageJSON( view ); if ( wpScripts ) { await initWPScripts( view ); @@ -131,12 +130,12 @@ module.exports = async ( } info( '' ); - const successMessage = blockOnly - ? `Done: Block "${ title }" bootstrapped in the "${ folderName }/${ slug }" directory.` - : `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.`; + const successMessage = plugin + ? `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.` + : `Done: Block "${ title }" bootstrapped in the "${ slug }" directory.`; success( successMessage ); - if ( ! blockOnly && wpScripts ) { + if ( plugin && wpScripts ) { info( '' ); info( 'You can run several commands inside:' ); info( '' ); @@ -165,13 +164,13 @@ module.exports = async ( info( '' ); code( ` $ cd ${ slug }` ); } - if ( ! blockOnly && wpScripts ) { + if ( plugin && wpScripts ) { info( '' ); info( 'You can start development with:' ); info( '' ); code( ' $ npm start' ); } - if ( ! blockOnly && wpEnv ) { + if ( plugin && wpEnv ) { info( '' ); info( 'You can start WordPress with:' ); info( '' ); From e7d24cc4c0d8b26ed3de239923b15402489e354c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 9 Aug 2022 12:06:33 -0400 Subject: [PATCH 11/21] Abstract messaging out. --- packages/create-block/lib/messaging.js | 42 ++++++++++++++++++++++++++ packages/create-block/lib/scaffold.js | 12 +++----- 2 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 packages/create-block/lib/messaging.js diff --git a/packages/create-block/lib/messaging.js b/packages/create-block/lib/messaging.js new file mode 100644 index 0000000000000..6165c4d7f25be --- /dev/null +++ b/packages/create-block/lib/messaging.js @@ -0,0 +1,42 @@ +const messages = { + create: { + plugin: 'Creating a new WordPress plugin in the slug directory.', + block: 'Creating a new block in the slug directory.', + }, + complete: { + plugin: 'Done: WordPress plugin title bootstrapped in the slug directory.', + block: 'Done: Block "title" bootstrapped in the slug directory.', + }, +}; + +/** + * Retrieve a message to display in the CLI + * + * @param {string} type The type of message to retrieve. i.e 'complete' + * @param {boolean} plugin A flag to indicate if the message should be plugin or block specific. + * @param {Object} placeholders An object of value to replace in the message + * + * @return {string} The final message to display + */ +const getMessage = ( type, plugin, placeholders = {} ) => { + const mode = plugin ? 'plugin' : 'block'; + let message = messages?.[ type ]?.[ mode ]; + + if ( typeof message === 'undefined' ) { + return ''; + } + + for ( const property in placeholders ) { + message = message.replace( + new RegExp( property, 'g' ), + placeholders[ property ] + ); + } + + return message; +}; + +module.exports = { + messages, + getMessage, +}; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 3d2c7f0e213e9..08b5f730c1a3a 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -12,6 +12,7 @@ const initWPScripts = require( './init-wp-scripts' ); const initWPEnv = require( './init-wp-env' ); const { code, info, success } = require( './log' ); const { writeOutputAsset, writeOutputTemplate } = require( './output' ); +const { getMessage } = require( './messaging' ); function upperFirst( str ) { return str.charAt( 0 ).toUpperCase() + str.substr( 1 ); @@ -51,12 +52,9 @@ module.exports = async ( ) => { slug = slug.toLowerCase(); namespace = namespace.toLowerCase(); - const creationMessage = plugin - ? `Creating a new WordPress plugin in the "${ slug }" directory.` - : `Creating a new block in the "${ slug }" directory.`; info( '' ); - info( creationMessage ); + info( getMessage( 'create', plugin, { slug } ) ); const view = { $schema, @@ -130,10 +128,8 @@ module.exports = async ( } info( '' ); - const successMessage = plugin - ? `Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.` - : `Done: Block "${ title }" bootstrapped in the "${ slug }" directory.`; - success( successMessage ); + + success( getMessage( 'complete', plugin, { title, slug } ) ); if ( plugin && wpScripts ) { info( '' ); From 286f9df8bc3143209df884859dd3b478a8de6ab4 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 9 Aug 2022 12:31:20 -0400 Subject: [PATCH 12/21] Add new customize message for blocks Don't display plugin customization prompts in --no-plugin mode. --- packages/create-block/lib/index.js | 63 ++++++++++++++------------ packages/create-block/lib/messaging.js | 8 ++++ 2 files changed, 42 insertions(+), 29 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index ed76375e220fa..4aca78a07e2b6 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -18,6 +18,7 @@ const { getDefaultValues, getPrompts, } = require( './templates' ); +const { getMessage } = require( './messaging' ); const commandName = `wp-create-block`; program @@ -100,9 +101,7 @@ program await scaffold( pluginTemplate, answers ); } else { log.info( '' ); - log.info( - "Let's customize your WordPress plugin with blocks:" - ); + log.info( getMessage( 'customize', plugin ) ); const filterOptionsProvided = ( { name } ) => ! Object.keys( optionsValues ).includes( name ); @@ -116,33 +115,39 @@ program ] ).filter( filterOptionsProvided ); const blockAnswers = await inquirer.prompt( blockPrompts ); - const pluginAnswers = await inquirer - .prompt( { - type: 'confirm', - name: 'configurePlugin', - message: - 'Do you want to customize the WordPress plugin?', - default: false, - } ) - .then( async ( { configurePlugin } ) => { - if ( ! configurePlugin ) { - return {}; - } + const pluginAnswers = plugin + ? await inquirer + .prompt( { + type: 'confirm', + name: 'configurePlugin', + message: + 'Do you want to customize the WordPress plugin?', + default: false, + } ) + .then( async ( { configurePlugin } ) => { + if ( ! configurePlugin ) { + return {}; + } + + const pluginPrompts = getPrompts( + pluginTemplate, + [ + 'pluginURI', + 'version', + 'author', + 'license', + 'licenseURI', + 'domainPath', + 'updateURI', + ] + ).filter( filterOptionsProvided ); + const result = await inquirer.prompt( + pluginPrompts + ); + return result; + } ) + : {}; - const pluginPrompts = getPrompts( pluginTemplate, [ - 'pluginURI', - 'version', - 'author', - 'license', - 'licenseURI', - 'domainPath', - 'updateURI', - ] ).filter( filterOptionsProvided ); - const result = await inquirer.prompt( - pluginPrompts - ); - return result; - } ); await scaffold( pluginTemplate, { ...defaultValues, ...optionsValues, diff --git a/packages/create-block/lib/messaging.js b/packages/create-block/lib/messaging.js index 6165c4d7f25be..1c8bedc3d8f95 100644 --- a/packages/create-block/lib/messaging.js +++ b/packages/create-block/lib/messaging.js @@ -7,6 +7,10 @@ const messages = { plugin: 'Done: WordPress plugin title bootstrapped in the slug directory.', block: 'Done: Block "title" bootstrapped in the slug directory.', }, + customize: { + plugin: "Let's customize your WordPress plugin with blocks:", + block: "Let's add a new block to your existing WordPress plugin:", + }, }; /** @@ -26,6 +30,10 @@ const getMessage = ( type, plugin, placeholders = {} ) => { return ''; } + if ( Object.keys( placeholders ).length === 0 ) { + return message; + } + for ( const property in placeholders ) { message = message.replace( new RegExp( property, 'g' ), From 85ab74f7172b2fac4b6cf972617fd3605de1a09f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 10 Aug 2022 09:52:23 -0400 Subject: [PATCH 13/21] Use lodash get instead of optional chaining as Node 12 doesn't support it. --- packages/create-block/lib/messaging.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/messaging.js b/packages/create-block/lib/messaging.js index 1c8bedc3d8f95..966b555549c65 100644 --- a/packages/create-block/lib/messaging.js +++ b/packages/create-block/lib/messaging.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +const { get } = require( 'lodash' ); + const messages = { create: { plugin: 'Creating a new WordPress plugin in the slug directory.', @@ -24,7 +29,7 @@ const messages = { */ const getMessage = ( type, plugin, placeholders = {} ) => { const mode = plugin ? 'plugin' : 'block'; - let message = messages?.[ type ]?.[ mode ]; + let message = get( messages, `${ type }.${ mode }` ); if ( typeof message === 'undefined' ) { return ''; From cf7c12e48f6712f65737364301308c6884035dc1 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 09:47:52 -0400 Subject: [PATCH 14/21] Update packages/create-block/CHANGELOG.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- packages/create-block/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index dd63ca3d69eac..500a76f1fba7e 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +### New Feature + - Add `--no-plugin` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642)) ## 3.6.0 (2022-07-13) From d87849c415c1962de2465abcd10ce77643bd25ee Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 15:32:27 -0400 Subject: [PATCH 15/21] Remove the messaging helper --- packages/create-block/lib/index.js | 7 +++- packages/create-block/lib/messaging.js | 55 -------------------------- packages/create-block/lib/scaffold.js | 13 ++++-- 3 files changed, 15 insertions(+), 60 deletions(-) delete mode 100644 packages/create-block/lib/messaging.js diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 4aca78a07e2b6..0037d5033e0e5 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -18,7 +18,6 @@ const { getDefaultValues, getPrompts, } = require( './templates' ); -const { getMessage } = require( './messaging' ); const commandName = `wp-create-block`; program @@ -101,7 +100,11 @@ program await scaffold( pluginTemplate, answers ); } else { log.info( '' ); - log.info( getMessage( 'customize', plugin ) ); + log.info( + plugin + ? "Let's customize your WordPress plugin with blocks:" + : "Let's add a new block to your existing WordPress plugin:" + ); const filterOptionsProvided = ( { name } ) => ! Object.keys( optionsValues ).includes( name ); diff --git a/packages/create-block/lib/messaging.js b/packages/create-block/lib/messaging.js deleted file mode 100644 index 966b555549c65..0000000000000 --- a/packages/create-block/lib/messaging.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * External dependencies - */ -const { get } = require( 'lodash' ); - -const messages = { - create: { - plugin: 'Creating a new WordPress plugin in the slug directory.', - block: 'Creating a new block in the slug directory.', - }, - complete: { - plugin: 'Done: WordPress plugin title bootstrapped in the slug directory.', - block: 'Done: Block "title" bootstrapped in the slug directory.', - }, - customize: { - plugin: "Let's customize your WordPress plugin with blocks:", - block: "Let's add a new block to your existing WordPress plugin:", - }, -}; - -/** - * Retrieve a message to display in the CLI - * - * @param {string} type The type of message to retrieve. i.e 'complete' - * @param {boolean} plugin A flag to indicate if the message should be plugin or block specific. - * @param {Object} placeholders An object of value to replace in the message - * - * @return {string} The final message to display - */ -const getMessage = ( type, plugin, placeholders = {} ) => { - const mode = plugin ? 'plugin' : 'block'; - let message = get( messages, `${ type }.${ mode }` ); - - if ( typeof message === 'undefined' ) { - return ''; - } - - if ( Object.keys( placeholders ).length === 0 ) { - return message; - } - - for ( const property in placeholders ) { - message = message.replace( - new RegExp( property, 'g' ), - placeholders[ property ] - ); - } - - return message; -}; - -module.exports = { - messages, - getMessage, -}; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 2c19575a31312..b221cb04624fd 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -12,7 +12,6 @@ const initWPScripts = require( './init-wp-scripts' ); const initWPEnv = require( './init-wp-env' ); const { code, info, success } = require( './log' ); const { writeOutputAsset, writeOutputTemplate } = require( './output' ); -const { getMessage } = require( './messaging' ); module.exports = async ( { blockOutputTemplates, pluginOutputTemplates, outputAssets }, @@ -50,7 +49,11 @@ module.exports = async ( namespace = namespace.toLowerCase(); info( '' ); - info( getMessage( 'create', plugin, { slug } ) ); + info( + plugin + ? `Creating a new WordPress plugin in the ${ slug } directory.` + : `Creating a new block in the ${ slug } directory.` + ); const view = { $schema, @@ -125,7 +128,11 @@ module.exports = async ( info( '' ); - success( getMessage( 'complete', plugin, { title, slug } ) ); + success( + plugin + ? `Done: WordPress plugin ${ title } bootstrapped in the ${ slug } directory.` + : `Done: Block "${ title }" bootstrapped in the ${ slug }directory.` + ); if ( plugin && wpScripts ) { info( '' ); From 3613d68cf53e028e381467b5bed8593306fed5ac Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 15:36:53 -0400 Subject: [PATCH 16/21] Remove negation logic in order to more clear. --- packages/create-block/lib/init-block.js | 12 ++++++------ packages/create-block/lib/output.js | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index 149a1c6ca07ab..fe0b50209347b 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -34,9 +34,9 @@ async function initBlockJSON( { info( '' ); info( 'Creating a "block.json" file.' ); - const outputFile = ! plugin - ? join( process.cwd(), slug, 'block.json' ) - : join( process.cwd(), slug, folderName, 'block.json' ); + const outputFile = plugin + ? join( process.cwd(), slug, folderName, 'block.json' ) + : join( process.cwd(), slug, 'block.json' ); await makeDir( dirname( outputFile ) ); await writeFile( outputFile, @@ -69,9 +69,9 @@ async function initBlockJSON( { module.exports = async function ( outputTemplates, view ) { await Promise.all( Object.keys( outputTemplates ).map( async ( outputFile ) => { - const pathName = ! view.plugin - ? join( process.cwd(), view.slug, outputFile ) - : join( view.folderName, outputFile ); + const pathName = view.plugin + ? join( view.folderName, outputFile ) + : join( process.cwd(), view.slug, outputFile ); await writeOutputTemplate( outputTemplates[ outputFile ], diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index d117cb11cb4c9..32b121b89f71d 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -13,9 +13,9 @@ const writeOutputAsset = async ( inputFile, outputFile, view ) => { }; const writeOutputTemplate = async ( inputFile, outputFile, view ) => { - const outputFilePath = ! view.plugin - ? outputFile - : join( view.slug, outputFile.replace( /\$slug/g, view.slug ) ); + const outputFilePath = view.plugin + ? join( view.slug, outputFile.replace( /\$slug/g, view.slug ) ) + : outputFile; await makeDir( dirname( outputFilePath ) ); writeFile( outputFilePath, render( inputFile, view ) ); }; From 58cfb3a494d6a888b71170e19cc374d4b4708ffe Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 16:12:32 -0400 Subject: [PATCH 17/21] Adding process.cwd() back as per code review. --- packages/create-block/lib/init-block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index fe0b50209347b..136efcb4cd0b7 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -70,7 +70,7 @@ module.exports = async function ( outputTemplates, view ) { await Promise.all( Object.keys( outputTemplates ).map( async ( outputFile ) => { const pathName = view.plugin - ? join( view.folderName, outputFile ) + ? join( process.cwd(), view.folderName, outputFile ) : join( process.cwd(), view.slug, outputFile ); await writeOutputTemplate( From 702362f70ab1e14481b64f584bf5a37fb75b12bd Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 16:13:25 -0400 Subject: [PATCH 18/21] Check to ensure that a template supports the blockTemplatesPath property. --- packages/create-block/lib/scaffold.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index b221cb04624fd..495585a896233 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -10,7 +10,7 @@ const initBlock = require( './init-block' ); const initPackageJSON = require( './init-package-json' ); const initWPScripts = require( './init-wp-scripts' ); const initWPEnv = require( './init-wp-env' ); -const { code, info, success } = require( './log' ); +const { code, info, success, error } = require( './log' ); const { writeOutputAsset, writeOutputTemplate } = require( './output' ); module.exports = async ( @@ -48,6 +48,18 @@ module.exports = async ( slug = slug.toLowerCase(); namespace = namespace.toLowerCase(); + /** + * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath). + * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that + * doesn't support it. + */ + if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) { + error( + 'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.' + ); + return; + } + info( '' ); info( plugin From 462af8af0eb078decabcb8858b44f27898513712 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 11 Aug 2022 16:25:36 -0400 Subject: [PATCH 19/21] Revert adding process.cwd() back. --- packages/create-block/lib/init-block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index 136efcb4cd0b7..fe0b50209347b 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -70,7 +70,7 @@ module.exports = async function ( outputTemplates, view ) { await Promise.all( Object.keys( outputTemplates ).map( async ( outputFile ) => { const pathName = view.plugin - ? join( process.cwd(), view.folderName, outputFile ) + ? join( view.folderName, outputFile ) : join( process.cwd(), view.slug, outputFile ); await writeOutputTemplate( From 9781f6fe651e6ec2e1e9dfe893f84bd6065e9c04 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 12 Aug 2022 10:10:05 -0400 Subject: [PATCH 20/21] Adds example to README. --- packages/create-block/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/create-block/README.md b/packages/create-block/README.md index 163ef46688d60..acb584ed3face 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -78,6 +78,13 @@ $ npx @wordpress/create-block --template ./path/to/template-directory $ npx @wordpress/create-block --help ``` +5. No plugin mode – it is also possible to scaffold only block files into the current directory. + + +```bash +$ npx @wordpress/create-block --no-plugin +``` + When you scaffold a block, you must provide at least a `slug` name, the `namespace` which usually corresponds to either the `theme` or `plugin` name. In most cases, we recommended pairing blocks with WordPress plugins rather than themes, because only using plugin ensures that all blocks still work when your theme changes. ## Available Commands From a64917aa93c6ef2bb70de0647579432613c1e59f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 15 Aug 2022 11:27:04 -0400 Subject: [PATCH 21/21] Make the slug prompt for universal --- packages/create-block/lib/prompts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/prompts.js b/packages/create-block/lib/prompts.js index 26f19ab2718bd..9807f2a61c9e1 100644 --- a/packages/create-block/lib/prompts.js +++ b/packages/create-block/lib/prompts.js @@ -8,7 +8,7 @@ const slug = { type: 'input', name: 'slug', message: - 'The block slug used for identification (also the plugin and output folder name):', + 'The block slug used for identification (also the output folder name):', validate( input ) { if ( ! /^[a-z][a-z0-9\-]*$/.test( input ) ) { return 'Invalid block slug specified. Block slug can contain only lowercase alphanumeric characters or dashes, and start with a letter.';