Using @wordpress/create-block tool in Block Development
If you have ever used WordPress starter themes, then you will absolutely love
@wordpress/create-block command line tool.
I personally rarely used starter themes for my WordPress projects and usually I don’t rely on
@wordpress/create-block tool when creating blocks. But anyway I think it is a great tool and you should know how to use it.
As a result of this lesson, we will have a really simple block inside the Block Editor.
Another reason why you should watch this lesson is that at the end of it you will have a fully functional and correctly created block. Yes, the block literally does nothing just displays the text, but you can explore its files, do some changes and see what will happen in the Block Editor.
How to Use @wordpress/create-block tool?
It is as simple as running a single NPM command
By default the tool is going to be run in the interactive mode, so it is going to ask you questions right in the console:
But if you provide a block slug then the tool is not about to ask you anything during the process.
npx @wordpress/create-block my-block --title My Test Block --short-description It is just a test block --category text
In the command above we have:
my-block– it is a blog slug obviously and it is the only thing we have to provide to run the tool in the quick mode,
--title <block title>,
--short-description <block description>,
--category <block category>you can use one of the following:
--no-plugin– though I didn’t use it here, it is quite useful when you don’t need to create a WordPress plugin for a block.
There is also a couple more parameters you can find in the official tool documentation.
Starter Block Files Structure
Below are all the files that are about to be created by the tool:
A couple notes about the file structure:
src/style.scss– these are block CSS as you might’ve guessed. There is going to be a separate tutorial in this course fully covering that.
save.js– as well as when you’re creating a WordPress theme you don’t put everything in
functions.phpfile, you don’t need to put the entire code of your custom Gutenberg block in
src/index.jsfile, you can use