Scripts: Add create-block script for bootstrapping a minimal block development plugin.

packages/scripts/README.md

@@ -117,6 +117,20 @@ _Flags_:
 - `--gpl2`: Validates against [GPLv2 license compatibility](https://www.gnu.org/licenses/license-list.en.html)
 - `--ignore=a,b,c`: A comma-separated set of package names to ignore for validation. This is intended to be used primarily in cases where a dependency’s `license` field is malformed. It’s assumed that any `ignored` package argument would be manually vetted for compatibility by the project owner.
 
+### `create-block`
+
+Takes a new name for a block and creates a minimal plugin development environment for it in the current working directory.
+
+_Example:_
+
+```sh
+$ wp-scripts create-block "My Fancy Block"
+$ cd ./my-fancy-block-plugin
+$ npm install
+$ npm run start # Start WordPress instance.
+$ npm run dev # Build and watch files.
+```
+
 ### `env`
 
 `env` is a family of scripts for setting up a local Docker-based development environment that plugin contributors can work in.

packages/scripts/package.json

@@ -45,6 +45,7 @@
 		"cross-spawn": "^5.1.0",
 		"decompress-zip": "^0.2.2",
 		"eslint": "^6.1.0",
+		"fs-extra": "^8.1.0",
 		"jest": "^24.7.1",
 		"jest-puppeteer": "^4.3.0",
 		"js-yaml": "^3.13.1",
@@ -53,6 +54,7 @@
 		"npm-package-json-lint": "^4.0.3",
 		"puppeteer": "^2.0.0",
 		"read-pkg-up": "^1.0.1",
+		"replace-in-file": "^4.2.0",
 		"request": "^2.88.0",
 		"resolve-bin": "^0.4.0",
 		"source-map-loader": "^0.2.4",

packages/scripts/scripts/create-block.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+const { kebabCase } = require( 'lodash' );
+const { copy } = require( 'fs-extra' );
+const replaceInFile = require( 'replace-in-file' );
+
+/**
+ * Internal dependencies
+ */
+const { getArgsFromCLI, fromTemplatesRoot } = require( '../utils' );
+
+const blockTitle = getArgsFromCLI()[ 0 ];
+if ( ! blockTitle ) {
+	process.stdout.write( 'No block name provided.' );
+	process.exit( 1 );
+}
+const blockName = kebabCase( blockTitle );
+const pluginName = `${ blockName }-plugin`;
+const pluginPath = `./${ pluginName }`
+
+;( async () => {
+	await copy( fromTemplatesRoot( 'block-plugin' ), pluginPath );
+	await replaceInFile( {
+		files: `${ pluginPath }/**`,
+		from: [
+			/block(_|-)plugin\1block\1title/g,
+			/block(_|-)plugin\1block\1name/g,
+			/block(_|-)plugin\1name/g,
+		],
+		to: [ blockTitle, blockName, pluginName ],
+	} );
+} )();

packages/scripts/templates/block-plugin/.gitignore

@@ -0,0 +1,5 @@
+# Dependencies
+/node_modules/
+
+# Build
+/build/

packages/scripts/templates/block-plugin/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "block-plugin-name",
+	"version": "1.0.0",
+	"main": "plugin.php",
+	"scripts": {
+		"start": "wp-env start",
+		"dev": "wp-scripts start",
+		"build": "wp-scripts build"
+	},
+	"license": "GPL-2.0-or-later",
+	"devDependencies": {
+		"@wordpress/env": "^0.1.0",
+		"@wordpress/scripts": "^6.0.0"
+	}
+}

packages/scripts/templates/block-plugin/plugin.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Plugin Name: block_plugin_name
+ * Version: 1.0.0
+ * License: GPL2+
+ * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
+ *
+ * @package block_plugin_name
+ */
+
+/**
+ * Enqueue editor and front end assets.
+ *
+ * @since 1.0.0
+ */
+function block_plugin_name_enqueue_block_assets() {
+	wp_enqueue_style(
+		'block_plugin_name-css',
+		plugins_url( 'src/style.css', __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . 'src/style.css' )
+	);
+}
+add_action( 'enqueue_block_assets', 'block_plugin_name_enqueue_block_assets' );
+
+/**
+ * Enqueue editor assets.
+ *
+ * @since 1.0.0
+ */
+function block_plugin_name_enqueue_block_editor_assets() {
+	wp_enqueue_script(
+		'block_plugin_name-js',
+		plugins_url( 'build/index.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-element' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
+	);
+	wp_enqueue_style(
+		'block_plugin_name-editor-css',
+		plugins_url( 'src/editor.css', __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . 'src/editor.css' )
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'block_plugin_name_enqueue_block_editor_assets' );

packages/scripts/templates/block-plugin/src/editor.css

@@ -0,0 +1 @@
+/* Styles exclusively for the editor. */

packages/scripts/templates/block-plugin/src/index.js

@@ -0,0 +1,12 @@
+/* global wp */
+/**
+ * WordPress dependencies
+ */
+const { registerBlockType } = wp.blocks;
+
+registerBlockType( 'block-plugin-name/block-plugin-block-name', {
+	title: 'block-plugin-block-title',
+	category: 'common',
+	edit: () => <div>Editor</div>,
+	save: () => <div>Front End</div>,
+} );

packages/scripts/templates/block-plugin/src/style.css

@@ -0,0 +1 @@
+/* Styles shared between the editor and the front end. */

packages/scripts/utils/file.js

@@ -18,6 +18,9 @@ const hasProjectFile = ( fileName ) =>
 const fromConfigRoot = ( fileName ) =>
 	path.join( path.dirname( __dirname ), 'config', fileName );
 
+const fromTemplatesRoot = ( fileName ) =>
+	path.join( path.dirname( __dirname ), 'templates', fileName );
+
 const fromScriptsRoot = ( scriptName ) =>
 	path.join( path.dirname( __dirname ), 'scripts', `${ scriptName }.js` );
 
@@ -26,6 +29,7 @@ const hasScriptFile = ( scriptName ) =>
 
 module.exports = {
 	fromConfigRoot,
+	fromTemplatesRoot,
 	fromScriptsRoot,
 	hasProjectFile,
 	hasScriptFile,