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 –

• Creating your first block
• Creating Custom Gutenberg Blocks: Step-by-Step Tutorial
• WordPress Block Creator Series
• Create Custom Gutenberg Blocks — Playlist of 9 videos
• block.json
• Examples for extending WordPress/Gutenberg with blocks
• Introduction to the Format API
• Block Filters
• Block Editor Architecture

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 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 final step, registers the block in 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 to register a block through JS and PHP? Can’t we do it a single way ie only the client side?
• How are the assets enqueuing and translation handled for the Gutenberg block? Do developer have to do them explicitly?
• What is the usage of the assets file which is generated after the JS bundling?
• When we register a block style using registerBlockStyle() of suppose name xyz what is the classname which 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?