gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

[Create Block] Adding a `--block-only` flag to scaffold only block files.

Open ryanwelcher opened this issue 3 years ago • 2 comments

What?

This PR introduces the --block-only flag to allow users to use the package to scaffold only block files.

Why?

Currently, there is no way to scaffold additional blocks once the plugin has been created. Being able to quickly create subsequent blocks would be very helpful.

How?

When the --block-only flag is added, the script skips any plugin scaffolding and only outputs the files listed in the blockTemplatesPath ( just the block files ) into folderName as defined by the template with the default being ./src. It should be noted that the script is not "aware" of its location. Calling npx @wordpress/create-block block-name --no-block will create a new block inside the folderNamedirectory where it's called

The slug passed is used as the directory and block name any other flags not related to package.json items should function as expected for the block, i.e namespace.

Testing Instructions

  1. From the root of packages/create-block, run node index.js test to create a new plugin with a single block
  2. cd into the test directory
  3. Run node ../index.js my-test-block --block-only to scaffold a new block
  4. Confirm that the src directory has the existing block files and a new directory called my-test-block that contains new block files
  5. Run npm start to confirm that the build works

Screenshots or screencast

ryanwelcher avatar Jun 09 '22 18:06 ryanwelcher

This PR introduces a lot of conditionals and it would be a really good idea to start abstracting out some of the functionality to make it easier to work with.

ryanwelcher avatar Jun 14 '22 18:06 ryanwelcher

Based on a conversation with @gziolo in slack we think that changing the flag to --no-plugin makes more sense and is clearer in the context of running the full command i.e npx @wordpress/create-block --no-plugin

ryanwelcher avatar Aug 09 '22 14:08 ryanwelcher

I found an issue while testing where if a --template was passed that didn't support the blockTemplatesPath property an assets directory was created containing the actual template files.

As a result, I have added some logic to check to see if there are block template files and if not, error out with a message.

This can be tested by using the following command from the root of the create-block package.

  1. Template with support: node ../index.js my-test-block ---template=@ryanwelcher/dynamic-block-template --no-plugin
  2. Template without support:node ../index.js my-test-block --template=@ryanwelcher/multiple-blocks-template --no-plugin

ryanwelcher avatar Aug 11 '22 20:08 ryanwelcher

I can confirm that the newly added check for block templates works as expected:

Screenshot 2022-08-12 at 09 46 31

It makes me wonder whether we should bail out early when loading the config for the template. In effect we would have two checks:

  • Show error when there is no blockTemplatesPath provided together with --no-plugin flag: The template selected doesn't support --no-plugin` option.
  • If both --no-plugin and the blockTemplatesPath was provided and there were no block files loaded, we could just show the message that No block files found in the template. The template "XYZ" is incorrectly configured.

gziolo avatar Aug 12 '22 07:08 gziolo

https://github.com/WordPress/gutenberg/blob/9a4b95e37da8b4c4b271f510895690a4ea1fa780/packages/create-block/lib/prompts.js#L11

here we could make it more universal for the time being so it fits also the case when user passes --no-plugin flag:

The block slug used for identification (also the output folder name):

In the long run, if we were to support multiple blocks scaffolding in one go, we might want to have two distinct slug prompts - one for the block and the other one for the plugin. I'm not sure about that yet, but I wanted to flag it.

gziolo avatar Aug 12 '22 19:08 gziolo

https://github.com/WordPress/gutenberg/blob/9a4b95e37da8b4c4b271f510895690a4ea1fa780/packages/create-block/lib/prompts.js#L11

here we could make it more universal for the time being so it fits also the case when user passes --no-plugin flag:

The block slug used for identification (also the output folder name):

I'll make this update before merging.

In the long run, if we were to support multiple blocks scaffolding in one go, we might want to have two distinct slug prompts - one for the block and the other one for the plugin. I'm not sure about that yet, but I wanted to flag it.

I LOVE this idea. It's been something that always bugged me that the plugin and the block had the same name. Being able to pass different names for the plugin would be really handy. I'll open a new issue for it.

ryanwelcher avatar Aug 15 '22 15:08 ryanwelcher

related https://github.com/WordPress/gutenberg/issues/43235

ryanwelcher avatar Aug 15 '22 17:08 ryanwelcher