How to Quickly Create a New Gutenberg Block — WordPress Development Tutorial

So much is changing quickly with WordPress that it is getting difficult, even for developers, to keep up, let alone website owners and end users. The classic editor as we knew for so long is no longer the default option on WordPress sites. Though many still continue to use it to this day. WordPress now has the new Block editor for composing your posts and pages.

In this article, we look at developing new blocks using the Create Block tool from WordPress. It generates all the necessary files & folders that you can build on rapidly to develop new blocks.

So how do the two editors differ you ask?

The classic one can mainly manipulate the content on a particular page. The design & layout is pretty fixed and not much can be done about it, except for contacting your developer. The content also contained HTML markup which could make editing intimidating for a non-technical person.

Now, with the new block editor, blocks are at the heart of arranging content on a new page. Not only content, but you can also arrange the layout of the page as required. No dealing with HTML markup anymore. You not only have the blocks to create your content, but you also have blocks to add spacing and columns to arrange the layout as per your need.

But strangely with all these new features, plenty of website owners are still using plugins that enable them to continue using the Classic editor. Maybe they just need more time to adjust to the new interface. Maybe they just need to overcome their fear of the new!!

There is no denying that the future of WordPress belongs to blocks. So for all developers starting out on this path, let’s see how we can quickly create a new block ourselves.

What We Need to Get Started With Block Development

First, we need to ensure that we have Node installed on our system. You can download Node from here: https://nodejs.org/en/download

It will install both NodeJS and NPM (Node Package Manager) needed for developing ReactJS applications. NPM will let you install packages you need to develop modern blocks and block-based themes. Typing “node -v” and “npm -v” in any command prompt should give you the version numbers of the respective packages, confirming you have these installed and you are ready to move forward with development.

Next, you need to have an IDE that you can use to write some code. I use Visual Studio Code but you can choose any you like. It doesn’t really matter which one as long as it gets the job done.

Next, you need to have a local development environment setup where you can test the site locally during the development phase. Some of the local development environments include:

• XAMPP
• MAMP
• Local by Flywheel
• etc

I use XAMPP. I have been using it for a long time and it gets the job done. I have heard good things about a few others, so don’t hesitate to experiment. Here is a list of local web servers for WordPress development you can choose from.

Skills You Need For WordPress Block Development

At the most basic you need to have:

• Knowledge of HTML, CSS & JavaScript.
• You need to be familiar with ES6 syntax and arrow functions because React uses a lot of those.
• Familiarity with React is also desirable.
• And yes, last but not least, you need to be familiar with the modern development workflow, which includes the use of tools like NodeJS and NPM to install and manage required packages during development.
• Some knowledge of WordPress development, including hooks, filters, & functions.
• Knowledge of versioning tools like Git is an added advantage.

Let’s Create a New WordPress Block Now

Let’s do this exercise together. Let’s create a new block and name is “my-practice-block”. We also need to choose a namespace for the block. It needs to be something unique. So I am going to add the initials of my company Ray Creations, and the first letters of the block name. So we can come up with this unique namespace, “rcmfb”. We need this in subsequent steps.

We will be using the Create Block tool, which is the official tool for scaffolding a WordPress plugin for registering a block. This tool will create the necessary files and folder structure we need for the block. Once we have the initial files and folders in place, then we can expand on it to create the desired functionality we need from it.

Open any command prompt, navigate to your plugins folder, and run this at the command prompt.

npx @wordpress/create-block my-practice-block

When prompted for confirmation, press y, and the installation should begin.

When the installation is complete, you should get a screen like this.

Now you have a new folder named, “my-practice-block” in your plugins folder. You can open that folder with your preferred IDE. I am opening it with Visual Studio Code. Most IDEs would give you the option to run commands directly in the IDE which is very convenient. And the command prompt would already be pointed at the project folder. So no need to manually switch to the project folder.

If you are continuing with the command prompt above, then you can switch to the project directly by running this command.

cd my-practice-block

And start the development environment by running this command.

npm start

In Visual Studio, you run the command in the integrated terminal like this:

If the command ran successfully without errors, you would get a screen like the following:

Now the program is watching you for any changes you make to the code. Any change you make gets immediately compiled and the files in the “build” folder get updated accordingly.

Let’s take a look at the files and folder structure of our block now. So we can make a few important modifications.

The file, “block.json” has all the metadata related to our block. We should open the file and change the namespace from “create-block” to what we decided earlier, i.e. “rcmfb”. You are free to use a unique name of your own.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "create-block/my-practice-block",
	"version": "0.1.0",
	"title": "My Practice Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example static block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"textdomain": "my-practice-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

So the name property would change as follows:

"name": "rcmfb/my-practice-block", 

We are doing this to avoid any conflict with any other plugins that you may have created this way earlier.

Activating The Plugin & Adding It To A Page

Now login to your WordPress dashboard, navigate to the Plugins page and activate our new plugin.

Now our new block should be available on every page and post, as you can see in the screenshot below:

Once you save the page with the block, the editor page would display like this:

And the front end of the site would display a message like this:

Plugin Ready To Be Customized Now

The plugin is now ready to be exploited the way you deem fit. You can make anything out of it now. I would not go into the details of explaining every file and how everything is being connected together. Perhaps that is the topic for another post.

However, if you have any questions for me, I would be happy to answer them for you :)