Create WordPress Block
Create WordPress Block is an officially supported way to create blocks for registering a block for a WordPress plugin. It offers a modern build setup with no configuration. It generates PHP, JS, CSS code, and everything else you need to start the project.
Blocks are the fundamental element of the WordPress block editor. They are the primary way in which plugins and themes can register their own functionality and extend the capabilities of the editor.
Visit the Gutenberg handbook to learn more about Block API.
You just need to provide the
slug which is the target location for scaffolded
files and the internal block name.
$ npm init wordpress-block todo-list$ cd todo-list$ npm start
10.0.0 or above, and
6.1.0 or above)
The following command generates PHP, JS and CSS code for registering a block.
$ npm init wordpress-block [options] [slug]
[slug] is optional. When provided it triggers the quick mode where it is used
as the block slug used for its identification, the output location for scaffolded files,
and the name of the WordPress plugin. The rest of the configuration is set to all
-t, --template <name> template type name, allowed values: "es5", "esnext"-V, --version output the version number-h, --help output usage information
- Interactive mode - it gives a chance to customize a few most important options before the code gets generated.
$ npm init wordpress-block
- ES5 template – it is also possible to pick ES5 template when you don't want
to deal with a build step (
npm start) which enables ESNext and JSX support.
$ npm init wordpress-block --template es5
- Help – you need to use
npxto output usage information.
$ npx create-wordpress-block --help
When you scaffold a block, you must provide at least a
slug name, the
which usually corresponds to either the
plugin name, and the
In most cases, we recommended pairing blocks with plugins rather than themes,
because only using plugin ensures that all blocks still work when your theme changes.
Inside that bootstrapped directory (it doesn't apply to
es5 template), you
can run several commands:
$ npm start
Starts the build for development.
$ npm run build
Builds the code for production.
$ npm run lint:css
Lints CSS files.
$ npm run lint:js
Another way of making a developer’s life easier is to use WP-CLI,
which provides a command-line interface for many actions you might perform on
the WordPress instance. One of the commands
wp scaffold block was used as
the baseline for this tool and ES5 template in particular.