Create block: Add support for external templates hosted on npm #22175

fabiankaegy · 2020-05-07T14:22:50Z

Motivation

The biggest motivation to support templates comes from the fact that https://github.com/WordPress/gutenberg-examples contains multiple examples of blocks that are used in the block editor tutorials (https://developer.wordpress.org/block-editor/tutorials/block-tutorial/). The idea is that we make it easier for folks and let them running one command to install such block in the plugins directory in WordPress when going through the tutorial with one command:

npm init @wordpress/block -t 05-recipe-card-esnext

As of today, they need to either copy the folder from the repository or recreate it manually when going through the tutorial.

Description

With this PR I have introduced the ability to pull templates for the create-block package from npm. This would allow for anyone to contribute / use the starter template they would like with the ease of use the create-block cli provides.

External templates

The external templates need to contain the .mustache files and one template.json file with the metadata that is currently being stored in the templates.js file.

How has this been tested?

This is being tested by running node index.js with different -t parameters. To test things directly from NPM I have created this example package: https://www.npmjs.com/package/gutenberg-esnext-template

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

Merge Master back into fork

aaronjorbin

Love this. One thing that I think would be super helpful is an example added to the readme so that devs can see what a sample template npm package looks like.

packages/create-block/lib/templates.js

gziolo

Impressive work so far @fabiankaegy. I'm really excited about this feature 💯

I left quite detailed feedback. Let me know how you feel about it.

packages/create-block/lib/index.js

packages/create-block/lib/templates.js

gziolo · 2020-05-08T08:21:51Z

packages/create-block/README.md


-Inside that bootstrapped directory _(it doesn't apply to `es5` template)_, you can run several commands:
+When bootstraped with the `esnext` templateyou can run several commands inside the directory:


One more thing, wpScriptsEnabled enables those commands. Once we sort out the final shape of template definition we can update this section to reflect it.

@gziolo Yes the commands get enabled by wpScriptsEnabled but at the end it matters what the creator of the template has in their scripts in the package.json.

Thats why I changed it to only refer to the esnext template.

gziolo · 2020-05-08T08:23:01Z

packages/create-block/README.md

+        "style.css",
+        "readme.txt"
+    ],
+    "wpScriptsEnabled": true


For the future PR:

Thinking about it now when documented, it should be opt-out rather than opt-in, we want people to use wp-scripts :)

gziolo · 2020-05-08T08:25:19Z

packages/create-block/README.md

