Testing: Add verification for Create Block to Continues Integration (#…

…23195)

* Create Block: Add control over @wordpress/scripts integration

* Tests: Add CI integration for Create Block

* Update create-block.yml

* Update changelog file

* Move test scenario for creating block to shell script

* Stylistic fixes

* Cleanup esnext-test directory after script is finished

Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

.github/workflows/create-block.yml

@@ -0,0 +1,26 @@
+name: Create Block
+
+on:
+  push:
+    paths:
+    - 'packages/**'
+    - '!packages/**/test/**'
+    - '!packages/**/*.md'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js 12.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 12.x
+    - name: npm install, build, format and lint
+      run: |
+        npm ci
+        npm run test:create-block
+      env:
+        CI: true

bin/test-create-block.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# This script validates whether `npm init @wordpress/block` works properly
+# with the latest changes applied to the `master` branch. It purposefully
+# avoids installing `@wordpress/scripts` package from npm when scaffolding
+# a test block and uses the local package by executing everything from the
+# root of the project.
+
+# Exit if any command fails.
+set -e
+
+DIRECTORY="$PWD"
+
+status () {
+	echo -e "\n\033[1;34m$1\033[0m\n"
+}
+
+cleanup() {
+	rm -rf "$DIRECTORY/esnext-test"
+}
+
+trap cleanup EXIT
+
+status "Scaffolding block..."
+npx wp-create-block esnext-test --no-wp-scripts
+cd esnext-test
+
+status "Formatting JavaScript files..."
+../node_modules/.bin/wp-scripts format-js
+
+status "Building block..."
+../node_modules/.bin/wp-scripts build
+
+status "Lintig CSS files..."
+../node_modules/.bin/wp-scripts lint-style
+
+status "Linting JavaScript files..."
+../node_modules/.bin/wp-scripts lint-js

package.json

@@ -227,6 +227,7 @@
 		"publish:patch": "npm run clean:package-types && npm run build:packages && lerna publish --dist-tag patch",
 		"publish:prod": "npm run clean:package-types && npm run build:packages && lerna publish",
 		"test": "npm run lint && npm run test-unit",
+		"test:create-block": "./bin/test-create-block.sh",
 		"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
 		"test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
 		"test-e2e:watch": "npm run test-e2e -- --watch",

