Create a Block Tutorial Edit

Let’s get you started creating your first block for the WordPress Block Editor. We will create a simple block that allows the user to type a message and style it.

The tutorial includes setting up your development environment, tools, and getting comfortable with the new development model. If you are already comfortable, try the quick start below, otherwise step through whatever part of the tutorial you need.

The first thing you need is a development environment and tools. This includes setting up your WordPress environment, Node, NPM, and your code editor. If you need help, see the setting up your development environment documentation.

The @wordpress/create-block package exists to create the necessary block scaffolding to get you started. See create-block package documentation for additional features. This quick start assumes you have a development environment with node installed, and a WordPress site.

From your plugins directory, to create your block run:

npx @wordpress/create-block gutenpride --template @wordpress/create-block-tutorial-template

Remember that you should use Node.js v14. Other versions may result in an error in the terminal. See Node Development Tools for more info.

The npx command runs a command from a remote package, in this case our create-block package that will create a new directory called gutenpride, installs the necessary files, and builds the block plugin. If you want an interactive mode that prompts you for details, run the command without the gutenpride name.

You now need to activate the plugin from inside wp-admin plugins page.

After activated, go to the block editor and use the inserter to search and add your new block.

The create a block tutorials breaks down to the following sections.

1. WordPress Plugin
2. Anatomy of a Gutenberg Block
3. Block Attributes
4. Code Implementation
5. Authoring Experience
6. Finishing Touches
7. Share your Block with the World