Create Block: Add optional support for wp-env (#28234)

WordPress · Jan 18, 2021 · e65d5cf · e65d5cf
1 parent 426ad17
commit e65d5cf
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 3 deletions.
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 -   Add support for handling static assets with the `assetsPath` field in the external template configuration ([#28038](https://github.com/WordPress/gutenberg/pull/28038)).
 -   Allow using locally installed packages with templates ([#28105](https://github.com/WordPress/gutenberg/pull/28105)).
+-   Add new CLI option `--wp-env` that lets users override the setting that template defines for integration with `@wordpress/env` package ([#28234](https://github.com/WordPress/gutenberg/pull/28234)).
 
 ### Internal
 

diff --git a/packages/create-block/README.md b/packages/create-block/README.md
@@ -47,6 +47,7 @@ Options:
 --category <name>            category name for the block
 --wp-scripts                 enable integration with `@wordpress/scripts` package
 --no-wp-scripts              disable integration with `@wordpress/scripts` package
+--wp-env                     enable integration with `@wordpress/env` package
 -h, --help                   output usage information
 ```
 
@@ -182,6 +183,7 @@ The following configurable variables are used with the template files. Template
 -   `licenseURI` (default: `'https://www.gnu.org/licenses/gpl-2.0.html'`)
 -   `version` (default: `'0.1.0'`)
 -   `wpScripts` (default: `true`)
+-   `wpEnv` (default: `false`)
 -   `npmDependencies` (default: `[]`) – the list of remote npm packages to be installed in the project with [`npm install`](https://docs.npmjs.com/cli/v6/commands/npm-install).
 -   `editorScript` (default: `'file:./build/index.js'`)
 -   `editorStyle` (default: `'file:./build/index.css'`)

diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js
@@ -50,6 +50,7 @@ program
 		'--no-wp-scripts',
 		'disable integration with `@wordpress/scripts` package'
 	)
+	.option( '--wp-env', 'enable integration with `@wordpress/env` package' )
 	.action(
 		async (
 			slug,
@@ -60,6 +61,7 @@ program
 				template: templateName,
 				title,
 				wpScripts,
+				wpEnv,
 			}
 		) => {
 			await checkSystemRequirements( engines );
@@ -73,6 +75,7 @@ program
 						namespace,
 						title,
 						wpScripts,
+						wpEnv,
 					},
 					( value ) => value !== undefined
 				);

diff --git a/packages/create-block/lib/init-wp-env.js b/packages/create-block/lib/init-wp-env.js
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+const { command } = require( 'execa' );
+const { join } = require( 'path' );
+const { writeFile } = require( 'fs' ).promises;
+
+/**
+ * Internal dependencies
+ */
+const { info } = require( './log' );
+
+module.exports = async ( { slug } ) => {
+	const cwd = join( process.cwd(), slug );
+
+	info( '' );
+	info(
+		'Installing `@wordpress/env` package. It might take a couple of minutes...'
+	);
+	await command( 'npm install @wordpress/env --save-dev', {
+		cwd,
+	} );
+
+	info( '' );
+	info( 'Configuring `@wordpress/env`...' );
+	await writeFile(
+		join( cwd, '.wp-env.json' ),
+		JSON.stringify(
+			{
+				core: 'WordPress/WordPress',
+				plugins: [ '.' ],
+			},
+			null,
+			'\t'
+		)
+	);
+};
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
@@ -13,6 +13,7 @@ const { dirname, join } = require( 'path' );
 const initBlockJSON = require( './init-block-json' );
 const initPackageJSON = require( './init-package-json' );
 const initWPScripts = require( './init-wp-scripts' );
+const initWPEnv = require( './init-wp-env' );
 const { code, info, success } = require( './log' );
 
 module.exports = async (
@@ -30,6 +31,7 @@ module.exports = async (
 		licenseURI,
 		version,
 		wpScripts,
+		wpEnv,
 		npmDependencies,
 		editorScript,
 		editorStyle,
@@ -94,6 +96,10 @@ module.exports = async (
 		await initWPScripts( view );
 	}
 
+	if ( wpEnv ) {
+		await initWPEnv( view );
+	}
+
 	info( '' );
 	success(
 		`Done: block "${ title }" bootstrapped in the "${ slug }" folder.`
@@ -119,11 +125,22 @@ module.exports = async (
 		info( '' );
 		code( '  $ npm run packages-update' );
 		info( '    Updates WordPress packages to the latest version.' );
+	}
+	info( '' );
+	info( 'To enter the folder type:' );
+	info( '' );
+	code( `  $ cd ${ slug }` );
+	if ( wpScripts ) {
+		info( '' );
+		info( 'You can start development with:' );
+		info( '' );
+		code( '  $ npm start' );
+	}
+	if ( wpEnv ) {
 		info( '' );
-		info( 'You can start by typing:' );
+		info( 'You can start WordPress with:' );
 		info( '' );
-		code( `  $ cd ${ slug }` );
-		code( `  $ npm start` );
+		code( '  $ npx wp-env start' );
 	}
 	info( '' );
 	info( 'Code is Poetry' );

diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
@@ -183,6 +183,7 @@ const getDefaultValues = ( blockTemplate ) => {
 		licenseURI: 'https://www.gnu.org/licenses/gpl-2.0.html',
 		version: '0.1.0',
 		wpScripts: true,
+		wpEnv: false,
 		npmDependencies: [],
 		editorScript: 'file:./build/index.js',
 		editorStyle: 'file:./build/index.css',