Building a Gutenberg Block Plugin from the Scratch

You already have the knowledge of using Gutenberg and I am pretty sure you have thought about building your own block. In this tutorial section, we will learn how to build your own block that can be used within Gutenberg. 

To give you the basic idea about building a block, we will learn how we can make the simplest block for Gutenberg. Using the block you can add a static text anywhere you want in your post. We can build a plugin for WordPress that will communicate with the Gutenberg plugin and add our custom block to Gutenberg’s block list. Let’s get started.

Init the Plugin

Navigate to your Plugins directory of WordPress folder. 

WordPress_Root_Folder > wp-content > plugins

Inside the Plugins folder, create a folder where we will keep our block’s code and assets. 

In our case, we will make a folder called CustomBlock. Remember not to add any space between the name of the folder (e.g.: Custom Block)You can name it anything you want which will not affect your plugin.

Now, we will create two mandatory files for the plugin. One is JavaScript another is PHP. Name them anything you want. In our case, we are naming them block.js and myBlock.php respectively.

Open your myBlock.php file and add the following lines

<?php
/**
 * Plugin Name: CustomBlock
 * Description: This is a gutenberg Custom Block Plugin
 * Author: Author_Name
 * Author URI: https://wordpress.com
 * Version: 0.0.1
 * License: GPL2+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

Inside the /** and */ we have declared some information that will be shown on the plugin section of WordPress after the installation of the plugin.
Here,
Plugin Name: Your_Plugin_Name
Description: Your plugin Description will be written here. 
Author: The plugin developer’s name will be here
Author URI: Any URL can be put here, people add either portfolio URL or the URL where the plugin is hosted. 
Version: Your_Plugin_Version
License: Plugin_License_Type
License URI: Link of the license where it is hosted.

Now, save the file. You can already see your plugin is listed under the Plugin section of WordPress Dashboard. (After logging into WordPress Administrator, go to Plugin > Installed Plugin). If everything is perfect, you can see something like the following image.

Gutenberg tutorial, plugin, gutendev, gutenberg
Plugin Directory

Let’s start coding

Now, in our PHP file, we need to add a condition so that public users cannot directly access the PHP file through the URL. So, add the following snippets after the previous block of comment we used for the Plugin’s name, version, description etc. 

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

Now, we need to write a function to access our block.js file and some dependancies for a plugin. Let’s call our function newBlock_Script. You can call it anything you want as long as it does not conflict with the core WordPress.

function newBlock_script() {
    #our code will be there
}

In our newBlock_Script, we will call the wp_enqueue_script() function with the following parameters.

  • Handler Name: A custom handler will be placed here; you can create any handler here, for our case, we will call it as newBlockHandle
  • plugin_url(): in this function we will call our JavaScript file as plugins_url( ‘block.js’, __FILE__ )
  • array(): Here, we will ad our dependencies for the plugin. In our plugin, we will need ‘wp-blocks’, ‘wp-i18n’, and ‘wp-element’ where 
  • filetime(): We will set filetime() as filemtime( plugin_dir_path( __FILE__ ) . ‘block.js’

So, the complete newBlock_script() function will look like as follow

function newBlock_script() {
	wp_enqueue_script(
		'newBlockHandle', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element' ), filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) 
	);
}

Now we will call our newBlock_script() function with the add_action() function. 

add_action( 'enqueue_block_editor_assets', 'newBlock_script' );

Where enqueue_block_editor_assets is a parameter required to make the plugin work with Gutenberg. 

Finally our newBlock.php file is ready and it will look like as follow

<?php
/**
 * Plugin Name: CustomBlock
 * Description: This is a gutenberg Custom Block Plugin
 * Author: Author_Name
 * Author URI: https://wordpress.com
 * Version: 0.0.1
 * License: GPL2+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function newBlock_script() {
	wp_enqueue_script(
		'newBlockHandle', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element' ), filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) 
	);
}
add_action( 'enqueue_block_editor_assets', 'newBlock_script' );

Writing your JS

Now we will write our block.js file. In this file, we will code in JavaScript. 

We will start by creating a function and will declare three variables inside the function as follow

var __ = wp.i18n.__; 
var createElement = wp.element.createElement; 
var registerBlockType = wp.blocks.registerBlockType; 

The first variable var _ = wp.i18n._;  is declared for the Internationalisation of the code which deals with the translation. 

The second variable var createElement = wp.element.createElement; is declared for creating element using the block.  We will use createElement() function to create an element. 

And finally, to register a block, we declared var registerBlockType = wp.blocks.registerBlockType; We will use registerBlockType() to register a a block which is inharited from the wp.blocks library.

Our registerBlockType() will have two main arguments – block identity and block configuration object
For the block identity, we use namespace/block-name structure where namespace is the name of the plugin and block-name is the name of the block. For our plugin and blog, we will name is as custom-block/textblock. Remember, you can only use lowercase here and no symbol other than the hyphen.

Then we need to implement two new values – one is for the backend (you can customize it) and another is for the frontend (you can only view it).

But as we are making a block for the Gutenberg , you already have seen that every block has an icon, a name and placed under a category.  If you are confused, see the following image. 

Gutenberg tutorial, Know a block, gutendev, gutenberg
Know a block

So, to get your block all the identities you need to add the following lines. 

title: __('Our Custom Block'), 
icon: 'smiley', 
category: 'common',

The first line will be the title of our custom block, the second line will add a smiley to our block and our block will be categorized under “common” category of the blocks. See the following image for clarification. 

Gutenberg tutorial, block classification, gutendev, gutenberg
Classification of the block

You can use any icon you want. Or you can create your own icon and use it. We will create a post on that soon.

You can also customize or create a new category for your block. We create a new category once we create more than one block inside a single plugin. 

Lets code for our backend. We will create a function for saving data from the backend; see the following code. 

edit: function(props){
	return createElement(
	'p',
	   {
	    className: props.className,
		},
	     'This text will be shown on the backend'
		);
	},

The above function will return a text (This text will be shown on the backend) when we add our block to our post. For the frontend, we need to add the following code which is similar to the above code; 

save: function(props){
	return createElement(
	'p',
	   {
	    className: props.className,
		},
	     'This text will be shown on the frontend'
		);
	},

So, the full code for our block.js will look like as follow.


( function() {
	var __ = wp.i18n.__; 
	var createElement = wp.element.createElement; 
	var registerBlockType = wp.blocks.registerBlockType; 


	registerBlockType(
		'customblock/textblock',
		{
		title: __('Our Custom Block'),
		icon: 'smiley',
		category: 'common',

		edit: function(props){
			return createElement(
				'p',
				{
					className: props.className,
				},
				'This text will be shown on the backend'
				);
		},

		save: function(props){
			return createElement(
				'p',
				{
					className:props.className,
				},
					'This will be shown on the frontend'
				);
		},

}
		);
})();

Congratulation! We have created our first block. Let’s test it; 

Finalizing Our Plugin

Go to Plugins and activate our CustomPlugin. Then Open/Create a post and see under the common category, our block; See the following image for reference. 

Gutenberg tutorial, Our Custom Block, gutendev, gutenberg
Our Custom Block

Select “Our Custom Block” and our defined text will be placed;

Gutenberg tutorial, Backend, gutendev, gutenberg
Backend

Now, publish the post and you will see the output as we defined in our code. 

Gutenberg tutorial, frontend, gutendev, gutenberg
Frontend

You can also use custom CSS from the Block Setting. You already know from the post “What is Gutenberg?”. We can also create a post on the custom CSS for a block. Let us know what do you think. In future, we will also make blocks with complex things too. 

Leave a Reply

Your email address will not be published. Required fields are marked *