Docs: Clarify the interactive mode for create-block (#23752)

* Clarify the interactive mode for create-block * Clarify interactive mode * Update docs/designers-developers/developers/tutorials/create-block/readme.md Co-authored-by: Greg Ziółkowski <[email protected]> Co-authored-by: Greg Ziółkowski <[email protected]>
WordPress · Jul 7, 2020 · b77c569 · b77c569
1 parent 2305a40
commit b77c569
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -14,7 +14,7 @@ From your plugins directory, to create your block run:
 npx @wordpress/create-block starter-block
 ```
 
-The above command will ask you a few questions to customize, then will create a new directory called `starter-block`, installs the necessary files, and builds the block plugin.
+The above command creates a new directory called `starter-block`, installs the necessary files, and builds the block plugin. If you want an interactive mode that prompts you for details, run the command without the `starter-block` name.
 
 You now need to activate the plugin from inside wp-admin plugins page.
 

diff --git a/packages/create-block/README.md b/packages/create-block/README.md
@@ -15,11 +15,12 @@ Visit the [Gutenberg handbook](https://developer.wordpress.org/block-editor/deve
 ![Demo](https://make.wordpress.org/core/files/2020/02/74508276-f0648280-4efe-11ea-9cc0-a607b43d1bcf.gif)
 
 You just need to provide the `slug` which is the target location for scaffolded files and the internal block name.
-  ```bash
-  $ npm init @wordpress/block todo-list
-  $ cd todo-list
-  $ npm start
-  ```
+
+```bash
+$ npx @wordpress/create-block todo-list
+$ cd todo-list
+$ npm start
+```
 
 _(requires `node` version `10.0.0` or above, and `npm` version `6.9.0` or above)_
 
@@ -30,13 +31,14 @@ You don’t need to install or configure tools like [webpack](https://webpack.js
 The following command generates PHP, JS and CSS code for registering a block.
 
 ```bash
-$ npm init @wordpress/block [options] [slug]
+$ npx @wordpress/create-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 unless overriden with some of the options listed below.
 
 Options:
-```
+
+```sh
 -V, --version                output the version number
 -t, --template <name>        block template type name, allowed values: "es5", "esnext" (default: "esnext")
 --namespace <value>          internal namespace for the block name
@@ -52,18 +54,23 @@ _Please note that `--version` and `--help` options don't work with `npm init`. Y
 
 More examples:
 
-1. Interactive mode - it gives a chance to customize a few most important options before the code gets generated.
-  ```bash
-  $ npm init @wordpress/block
-  ```
+1. Interactive mode - without giving a project name, the script will run in interactive mode giving a chance to customize the important options before generating the files.
+
+```bash
+$ npx @wordpress/create-block
+```
+
 2. ES5 template – it is also possible to pick ES5 template when you don't want to deal with a build step (`npm start`) which enables ESNext and JSX support.
-  ```bash
-  $ npm init @wordpress/block --template es5
-  ```
+
+```bash
+$ npx @wordpress/create-block --template es5
+```
+
 3. Help – you need to use `npx` to output usage information.
-  ```bash
-  $ npx @wordpress/create-block --help
-  ```
+
+```bash
+$ npx @wordpress/create-block --help
+```
 
 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, and the `category`. In most cases, we recommended pairing blocks with plugins rather than themes, because only using plugin ensures that all blocks still work when your theme changes.
 
@@ -74,31 +81,37 @@ Inside that bootstrapped directory _(it doesn't apply to `es5` template)_, you c
 ```bash
 $ npm start
 ```
+
 Starts the build for development. [Learn more](/packages/scripts#start).
 
 ```bash
 $ npm run build
 ```
+
 Builds the code for production. [Learn more](/packages/scripts#build).
 
 ```bash
 $ npm run format:js
 ```
+
 Formats JavaScript files. [Learn more](/packages/scripts#format-js).
 
 ```bash
 $ npm run lint:css
 ```
+
 Lints CSS files. [Learn more](/packages/scripts#lint-style).
 
 ```bash
 $ npm run lint:js
 ```
+
 Lints JavaScript files. [Learn more](/packages/scripts#lint-js).
 
 ```bash
 $ npm run packages-update
 ```
+
 Updates WordPress packages to the latest version. [Learn more](/packages/scripts#packages-update).
 
 ## WP-CLI