Create block: Add support for external templates installed from npm

[gziolo]

Description

Replaces #22175 and continues work started by @fabiankaegy. Description copied over:

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.

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.

To make it easier to use the existing @wordpress/lazy-import package, we better use index.js file (or anything that main field allows overriding) as an entry point for the package that contains all definitions.

Template Configuration

It is mandatory to provide the main file for the package that returns a configuration object. It must contain at least templatesPath field with the path pointing to the location where template files live (nested folders are also supported).

Example:

module.exports = {
	templatesPath: __dirname,
};

It's a bit unfortunate that templatesPath has to be explicitly set but @wordpress/lazy-import package would require some further development first to make the discovery automatic for external packages.

It is also possible to override the default template configuration using the defaultValues field.

Example:

module.exports = {
	defaultValues: {
		slug: 'my-fantastic-block',
		title: 'My fantastic block',
		dashicon: 'palmtree',
		version: '1.2.3',
	},
	templatesPath: __dirname,
};

How has this been tested?

This is being tested by running npx wp-create-block with different --template (or -t) parameters.

To test things directly from NPM you can use two test templates:

1. wp-block-directory-template from @gziolo - a copy of ESNext template with some changes to default values:

$ npx wp-create-block --template wp-block-directory-template

2. gutenberg-esnext-template from @fabiankaegy:

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

[github-actions]

Size Change: 0 B

Total Size: 1.21 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.78 kB	0 B
build/api-fetch/index.js	3.45 kB	0 B
build/autop/index.js	2.84 kB	0 B
build/blob/index.js	665 B	0 B
build/block-directory/index.js	8.72 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	133 kB	0 B
build/block-editor/style-rtl.css	11.2 kB	0 B
build/block-editor/style.css	11.2 kB	0 B
build/block-library/editor-rtl.css	9.01 kB	0 B
build/block-library/editor.css	9.01 kB	0 B
build/block-library/index.js	146 kB	0 B
build/block-library/style-rtl.css	7.97 kB	0 B
build/block-library/style.css	7.96 kB	0 B
build/block-library/theme-rtl.css	792 B	0 B
build/block-library/theme.css	793 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	48.1 kB	0 B
build/components/index.js	172 kB	0 B
build/components/style-rtl.css	15.3 kB	0 B
build/components/style.css	15.2 kB	0 B
build/compose/index.js	9.81 kB	0 B
build/core-data/index.js	12.5 kB	0 B
build/data-controls/index.js	772 B	0 B
build/data/index.js	8.77 kB	0 B
build/date/index.js	31.8 kB	0 B
build/deprecated/index.js	768 B	0 B
build/dom-ready/index.js	571 B	0 B
build/dom/index.js	4.46 kB	0 B
build/edit-navigation/index.js	11.2 kB	0 B
build/edit-navigation/style-rtl.css	881 B	0 B
build/edit-navigation/style.css	885 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.41 kB	0 B
build/edit-post/style.css	6.39 kB	0 B
build/edit-site/index.js	22.5 kB	0 B
build/edit-site/style-rtl.css	3.91 kB	0 B
build/edit-site/style.css	3.91 kB	0 B
build/edit-widgets/index.js	26.3 kB	0 B
build/edit-widgets/style-rtl.css	3.12 kB	0 B
build/edit-widgets/style.css	3.12 kB	0 B
build/editor/editor-styles-rtl.css	480 B	0 B
build/editor/editor-styles.css	482 B	0 B
build/editor/index.js	42.8 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.85 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	7.71 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.16 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	712 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.11 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.34 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.42 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.43 kB	0 B
build/priority-queue/index.js	791 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/reusable-blocks/index.js	3.06 kB	0 B
build/rich-text/index.js	13.2 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.69 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}

[gziolo]

There is one limitation in @wordpress/lazy-import that I'm trying to use here in contrast to what @fabiankaegy proposed before that package was created. I'm still not clear on what would be the best way to find the path to the templates folder.

[gziolo]

I came up with a solution that requires an explicit config with the path to the folder with template files to move forward with the initial support.

It's a bit unfortunate that templatesPath has to be explicitly set but @wordpress/lazy-import package would require some further development first to make the discovery automatic for external packages.

[mkaz]

Tested and worked well for both examples.

The initial run seemed a little slow with no feedback to the user. This might be just my local setup or temporary issue, but if there is a long step for install, we should probably provide feedback to user that it is doing something. I quit and restarted the first time.

[fabiankaegy]

I also tested it with your package @gziolo. And it works great!!! Thank you for pushing this over the finish line :)

[gziolo]

The initial run seemed a little slow with no feedback to the user. This might be just my local setup or temporary issue, but if there is a long step for install, we should probably provide feedback to user that it is doing something. I quit and restarted the first time.

It's an actual issue with the Gutenberg repository and npm, I suppose. I experience it as well. I added more logging to account for that with 1e73571. However, in practice, it shouldn't be an issue because @wordpress/create-block has only a few dependencies. I also did a quick experiment which simulates conditions closer to how scaffolding would perform:

It's fast. I hope it will work like this when using the package from npm 😄

[gziolo]

Thank you for reviewing.
@fabiankaegy, major props for all the work to make it happen 🎉

There were 2 CI jobs failing but the same issue exists in the master branch.

[gziolo]

This new feature might not get published to npm until WordPress 5.6 is released (8 December 2020). Let's see how it goes 😄