+        "licenseURI": "https://www.gnu.org/licenses/gpl-2.0.html",
+        "version": "0.1.0"
+    },
+    "outputFiles": [


For the future PR:

I'm very interested to find a way to automate the discovery of templates with glob call or something like this. It would be great to be able to default to templates folder that the template author can override:

{ "templatesFolder": "./my-folder" }

fabiankaegy · 2020-05-08T09:25:30Z

@gziolo I have fixed / implemented the suggestions you provided. I'm still struggling with the cleanup of the temp folder. (But it is now located in the os temp folder)

fabiankaegy · 2020-05-08T17:08:01Z

For the future PR:

I think it could be interesting to refactor wpScriptsEnabled to a more general buildSystem where you have the option to provide the name of npm scripts to run directly after the installation.

Usecase:
If a template uses something different from webpack or even if it uses Wordpress script but wants to rename the name of the individual scripts they could provide the name of the scripts to run after installation to build it.

Example:

template.json

{
    ...,
    "buildProject": true,
    "buildCommand": "custom name"
}

Wit this the scaffold tool would then run npm install and npm run custom name afterwards.

gziolo · 2020-05-08T18:18:02Z

I think it could be interesting to refactor wpScriptsEnabled to a more general buildSystem where you have the option to provide the name of npm scripts to run directly after the installation.

I was thinking about that as well. The simplest approach would be to use scripts property:

when not set, it uses the default
when set to an empty value like null or {} it works the same way as wpScriptsEnabled: false today
when set to { test: "my-custom-command" } the author of the template needs to provide all scripts

In #22235, I tried to flip the flag and make wp-scripts enabled by default. Now, I tempted to implement what I outlined above in another PR. Any concerns regarding this proposal?

gziolo · 2020-05-11T09:03:06Z

packages/create-block/README.md

+- `namespaceSnakeCase`
+- `slugSnakeCase`


namespaceSnakeCase and slugSnakeCase ar sort of special here. We should omit them and find a way to apply those modifications inside the template.

gziolo · 2020-05-11T09:07:26Z

packages/create-block/lib/index.js

@@ -45,7 +45,7 @@ program
 		) => {
 			await checkSystemRequirements( engines );
 			try {
-				const defaultValues = getDefaultValues( template );
+				const defaultValues = await getDefaultValues( template );


The fact that all methods need to be converted to async here is a bit concerning. I'm coming to the conclusion that we should call async getTemplate( templateName ); first and then pass the object to all other methods. This way we avoid converting all methods to async, plus there is no need to check whether we don't download the template multiple time, or process it. I'm happy to apply all refactoring in the related PR I opened earlier.

gziolo · 2020-05-11T09:11:31Z

When I run npm i, I can see local changes applied, so you should run it as well and commit.

Before, it would be nice to align the version of uuid with what the project defines:

gutenberg/package.json

Line 182 in f6a401b

"uuid": "7.0.2",

Later, we can update it for the whole project.

gziolo · 2020-05-11T09:13:56Z

I test it locally with:

$ npx wp-create-block -t gutenberg-esnext-template

and it magically works. Super exciting 🎉

packages/create-block/README.md

packages/create-block/lib/index.js

packages/create-block/lib/scaffold.js

packages/create-block/lib/templates.js

gziolo · 2020-05-13T15:18:38Z

@fabiankaegy, I landed #22235 so you can expect some conflicts when rebasing but in general, it should be easier to integrate with 3rd party templates.

fabiankaegy · 2020-05-13T15:20:24Z

@fabiankaegy, I landed #22235 so you can expect some conflicts when rebasing but in general, it should be easier to integrate with 3rd party templates.

Cool 👍 I saw that you integrated it and I will make sure to go over the changes and also fix @aduth's suggestions :)

Co-authored-by: Andrew Duthie <[email protected]>

gziolo · 2020-07-06T13:55:57Z

Work continues in #23712.

fabiankaegy and others added 3 commits April 29, 2020 20:23

Merge pull request #1 from WordPress/master

e324e8e

Merge Master back into fork

initial working implementation

48c7ee1

cleanup functions

14611a3

gziolo self-requested a review May 7, 2020 16:28

gziolo added [Tool] Create Block /packages/create-block [Type] Enhancement A suggestion for improvement. [Status] In Progress Tracking issues with work in progress labels May 7, 2020

gziolo requested a review from mkaz May 7, 2020 16:42

gziolo assigned fabiankaegy May 7, 2020

gziolo mentioned this pull request May 7, 2020

Discussion: Next Steps for Block Creation Documentation #22151

Closed

20 tasks

aaronjorbin reviewed May 8, 2020

View reviewed changes

packages/create-block/lib/templates.js Outdated Show resolved Hide resolved

fabiankaegy added 5 commits May 8, 2020 06:50

fix getPrompts

3714b20

fix improve error message

b0b617f

add template to prompts

e81dd27

fix remove unneccecary call of checkIsCoreTemplate

db93598

add documentation for external package support

4b55cdf

gziolo reviewed May 8, 2020

View reviewed changes

gziolo changed the title ~~Add external templates to create block DRAFT~~ Create block: Add support for external templates hosted on npm May 8, 2020

gziolo requested a review from oandregal May 8, 2020 08:20

gziolo reviewed May 8, 2020

View reviewed changes

fabiankaegy added 2 commits May 8, 2020 11:09

fix linting errors

62811e3

fix suggetions from @gziolo

11072bf

fabiankaegy requested a review from gziolo May 8, 2020 09:25

remove template from prompts

7036078

gziolo mentioned this pull request May 8, 2020

Create Block: Simplify the process of defining a config for templates #22235

Merged

3 tasks

fabiankaegy added 4 commits May 9, 2020 18:42

fix use correct temp folder across the board

4b0b246

fix remove temp folder after done with scaffold

86f7327

fix hasWPScriptsEnabled to be async

083a990

fix has wpScriptsEnabled

ea9dc1b

gziolo reviewed May 11, 2020

View reviewed changes

aduth reviewed May 12, 2020

View reviewed changes

packages/create-block/README.md Outdated Show resolved Hide resolved

packages/create-block/README.md Outdated Show resolved Hide resolved

aduth reviewed May 12, 2020

View reviewed changes

packages/create-block/lib/index.js Outdated Show resolved Hide resolved

packages/create-block/lib/scaffold.js Outdated Show resolved Hide resolved

packages/create-block/lib/templates.js Outdated Show resolved Hide resolved

fabiankaegy and others added 6 commits May 15, 2020 09:19

Update packages/create-block/lib/templates.js

5be44cc

Co-authored-by: Andrew Duthie <[email protected]>

Update packages/create-block/README.md

22cdbb3

Co-authored-by: Andrew Duthie <[email protected]>

Update packages/create-block/README.md

fac8b18

Co-authored-by: Andrew Duthie <[email protected]>

fix typos

0a7169e

fix spelling of overridden

06a3051

resolved merge conflicts

574f212

gziolo mentioned this pull request Jul 6, 2020

Create block: Add support for external templates installed from npm #23712

Merged

gziolo closed this Jul 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create block: Add support for external templates hosted on npm #22175

Create block: Add support for external templates hosted on npm #22175

fabiankaegy commented May 7, 2020 •

edited by gziolo

Loading

aaronjorbin left a comment

gziolo left a comment

gziolo May 8, 2020

fabiankaegy May 8, 2020 •

edited

Loading

gziolo May 8, 2020 •

edited

Loading

gziolo May 8, 2020 •

edited

Loading

fabiankaegy commented May 8, 2020

fabiankaegy commented May 8, 2020

gziolo commented May 8, 2020 •

edited

Loading

gziolo May 11, 2020

gziolo May 11, 2020

gziolo commented May 11, 2020

gziolo commented May 11, 2020 •

edited

Loading

gziolo commented May 13, 2020

fabiankaegy commented May 13, 2020

gziolo commented Jul 6, 2020


		Inside that bootstrapped directory _(it doesn't apply to `es5` template)_, you can run several commands:
		When bootstraped with the `esnext` templateyou can run several commands inside the directory:

Create block: Add support for external templates hosted on npm #22175

Create block: Add support for external templates hosted on npm #22175

Conversation

fabiankaegy commented May 7, 2020 • edited by gziolo Loading

Motivation

Description

External templates

How has this been tested?

Types of changes

Checklist:

aaronjorbin left a comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

gziolo May 8, 2020

Choose a reason for hiding this comment

fabiankaegy May 8, 2020 • edited Loading

Choose a reason for hiding this comment

gziolo May 8, 2020 • edited Loading

Choose a reason for hiding this comment

gziolo May 8, 2020 • edited Loading

Choose a reason for hiding this comment

fabiankaegy commented May 8, 2020

fabiankaegy commented May 8, 2020

gziolo commented May 8, 2020 • edited Loading

gziolo May 11, 2020

Choose a reason for hiding this comment

gziolo May 11, 2020

Choose a reason for hiding this comment

gziolo commented May 11, 2020

gziolo commented May 11, 2020 • edited Loading

gziolo commented May 13, 2020

fabiankaegy commented May 13, 2020

gziolo commented Jul 6, 2020

fabiankaegy commented May 7, 2020 •

edited by gziolo

Loading

fabiankaegy May 8, 2020 •

edited

Loading

gziolo May 8, 2020 •

edited

Loading

gziolo May 8, 2020 •

edited

Loading

gziolo commented May 8, 2020 •

edited

Loading

gziolo commented May 11, 2020 •

edited

Loading