From d9f27a77fa95d0b2ca25b9c9282f95813511d6d2 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 Jun 2020 10:51:37 +0200 Subject: [PATCH 1/7] Create Block: Add control over @wordpress/scripts integration --- packages/create-block/README.md | 2 + packages/create-block/lib/index.js | 26 +++++++--- .../create-block/lib/init-package-json.js | 47 +++++++++++++++++++ packages/create-block/lib/init-wp-scripts.js | 29 +----------- packages/create-block/lib/scaffold.js | 9 ++-- packages/create-block/lib/templates.js | 8 +--- 6 files changed, 78 insertions(+), 43 deletions(-) create mode 100644 packages/create-block/lib/init-package-json.js 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, }; From 7eec2fed2ed5434e7c88222e360c32a4e18c1616 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 Jun 2020 10:51:59 +0200 Subject: [PATCH 2/7] Tests: Add CI integration for Create Block --- .github/workflows/create-block.yml | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .github/workflows/create-block.yml diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml new file mode 100644 index 0000000000000..44ba89d0c3167 --- /dev/null +++ b/.github/workflows/create-block.yml @@ -0,0 +1,28 @@ + + +name: Create Block + +on: [push] + +jobs: + build: + + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: 12.x + - name: npm install, build, and test + run: | + npm ci + npx wp-create-block esnext-test --no-wp-scripts + cd esnext-test + ../node_modules/.bin/wp-scripts format-js + ../node_modules/.bin/wp-scripts build + ../node_modules/.bin/wp-scripts lint-style + ../node_modules/.bin/wp-scripts lint-js + env: + CI: true From d1e7aa899bbc830b4634cbc5b28dceb2712ced83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Tue, 16 Jun 2020 16:42:03 +0200 Subject: [PATCH 3/7] Update create-block.yml --- .github/workflows/create-block.yml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 44ba89d0c3167..dc50bc74a7b59 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -2,7 +2,12 @@ name: Create Block -on: [push] +on: + push: + paths: + - 'packages/**' + - '!packages/**/test/**' + - '!packages/**/*.md' jobs: build: @@ -11,7 +16,7 @@ jobs: steps: - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js 12.x uses: actions/setup-node@v1 with: node-version: 12.x From c7293c0841fbd38e30353504b8c9b138cf4ef432 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 Jun 2020 17:19:00 +0200 Subject: [PATCH 4/7] Update changelog file --- packages/create-block/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) 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 From 4edffab94165f31d7706ec5f692fcddd54bc4a58 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 Jun 2020 17:38:05 +0200 Subject: [PATCH 5/7] Move test scenario for creating block to shell script --- .github/workflows/create-block.yml | 9 ++------- bin/test-create-block.sh | 31 ++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 34 insertions(+), 7 deletions(-) create mode 100755 bin/test-create-block.sh diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index dc50bc74a7b59..5ca64c5e7ed91 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -20,14 +20,9 @@ jobs: uses: actions/setup-node@v1 with: node-version: 12.x - - name: npm install, build, and test + - name: npm install, build, format and lint run: | npm ci - npx wp-create-block esnext-test --no-wp-scripts - cd esnext-test - ../node_modules/.bin/wp-scripts format-js - ../node_modules/.bin/wp-scripts build - ../node_modules/.bin/wp-scripts lint-style - ../node_modules/.bin/wp-scripts lint-js + 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..5294db1bfe3a2 --- /dev/null +++ b/bin/test-create-block.sh @@ -0,0 +1,31 @@ +#!/bin/bash + +# This script validates whether `npm init @wordpress/block` works properly +# with the latest changes applied to the `master` branch. It purpousfuly +# 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 + +status () { + echo -e "\n\033[1;34m$1\033[0m\n" +} + +status "Scaffolding block..." +rm -rf esnext-test +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", From 2dcfc7c574c6324554b1f3c7334a478efed62c7d Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 Jun 2020 22:17:13 +0200 Subject: [PATCH 6/7] Stylistic fixes --- .github/workflows/create-block.yml | 2 -- bin/test-create-block.sh | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 5ca64c5e7ed91..fc9f51e5b20b8 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -1,5 +1,3 @@ - - name: Create Block on: diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh index 5294db1bfe3a2..5d0b83b0b0b46 100755 --- a/bin/test-create-block.sh +++ b/bin/test-create-block.sh @@ -1,7 +1,7 @@ #!/bin/bash # This script validates whether `npm init @wordpress/block` works properly -# with the latest changes applied to the `master` branch. It purpousfuly +# 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. From 041ab1d14ffe052c127b56682862c524afa2eb43 Mon Sep 17 00:00:00 2001 From: Dominik Schilling Date: Wed, 17 Jun 2020 10:01:42 +0200 Subject: [PATCH 7/7] Cleanup esnext-test directory after script is finished --- bin/test-create-block.sh | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh index 5d0b83b0b0b46..e1073ce87d516 100755 --- a/bin/test-create-block.sh +++ b/bin/test-create-block.sh @@ -9,12 +9,19 @@ # 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..." -rm -rf esnext-test npx wp-create-block esnext-test --no-wp-scripts cd esnext-test