Create Block: Create a more modular structure that is easier to extend to several blocks

[klinge]

Is your feature request related to a problem? Please describe. I've been struggling for days to set up a plugin that implements several blocks. I've looked at examples at github and around the net but most are outdated compared to newer block standards. I admit that my skills in using javascript/webpack/npm are fairly low.

Using the @wordpress/create-block script I quickly get a plugin with a single block up and running - but it's not easily extendable to several blocks. The php side of block init+setup is in the common "plugin.php" file. And when trying move stuff that is common to a block and place that in a subfolder to the src-folder I realize that the build/webpack scripts are not really supporting that.

What solution would you like I would like the create-block script to generate a structure that is more modular and easier to extend to implementing more than a single block. Something like this:

plugin-folder
/build
/src
--/block1
----<all js, php, css-files that are unique to block1>
--/block2
----<all js, php, css-files that are unique to block2>
--/common-assets
----<files that are common between blocks - included js libraries, common styling etc>
plugin.php
package.json
..

Alternative solutions The alternative would be to create as many plugins as you want blocks but this seems a bit unnecessary if creating several blocks.

[cr0ybot]

@stefanfisk Oof, I should have looked into that a bit more before making a suggestion, thanks. Do you happen to know what kind of tooling would be required? Are you talking about WordPress script enqueuing or something else?

[stefanfisk]

@cr0ybot Here's the code I was using at the time https://gist.github.com/stefanfisk/bb4e045f3d15829a377916dc5fee9acc

I am no longer using this as my needs changed, so YMMV.

[gziolo]

In the the last version published to npm you can find 2 new CLI options that should vastly improve the experience for extending existing projects with new blocks:

--no-plugin

With https://github.com/WordPress/gutenberg/pull/41642 from @ryanwelcher, you can scaffold only the block folder with:

npx @wordpress/create-block --no-plugin

This way you can add as many blocks as you need to your project. You will only have to remember to wire them with:

register_block_type( __DIR__ . '/build/path-to-block' );

--variant

With https://github.com/WordPress/gutenberg/pull/41289 from @ryanwelcher, you can also pick different variants of the same block. By default, scaffolded blocks use the static form that contain the save method that produces HTML to store in the database and use on the front end. If you prefer to have more control over the output of the block, you can use , if template supports it, the dynamic block variant where save gets skipped and block gets rendered on the frontend with render_callback PHP implementation. This option can be passed with CLI command:

npx @wordpress/create-block --variant dynamic

or selected in the interactive mode.

[colorful-tones]

I'm just catching up over here and wanted to point to #44717 which has a good deal of overlap here and I would love feedback from you folks. cc: @dgwyer @cr0ybot @illycz @gziolo Thanks!

[dgwyer]

@colorful-tones I created a wrapper CLI tool around create-block to extend it's capabilities. e.g. named blocks, and full Tailwind integration compiling CSS at the block level (separate files). I'd be open to adding more features. 🙂

https://github.com/dgwyer/create-wp-block

[shoelaced]

Trying this and I'm getting messages like Skipping "./index.js" listed in "C:/path/to/plugin/src/block-a/block.json". File is located outside of the "src" directory and No entry file discovered in the "src" directory when trying to re-structure the folders as @ryanwelcher mentioned. Has this functionality changed? I'm on Windows, could there be something breaking #38781 from a while back?

[shoelaced]

Nevermind, I've figured it out and created an issue: #45792