packages/create-block/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+- Add new CLI options: `--no-wp-scripts` and `--wp-scripts` to let users override the settings that template defines for supports for `@wordpress/scripts` package integration ([#23195](https://github.com/WordPress/gutenberg/pull/23195)).
+
 ## 0.14.2 (2020-06-16)
 
 ### Bug Fix

packages/create-block/README.md

@@ -43,6 +43,8 @@ Options:
 --title <value>              display title for the block
 --short-description <value>  short description for the block
 --category <name>            category name for the block
+--wp-scripts                 enable integration with `@wordpress/scripts` package
+--no-wp-scripts              disable integration with `@wordpress/scripts` package
 -h, --help                   output usage information
 ```
 

packages/create-block/lib/index.js

@@ -42,6 +42,14 @@ program
 	// 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' )
+	.option(
+		'--wp-scripts',
+		'enable integration with `@wordpress/scripts` package'
+	)
+	.option(
+		'--no-wp-scripts',
+		'disable integration with `@wordpress/scripts` package'
+	)
 	.action(
 		async (
 			slug,
@@ -51,18 +59,24 @@ program
 				shortDescription: description,
 				template: templateName,
 				title,
+				wpScripts,
 			}
 		) => {
 			await checkSystemRequirements( engines );
 			try {
 				const blockTemplate = await getBlockTemplate( templateName );
 				const defaultValues = getDefaultValues( blockTemplate );
-				const optionsValues = pickBy( {
-					category,
-					description,
-					namespace,
-					title,
-				} );
+				const optionsValues = pickBy(
+					{
+						category,
+						description,
+						namespace,
+						title,
+						wpScripts,
+					},
+					( value ) => value !== undefined
+				);
+
 				if ( slug ) {
 					const answers = {
 						...defaultValues,

packages/create-block/lib/init-package-json.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+const { isEmpty, omitBy } = require( 'lodash' );
+const { join } = require( 'path' );
+const writePkg = require( 'write-pkg' );
+
+/**
+ * Internal dependencies
+ */
+const { info } = require( './log' );
+
+module.exports = async ( {
+	author,
+	description,
+	license,
+	slug,
+	version,
+	wpScripts,
+} ) => {
+	const cwd = join( process.cwd(), slug );
+
+	info( '' );
+	info( 'Creating a "package.json" file.' );
+	await writePkg(
+		cwd,
+		omitBy(
+			{
+				name: slug,
+				version,
+				description,
+				author,
+				license,
+				main: wpScripts && 'build/index.js',
+				scripts: wpScripts && {
+					build: 'wp-scripts build',
+					'format:js': 'wp-scripts format-js',
+					'lint:css': 'wp-scripts lint-style',
+					'lint:js': 'wp-scripts lint-js',
+					start: 'wp-scripts start',
+					'packages-update': 'wp-scripts packages-update',
+				},
+			},
+			isEmpty
+		)
+	);
+};

packages/create-block/lib/init-wp-scripts.js

@@ -2,43 +2,16 @@
  * External dependencies
  */
 const { command } = require( 'execa' );
-const { isEmpty, omitBy } = require( 'lodash' );
 const { join } = require( 'path' );
-const writePkg = require( 'write-pkg' );
 
 /**
  * Internal dependencies
  */
 const { info } = require( './log' );
 
-module.exports = async ( { author, description, license, slug, version } ) => {
+module.exports = async ( { slug } ) => {
 	const cwd = join( process.cwd(), slug );
 
-	info( '' );
-	info( 'Creating a "package.json" file.' );
-	await writePkg(
-		cwd,
-		omitBy(
-			{
-				name: slug,
-				version,
-				description,
-				author,
-				license,
-				main: 'build/index.js',
-				scripts: {
-					build: 'wp-scripts build',
-					'format:js': 'wp-scripts format-js',
-					'lint:css': 'wp-scripts lint-style',
-					'lint:js': 'wp-scripts lint-js',
-					start: 'wp-scripts start',
-					'packages-update': 'wp-scripts packages-update',
-				},
-			},
-			isEmpty
-		)
-	);
-
 	info( '' );
 	info( 'Installing packages. It might take a couple of minutes.' );
 	await command( 'npm install @wordpress/scripts --save-dev', {

packages/create-block/lib/scaffold.js

@@ -10,9 +10,9 @@ const { dirname } = require( 'path' );
 /**
  * Internal dependencies
  */
+const initPackageJSON = require( './init-package-json' );
 const initWPScripts = require( './init-wp-scripts' );
 const { code, info, success } = require( './log' );
-const { hasWPScriptsEnabled } = require( './templates' );
 
 module.exports = async (
 	blockTemplate,
@@ -27,6 +27,7 @@ module.exports = async (
 		license,
 		licenseURI,
 		version,
+		wpScripts,
 	}
 ) => {
 	slug = slug.toLowerCase();
@@ -66,15 +67,17 @@ module.exports = async (
 		} )
 	);
 
-	if ( hasWPScriptsEnabled( blockTemplate ) ) {
+	await initPackageJSON( view );
+
+	if ( wpScripts ) {
 		await initWPScripts( view );
 	}
 
 	info( '' );
 	success(
 		`Done: block "${ title }" bootstrapped in the "${ slug }" folder.`
 	);
-	if ( hasWPScriptsEnabled( blockTemplate ) ) {
+	if ( wpScripts ) {
 		info( '' );
 		info( 'Inside that directory, you can run several commands:' );
 		info( '' );

packages/create-block/lib/templates.js

@@ -19,8 +19,8 @@ const predefinedBlockTemplates = {
 			title: 'ES5 Example',
 			description:
 				'Example block written with ES5 standard and no JSX – no build step required.',
+			wpScripts: false,
 		},
-		wpScripts: false,
 	},
 	esnext: {
 		defaultValues: {
@@ -78,6 +78,7 @@ const getDefaultValues = ( blockTemplate ) => {
 		license: 'GPL-2.0-or-later',
 		licenseURI: 'https://www.gnu.org/licenses/gpl-2.0.html',
 		version: '0.1.0',
+		wpScripts: true,
 		...blockTemplate.defaultValues,
 	};
 };
@@ -92,13 +93,8 @@ const getPrompts = ( blockTemplate ) => {
 	} );
 };
 
-const hasWPScriptsEnabled = ( blockTemplate ) => {
-	return blockTemplate.wpScripts !== false;
-};
-
 module.exports = {
 	getBlockTemplate,
 	getDefaultValues,
 	getPrompts,
-	hasWPScriptsEnabled,
 };