Gutenberg: Tooling: scaffolding WordPress plugins and blocks

[ajitbohra]

Introduction:

A javascript based tool to fit into developer workflow which enables them to kickstart blocks & plugins. Runs independently without any PHP/WordPress.

Scaffolding Wishlist:

• Generate plugin with block (single/multiple)
• Generate blocks based on predefined templates
• Generate plugin to extend Gutenberg using extensibility API
• Generate plugin to setup custom plugin page using Gutenberg components & react abstraction

Commands Idea List:

Generate plugin with a single block setup using esnext
$create-wp-plugin block --single --esnext

Generate plugin with a multi-block setup
$create-wp-plugin block --multi

Generate blocks without any plugin (for themes & existing plugins)
$create-wp-plugin block --no-plugin

Generate block using predefined templates
$create-wp-plugin block --template=serverside | richtext | blockcontrols | inspectorcontrols

Generate plugin to extend gutenberg
$create-wp-plugin extensibility --template=sidebar | block

Generate plugin page utilizing gutenberg components & react abstraction
$create-wp-plugin page --title=<page_title>

Commands / Flags:

block

--name=
--slug=
--icon=
--category=< category name >
--keywords=
--esnext
--single
--multi
--no-plugin
--template=[
basic,
serverside
richtext,
blockcontrols,
inspectorcontrols,
kitchensink
]

extend

-- sidebar --icon= --name=
-- block --with-insepctor-controls --with-block-controls --with-save --with-edit
-- publish
-- pre-publish

page

--name=
--menu=
--slug=
--parent=
--icon=
--kitchensink(Add demo controls)
--tabs=

https://github.com/WordPress/gutenberg/pull/10628 is MVP exploring above

[swissspidy]

I don't think this should be part of Gutenberg, tbh.

There are already popular tools like https://github.com/ahmadawais/create-guten-block and even support for that in the official WordPress command line utility, WP-CLI: https://github.com/wp-cli/scaffold-command. Both can work without WordPress.

IMO we should concentrate our focus on the existing solutions to make them better if needed.

[youknowriad]

We actually already have a wp-scripts package. It supports: linting, testing, and I think "bundling" is also in the work cc @gziolo

It's probably too soon at the moment but It seems like a natural evolution for me to have a scaffolding tool based on wp-scripts.

[gziolo]

There are already popular tools like https://github.com/ahmadawais/create-guten-block and even support for that in the official WordPress command line utility, WP-CLI: https://github.com/wp-cli/scaffold-command. Both can work without WordPress.

Just wanted to clarify create-guten-block doesn't use any of the published code from Gutenberg - Babel config, Eslint config, not mentioning exposed scripts. I hope they fix it someday to avoid promoting solutions which fundamentally differ from the core.

The downside of the current implementation of wp scaffold block in WP-CLi is that it generates ES5 code and depends on both PHP and WordPress instance. In effect, it's very limited in capabilities and hard to use for developers without WordPress expertise.

[gziolo]

We actually already have a wp-scripts package. It supports: linting, testing, and I think "bundling" is also in the work

Yes, once we add support for handling builds, we will have all that is required to manage plugins.

[ajitbohra]

@youknowriad @gziolo already covered most of the points

WP-CLI past discussion around having modern tooling for scaffolding https://github.com/wp-cli/scaffold-command/issues/106

The plan is to use wp-scripts and also provide several options for creating plugins apart from the block.

[gziolo]

Sharing this handbook tutorial from @mkaz for reference as it is a nice starter for extensibility template.

[schlessera]

There's no reason why wp-scripts couldn't be used by the WP-CLI scaffolding tool.

Note: my main focus for v2.2.0 of WP-CLI will be to rethink the scaffolding tool to make it the de-facto code generator for WordPress. This would probably be a better place to include block generation than the Gutenberg plugin itself.

[youknowriad]

@schlessera Great to hear, If I could have one suggestion about this rethinking is to consider splitting the scaffolding from the rest of the tooling. Installing and running the scaffolding tool shouldn't require an active WordPress installation.

[gziolo]

I'm sharing for reference the link to create-cloud-block which helps to scaffold blocks to use with Cloud Blocks plugin. Those blocks work with both WordPress and Drupal. The repository is maintained by @eliocro.

[gziolo]

I have this npm package up and running which implements parts of the functionality proposed in this issue:

https://www.npmjs.com/package/create-wordpress-block
https://github.com/gziolo/create-wordpress-block

I plan to open PR against Gutenberg after some testing with the community.

This is how it works: