Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 18, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/create-block/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions packages/create-block/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down Expand Up @@ -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'`)
Expand Down
3 changes: 3 additions & 0 deletions packages/create-block/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -60,6 +61,7 @@ program
template: templateName,
title,
wpScripts,
wpEnv,
}
) => {
await checkSystemRequirements( engines );
Expand All @@ -73,6 +75,7 @@ program
namespace,
title,
wpScripts,
wpEnv,
},
( value ) => value !== undefined
);
Expand Down
37 changes: 37 additions & 0 deletions packages/create-block/lib/init-wp-env.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
)
);
};
23 changes: 20 additions & 3 deletions packages/create-block/lib/scaffold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -30,6 +31,7 @@ module.exports = async (
licenseURI,
version,
wpScripts,
wpEnv,
npmDependencies,
editorScript,
editorStyle,
Expand Down Expand Up @@ -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.`
Expand All @@ -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' );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@noahtallen or @noisysocks, I chose to install @wordpress/env as a local package:
https://github.com/WordPress/gutenberg/blob/master/packages/env/README.md#installation-as-a-local-package

The documentation recommends putting it inside the scripts section. I skipped that in favor of:
npx wp-env start

I'm not sure what would be the best way here. I proposed we make wp-env integration with Create Block optional. How would you approach it? Global or local installation? Can you install it globally from the Node process in the first place?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Global install works via npm i -g @wordpress/env, which is then accessible on the CLI as wp-env

That said, for local projects which you know will support wp-env for the environment, I do like installing it locally. Then, you know exactly what version is available for everyone, and no one has to do yet another extra set up command, since wp-env is included already.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@noahtallen, thank you very much for the clarification. Everything is configured properly in that case 😄

}
info( '' );
info( 'Code is Poetry' );
Expand Down
1 change: 1 addition & 0 deletions packages/create-block/lib/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down