Skip to content
This repository was archived by the owner on Oct 10, 2022. It is now read-only.
This repository was archived by the owner on Oct 10, 2022. It is now read-only.

📦 Create New Block Command #18

@ahmadawais

Description

@ahmadawais

Let's talk a little about how and if we are going to add a command that creates a new block inside of a previously created #GutenBlock via create-guten-block.


image

WHY THE NEED?!

  • So, you go ahead and install create-guten-block
  • Then you use it to create a #Gutenblock plugin in your local WP install
  • To do that you run create-guten-block my-block

Now after working with this block for a while, you think, hey I think I need to create a new block inside this same single WordPress plugin. How do I do that?

OPTION # 1

And then you study or try to recreate a new block via looking at these steps

  • Go to ./src/ and copy paste the ./src/block directory as ./src/block2/ where our second block's code will live.
  • Open ./src/blocks.js and import our new block from ./src/block2/block.js file.
  • Go to ./block2/ directory and rename our block from multi-block to multi-block-2 in both .js and .scss files.
  • Now you have two blocks run by a single plugin.
  • As you might have noticed all blocks should be imported in the ./src/blocks.js files as that's the file which gets imported into our webpack config.

This as you can see is less than desireable

OPTION # 2

Well, that's what we are here to discuss.

IDEAL CASE
In an ideal world, we should be able to do this:

  • The user can run something like npm run create-block my-new-block
  • This command should create a new block called my-new-block inside the `./src/my-new-block folder
  • And it should also add the import command in the ./src/blocks.js files so that our webpack config could compile and build that new block along with the one we had before (yes, we haven't forgotten you my-block 👀)

🤔 REAL WORLD PROBLEMS

The problems in implementing this approach are

  • npm scripts can't receive terminal arguments that way
  • To do the same thing a user would have to write something like npm run create-block -- --name='my-new-block'
  • OK, whaaaaat?! 👀 — Yes, that's the thing. It complicates things for beginners.

So, that's where I am right now and would love any suggestions you have for me.

Before you go and suggest that we add this inside the create-guten-block CLI — well, that's never going to happen. Why? Two reasons!

  • Because we need to create-guten-block CLI to always be delegating all tasks to cgb-scripts — so that users don't have update the global CLI all the time.
  • Managing the path would be hard for if the user runs the command in the wrong folder. As compared to cgb-scripts that will always reside in the root path and then ./node_modules/cgb-scripts and that's where our code for creating new block should be.

📣 Floor is open to your suggestions now!

Metadata

Metadata

Assignees

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions