Create Block: Make it easier to provide most popular CLI options

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.

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 <name> 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 <name> template type name, allowed values: "es5", "esnext" (default: "esnext")
+--namespace <value> internal namespace for the block name
+--title <value> display title for the block
+--short-description <value> short description for the block
+--category <name> 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._

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 <value>', 'internal namespace for the block name' )
+ .option( '--title <value>', 'display title for the block' )
+ // The name "description" is used internally so it couldn't be used.
+ .option( '--short-description <value>', 'short description for the block' )
+ .option( '--category <name>', '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 );