📦 Create New Block Command

[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.

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-block GitHub repo.
• There you take a look at our 03-multi-block example

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!

[zgordon]

Okay! Very excited you are exploring this into you're already great work.

I haven't looked at how this would work specifically, but could we add one command in the initial package.json file like "add" that takes a single parameter of block-name and passes it executes code you identified.

It may also require a main index file that is automatically updated to import in the new block. If just one block was created then the index would only import that one block and there could be a comment not to edit this file since it is updated via the command prompt.

I'm happy to try to contribute to this, but let me know at a high level if you think that even makes sense or would be possible :)

Great work!!

[ahmadawais]

@zgordon Thank you! 🎉

🔰 Nice to have you here, and yes that makes sense. But I'd ask you to read the above content again since that's what I proposed, especially the content after OPTION # 2 where I explain how it can be done and what problems I am facing there.

✅ TL;DR the command becomes quite big and complex whereas I want to keep this as easy as possible. It becomes something like this npm run create-block -- --name='my-new-block

Looking forward!

[zgordon]

Mmm, okay, good clarifications, thank you.

Okay, thought in a completely different direction that may be too complex, but what if there was a sort of index.html page generated with a very simple form interface to add a block so they don't see anything running on the backend?

That said, I am not sure how to resolve some of the path issues you outline, so copy, paste, edit may be the "easiest" approach?

I do like though having an index.js that imports individual blocks and then that being enqueued as a pattern that may be more scalable for multiple block plugins?

[westonruter]

What about WP-CLI's wp scaffold block? Shouldn't WP-CLI be part of the discussion here?

[ahmadawais]

@westonruter thanks for dropping by. 🙌

Honestly, I haven't had a chance to dig deeper in the code base of WP CLI, and it's already doing pretty great. This here is a JavaScript alternate if you will — I strongly think that having it all based on JS puts it in a better position of getting more adoption in the JavaScript community to attract them to WordPress as compared to a PHP solution.

But I like the idea of building integration between these two tools. Not sure how that will pan out. You see, this is a complete opposite of what WP CLI stands for. At create-guten-block we're trying to follow Zero-Configuration setup. ✅

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration. 🔰

[Shelob9]

Just a note, I think it would be really cool if the create block command had a copy block option. Given command create-guten-block --clone=book-block --name=magazine-block a new block called "magazine-block" would be created that was a copy of existing block "book-block".

If I had a book block created already, and I was asked for a magazine block with similar features, I totally start by copypastaing my book block.

[zgordon]

I like this. Might be a good way to get around creating multiple blocks

[covertnine]

I'm getting an error when setting this up for the first time with the create-guten-block command that I can't get through. (Full disclosure I'm a little new to Node.js & NPM) We're using Node v8.9.4 and NPM v5.6.0. Just installed the create-gluten-block with no problem on a fresh linode server we use, and I'm getting some errors I'm not sure how to fix.

The error is related to a maxBuffer exceeded:

⠏ 2. Installing npm packages.../usr/lib/node_modules/create-guten-block/index.js:60 throw err; ^

Error: stderr maxBuffer exceeded at PassThrough.stream.on (/usr/lib/node_modules/create-guten-block/node_modules/get-stream/index.js:30:12) at emitOne (events.js:121:20) at PassThrough.emit (events.js:211:7) at addChunk (_stream_readable.js:263:12) at readableAddChunk (_stream_readable.js:246:13) at PassThrough.Readable.push (_stream_readable.js:208:10) at PassThrough.Transform.push (_stream_transform.js:147:32) at PassThrough.afterTransform (_stream_transform.js:88:10) at PassThrough._transform (_stream_passthrough.js:42:3) at PassThrough.Transform._read (_stream_transform.js:186:10)

Any ideas? Wasn't able to come up with much via google.

[braginteractive]

Love this project!

Just wanted to mention your link is broken to your multi-block example in your instructions above. Should be: https://github.com/ahmadawais/create-guten-block/tree/master/examples/03-multi-block

[ahmadawais]

@braginteractive thanks for the kind words and for letting me know. It's fixed now. 👍 I have a working solution for this now, plan to open source it soon.

[tsdexter]

any updates on this?

[ivandurst]

Bump, is this fixed?

[Julianoe]

is this still in the works?