paint-brush
How to Quickly Create a New Gutenberg Block — WordPress Development Tutorialby@amritray
222 reads

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

by Amrit RayJune 23rd, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The new Block editor is a powerful tool for composing your posts and pages in WordPress. With the new editor, blocks are at the heart of arranging content on a new page. A quick tutorial for developers to quickly get started with WordPress Block development.
featured image - How to Quickly Create a New Gutenberg Block — WordPress Development Tutorial
Amrit Ray HackerNoon profile picture

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.


Checking Node & NPM version


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.


Installing @wordpress/create-block package


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


Successfully completed installing @wordpress/create-block package


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:


running npm start at the Visual Studio Code terminal


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


npm run - compiled successfully


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.


Files & Folder structure of our blocs


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:


Selecting our block in the WP Editor



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


WP Block message in the Editor



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


WP Block displaying in the front end of the site


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 :)