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: Code quality improvements for the block scaffolding #19867

Merged
merged 10 commits into from
Jan 31, 2020
Merged

Create block: Code quality improvements for the block scaffolding #19867

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
edd9c69
Create block: Code quality improvements for the block scaffolding
gziolo Jan 24, 2020
4029e21
Improve the strucutre and handling of templates
gziolo Jan 27, 2020
0bf1b0a
Ensure that package-lock.json file is refreshed with the changes from…
gziolo Jan 27, 2020
e368568
Docs: Add a note about version and help options
gziolo Jan 30, 2020
508516e
Code style: Run Prettier formatting on the package files
gziolo Jan 30, 2020
12dcd3d
Create block: Align .editorconfig with Gutenberg settings
gziolo Jan 30, 2020
560492c
Fix: Use the description provided to fill the `description` field in …
gziolo Jan 30, 2020
4136dd2
Fix: Ensure that values provided for slug and namespace get converted…
gziolo Jan 30, 2020
c753f37
Fix: Simplify the logic for transforming slug to title
gziolo Jan 30, 2020
3cdfd93
Update packages/create-block/lib/templates.js
gziolo Jan 31, 2020
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
Prev Previous commit
Next Next commit
Code style: Run Prettier formatting on the package files
  • Loading branch information
@gziolo
gziolo committed Jan 30, 2020
commit 508516e8824ed10420023df81d82f0841e56aedc
22 changes: 11 additions & 11 deletions packages/create-block/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,30 @@ const CLIError = require( './cli-error' );
const log = require( './log' );
const { version } = require( '../package.json' );
const scaffold = require( './scaffold' );
const {
getDefaultValues,
getPrompts,
} = require( './templates' );
const { getDefaultValues, getPrompts } = require( './templates' );

const commandName = `wp-create-block`;
program
.name( commandName )
.description(
'Generates PHP, JS and CSS code for registering a block for a WordPress plugin.\n\n' +
'[slug] is optional. When provided it triggers the quick mode where it is used ' +
'as the block slug used for its identification, the output location for scaffolded files, ' +
'and the name of the WordPress plugin. The rest of the configuration is set to all default values.'
'[slug] is optional. When provided it triggers the quick mode where it is used ' +
'as the block slug used for its identification, the output location for scaffolded files, ' +
'and the name of the WordPress plugin. The rest of the configuration is set to all default values.'
)
.version( version )
.arguments( '[slug]' )
.option( '-t, --template <name>', 'template type name, allowed values: "es5", "esnext"', 'esnext' )
.option(
'-t, --template <name>',
'template type name, allowed values: "es5", "esnext"',
'esnext'
)
.action( async ( slug, { template } ) => {
try {
const defaultValues = getDefaultValues( template );
if ( slug ) {
const title = defaultValues.slug === slug ?
defaultValues.title :
startCase( slug.replace( /-/, ' ' ) );
const title =
defaultValues.slug === slug ? defaultValues.title : startCase( slug.replace( /-/, ' ' ) );
const answers = {
...defaultValues,
slug,
Expand Down
3 changes: 1 addition & 2 deletions packages/create-block/lib/prompts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ const dashicon = {
return true;
},
filter( input ) {
return input &&
input.replace( /dashicon(s)?-/, '' );
return input && input.replace( /dashicon(s)?-/, '' );
},
};

Copy link
Member

Choose a reason for hiding this comment

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

I missed it the first time around, but just to be aware: There are proposed revisions to the set of block categories being discussed/proposed at #19279.

I have no good solutions to offer, but it would be nice if we could avoid hard-coding this. I guess we can just come back and update it when the time comes.

Expand Down
20 changes: 5 additions & 15 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,17 +13,10 @@ const initWPScripts = require( './init-wp-scripts' );
const { code, info, success } = require( './log' );
const { hasWPScriptsEnabled, getOutputFiles } = require( './templates' );

module.exports = async function( templateName, {
namespace,
slug,
title,
description,
dashicon,
category,
author,
license,
version,
} ) {
module.exports = async function(
templateName,
{ namespace, slug, title, description, dashicon, category, author, license, version }
) {
info( '' );
info( `Creating a new WordPress block in "${ slug }" folder.` );

Expand All @@ -49,10 +42,7 @@ module.exports = async function( templateName, {
// Output files can have names that depend on the slug provided.
const outputFilePath = `${ slug }/${ file.replace( /\$slug/g, slug ) }`;
await makeDir( dirname( outputFilePath ) );
writeFile(
outputFilePath,
render( template, view )
);
writeFile( outputFilePath, render( template, view ) );
} )
);

Expand Down
14 changes: 4 additions & 10 deletions packages/create-block/lib/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,15 @@ const templates = {
license,
version,
},
outputFiles: [
'.editorconfig',
'editor.css',
'index.js',
'$slug.php',
'style.css',
],
outputFiles: [ '.editorconfig', 'editor.css', 'index.js', '$slug.php', 'style.css' ],
Copy link
Member

Choose a reason for hiding this comment

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

Still think we could just iterate over (recurse into) what exists in the folder itself, rather than explicitly list them (seems redundant). Basically seems like the idea is to copy the template folder, then apply the templating and rename the file to remove the .mustache suffix.

Could be done separately.

Copy link
Member Author

Choose a reason for hiding this comment

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

I didn’t fully understood it before. I like the idea a lot and I’ll explore options. Really cool 👍

},
esnext: {
defaultValues: {
namespace,
slug: 'esnext-example',
title: 'ESNext Example',
description: 'Example block written with ESNext standard and JSX support – build step required.',
description:
'Example block written with ESNext standard and JSX support – build step required.',
dashicon,
category,
author,
Expand All @@ -59,8 +54,7 @@ const templates = {
const getTemplate = ( templateName ) => {
if ( ! templates[ templateName ] ) {
throw new CliError(
'Invalid template type name.' +
` Allowed values: ${ Object.keys( templates ).join( ', ' ) }.`
'Invalid template type name.' + ` Allowed values: ${ Object.keys( templates ).join( ', ' ) }.`
);
}
return templates[ templateName ];
Expand Down