Creating a block

Creating a block for Gutenberg is easier than it looks. You can learn how to create a block using modern JavaScript (ESNext and JSX ) from the below resources:

Example—Requires build process

This is the most common and latest approach to creating a custom Gutenberg block. It requires a build process. You can use a command to scaffold a plugin with a boilerplate for the custom block. Reference the create-block package.

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

But we will create it manually for now to learn more about it. Follow the steps below to create your first simple block.

Create a plugin.
In that plugin folder, initialize Node.js by running npm init. This will create a package.json file.

Now install the WordPress scripts as a dev dependency.


			npm install @wordpress/scripts --save-dev

Add the following scripts in your package.json file.

			"start": "wp-scripts start",
"build": "wp-scripts build"

Create a src directory, and inside that, create a directory with your block’s name (e.g., first-block).
Now, create a block.json file for the block in that directory.

			{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"title": "First Block",
	"name": "learning/first-block",
	"version": "0.1.0",
	"category": "text",
	"icon": "universal-access-alt",
	"textdomain": "first-block",
	"editorScript": "file:./index.js"
}		
			
		

Create an index.js file for the block. This block will not do anything fancy; it will just display text in the editor and the same text on the frontend. For now, the user will not be able to edit the text. We will add that functionality in later sections.
We have added the edit and save functions in the same file, but you can also create them as components in separate files, like edit.js and save.js, and then import those components into the index.js file.

			import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

// Register the block
registerBlockType(metadata.name, {
	edit: function () {
		return <p> Hello world! This is my first block. (editor)</p>;
	},
	save: function () {
		return <p> Hello World! This is my first block. (frontend) </p>;
	},
});
		
			
		

Now, the final step registers the block in the plugin’s main file.

			function register_blocks() {
	register_block_type( __DIR__ . '/build/first-block' );
}
add_action( 'init', 'register_blocks' );		
			
		

Run the build script, npm run build and you will be able to access your first block in the editor.

Ideas to Explore:

Why do we require registering a block through JS and PHP? Can’t we do it a single way, i.e., only on the client side?
How are the assets enqueuing and translation handled for the Gutenberg block? Do developers have to do them explicitly?
What is the usage of the assets file that is generated after the JS bundling?
When we register a block style using registerBlockStyle() of the supposed name xyz, what is the classname that is assigned to the block’s wrapper?
Can we register a block only client-side, i.e., without using the function register_block_type() in PHP?

Previous Topic

Back to Lesson

Next Topic