diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml new file mode 100644 index 0000000000000..fc9f51e5b20b8 --- /dev/null +++ b/.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 diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh new file mode 100755 index 0000000000000..e1073ce87d516 --- /dev/null +++ b/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 diff --git a/package.json b/package.json index 382bd3756fd8b..7aa809b901375 100644 --- a/package.json +++ b/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", diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 7164a92cc2855..9331cfb3208bd 100644 --- a/packages/create-block/CHANGELOG.md +++ b/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 diff --git a/packages/create-block/README.md b/packages/create-block/README.md index 579511ae7b329..1cb82a85bd9e8 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -43,6 +43,8 @@ Options: --title display title for the block --short-description short description for the block --category 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 ``` diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 9e219270ca028..082b21fee7888 100644 --- a/packages/create-block/lib/index.js +++ b/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 ', 'short description for the block' ) .option( '--category ', '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, diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js new file mode 100644 index 0000000000000..3ed9d619a8871 --- /dev/null +++ b/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 + ) + ); +}; diff --git a/packages/create-block/lib/init-wp-scripts.js b/packages/create-block/lib/init-wp-scripts.js index 15da1088346f7..ac2ec27d6ff87 100644 --- a/packages/create-block/lib/init-wp-scripts.js +++ b/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', { diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 5ccadb31a9a63..b6bf18921edee 100644 --- a/packages/create-block/lib/scaffold.js +++ b/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,7 +67,9 @@ module.exports = async ( } ) ); - if ( hasWPScriptsEnabled( blockTemplate ) ) { + await initPackageJSON( view ); + + if ( wpScripts ) { await initWPScripts( view ); } @@ -74,7 +77,7 @@ module.exports = async ( 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( '' ); diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 683f9e3b3855b..31cfc52c7028f 100644 --- a/packages/create-block/lib/templates.js +++ b/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, };