get-started-with-create-block.md

Get started with create-block

Custom blocks for the Block Editor in WordPress are typically registered using plugins and are defined through a specific set of files. The @wordpress/create-block package is an officially supported tool to scaffold the structure of files needed to create and register a block. It generates all the necessary code to start a project and integrates a modern JavaScript build setup (using wp-scripts) with no configuration required.

The package is designed to help developers quickly set up a block development environment following WordPress best practices.

Quick start

Installation

Start by ensuring you have Node.js and npm installed on your computer. Review the Node.js development environment guide if not.

You can use create-block to scaffold a block just about anywhere and then use wp-env from the inside of the generated plugin folder. This will create a local WordPress development environment with your new block plugin installed and activated.

If you have your own local WordPress development environment already set up, navigate to the plugins/ folder using the terminal.

Run the following command to scaffold an example block plugin:

npx @wordpress/create-block@latest todo-list
cd todo-list

The slug provided (todo-list) defines the folder name for the scaffolded plugin and the internal block name.

Navigate to the Plugins page of our local WordPress installation and activate the "Todo List" plugin. The example block will then be available in the Editor.

Basic usage

The create-block assumes you will use modern JavaScript (ESNext and JSX) to build your block. This requires a build step to compile the code into a format that browsers can understand. Luckily, the wp-scripts package handles this process for you. Refer to the Get started with wp-scripts for an introduction to this package.

When create-block scaffolds the block, it installs wp-scripts and adds the most common scripts to the block's package.json file. By default, those include:

{
    "scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	}
}

These scripts can then be run using the command npm run {script name}. The two scripts you will use most often are start and build since they handle the build step.

When working on your block, use the npm run start command. This will start a development server and automatically rebuild the block whenever any code change is detected.

When you are ready to deploy your block, use the npm run build command. This optimizes your code and makes it production-ready.

See the wp-scripts package documentation for more details about each available script.

Alternate implementations

Interactive mode

For developers who prefer a more guided experience, the create-block package provides an interactive mode. Instead of manually specifying all options upfront, like the slug in the above example, this mode will prompt you for inputs step-by-step.

To use this mode, run the command:

npx @wordpress/create-block@latest

Follow the prompts to configure your block settings interactively.

Quick start mode using options

If you're already familiar with the create-block options and want a more streamlined setup, you can use quick start mode. This allows you to pass specific options directly in the command line, eliminating the need for interactive prompts.

For instance, to quickly create a block named "my-block" with a namespace of "my-plugin" that is a Dynamic block, use this command:

npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"

Using templates

The create-block package also supports the use of templates, enabling you to create blocks based on predefined configurations and structures. This is especially useful when you have a preferred block structure or when you're building multiple blocks with similar configurations.

To use a template, specify the --template option followed by the template name or path:

npx @wordpress/create-block --template="my-custom-template"

Templates must be set up in advance so the create-block package knows where to find them. Learn more in the create-block documentation, and review the External Project Templates guide.

Additional resources

• Using the create-block tool (Learn WordPress tutorial)
• @wordpress/create-block (Official documentation)
• @wordpress/scripts (Official documentation)