Using @wordpress/create-block tool in Block Development

Updated on August 10, 2023

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.

Example of a block created with @wordpress/create-block tool — It is a “starter block” that was created by `@wordpress/create-block` tool.

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 npx @wordpress/create-block.

Interactive mode

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:

Quick mode

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: text, media, design, widget, theme and embed,
--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:

build/index.css, build/style-index.css, src/editor.scss, 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.
edit.js and save.js – as well as when you’re creating a WordPress theme you don’t put everything in functions.php file, you don’t need to put the entire code of your custom Gutenberg block in src/index.js file, you can use import and export for that.