-
-
Notifications
You must be signed in to change notification settings - Fork 329
📦 Create New Block Command #18
Description
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.
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
- You check out the new examples directory at the
create-guten-blockGitHub repo. - There you take a look at our
03-multi-blockexample
And then you study or try to recreate a new block via looking at these steps
- Go to
./src/and copy paste the./src/blockdirectory as./src/block2/where our second block's code will live. - Open
./src/blocks.jsand import our new block from./src/block2/block.jsfile. - Go to
./block2/directory and rename our block frommulti-blocktomulti-block-2in both.jsand.scssfiles. - Now you have two blocks run by a single plugin.
- As you might have noticed all blocks should be imported in the
./src/blocks.jsfiles 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-blockinside the `./src/my-new-block folder - And it should also add the import command in the
./src/blocks.jsfiles so that our webpack config could compile and build that new block along with the one we had before (yes, we haven't forgotten youmy-block👀)
🤔 REAL WORLD PROBLEMS
The problems in implementing this approach are
npmscripts 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-blockCLI to always be delegating all tasks tocgb-scripts— so that users don't have update the global CLI all the time. - Managing the
pathwould be hard for if the user runs the command in the wrong folder. As compared tocgb-scriptsthat will always reside in the root path and then./node_modules/cgb-scriptsand that's where our code for creating new block should be.
📣 Floor is open to your suggestions now!