diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 1114f8206a7ad5..2d11903a9a4873 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -1,5 +1,9 @@ ## Master +### New Features + +- Add more CLI options: `--namespace`, `--title`, `--short-description` and `--category`. The goal is to make it easier to override default values used for scaffolding ([#21751](https://github.com/WordPress/gutenberg/pull/21751)). + ### Enhancements - Update `esnext` template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code. diff --git a/packages/create-block/README.md b/packages/create-block/README.md index dd528289509797..bd952cb515d4d7 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -33,13 +33,17 @@ The following command generates PHP, JS and CSS code for registering a block. $ npm init @wordpress/block [options] [slug] ``` -`[slug]` is optional. When provided it triggers the quick mode where it is used as the block slug used for its identification, the output location for scaffolded files, and the name of the WordPress plugin. The rest of the configuration is set to all default values. +`[slug]` is optional. When provided it triggers the quick mode where it is used as the block slug used for its identification, the output location for scaffolded files, and the name of the WordPress plugin. The rest of the configuration is set to all default values unless overriden with some of the options listed below. Options: -```bash --t, --template template type name, allowed values: "es5", "esnext" (default: "esnext") --V, --version output the version number --h, --help output usage information +``` +-V, --version output the version number +-t, --template template type name, allowed values: "es5", "esnext" (default: "esnext") +--namespace internal namespace for the block name +--title display title for the block +--short-description short description for the block +--category category name for the block +-h, --help output usage information ``` _Please note that `--version` and `--help` options don't work with `npm init`. You have to use `npx` instead, as presented in the examples._ diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 5b9cb24726b4fe..d4156437387bf8 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -3,7 +3,7 @@ */ const inquirer = require( 'inquirer' ); const program = require( 'commander' ); -const { startCase } = require( 'lodash' ); +const { pickBy, startCase } = require( 'lodash' ); /** * Internal dependencies @@ -20,9 +20,11 @@ program .name( commandName ) .description( 'Generates PHP, JS and CSS code for registering a block for a WordPress plugin.\n\n' + - '[slug] is optional. When provided it triggers the quick mode where it is used ' + - 'as the block slug used for its identification, the output location for scaffolded files, ' + - 'and the name of the WordPress plugin. The rest of the configuration is set to all default values.' + '[slug] is optional. When provided it triggers the quick mode where ' + + 'it is used as the block slug used for its identification, the output ' + + 'location for scaffolded files, and the name of the WordPress plugin.' + + 'The rest of the configuration is set to all default values unless ' + + 'overriden with some of the options listed below.' ) .version( version ) .arguments( '[slug]' ) @@ -31,39 +33,63 @@ program 'template type name, allowed values: "es5", "esnext"', 'esnext' ) - .action( async ( slug, { template } ) => { - await checkSystemRequirements( engines ); - try { - const defaultValues = getDefaultValues( template ); - if ( slug ) { - const answers = { - ...defaultValues, - slug, - // Transforms slug to title. - title: startCase( slug ), - }; - await scaffold( template, answers ); - } else { - const answers = await inquirer.prompt( getPrompts( template ) ); - await scaffold( template, { - ...defaultValues, - ...answers, + .option( '--namespace ', 'internal namespace for the block name' ) + .option( '--title ', 'display title for the block' ) + // The name "description" is used internally so it couldn't be used. + .option( '--short-description ', 'short description for the block' ) + .option( '--category ', 'category name for the block' ) + .action( + async ( + slug, + { category, namespace, shortDescription, template, title } + ) => { + await checkSystemRequirements( engines ); + try { + const defaultValues = getDefaultValues( template ); + const optionsValues = pickBy( { + category, + description: shortDescription, + namespace, + title, } ); - } - } catch ( error ) { - if ( error instanceof CLIError ) { - log.error( error.message ); - process.exit( 1 ); - } else { - throw error; + if ( slug ) { + const answers = { + ...defaultValues, + slug, + // Transforms slug to title as a fallback. + title: startCase( slug ), + ...optionsValues, + }; + await scaffold( template, answers ); + } else { + const propmpts = getPrompts( template ).filter( + ( { name } ) => + ! Object.keys( optionsValues ).includes( name ) + ); + const answers = await inquirer.prompt( propmpts ); + await scaffold( template, { + ...defaultValues, + ...optionsValues, + ...answers, + } ); + } + } catch ( error ) { + if ( error instanceof CLIError ) { + log.error( error.message ); + process.exit( 1 ); + } else { + throw error; + } } } - } ) + ) .on( '--help', function() { log.info( '' ); log.info( 'Examples:' ); log.info( ` $ ${ commandName }` ); log.info( ` $ ${ commandName } todo-list` ); - log.info( ` $ ${ commandName } --template es5 todo-list` ); + log.info( + ` $ ${ commandName } todo-list --template es5 --title "TODO List"` + ); } ) .parse( process.argv );