A simple Gutenberg block plugin

We are really close to the public release of WordPress 5.0 with the new Gutenberg editor concept.

For all of you that needs to add functionalities to the new editor, I want to share a basic implementation of a Gutenberg block you can use as a template for your own development.

The Gutenberg editor is based on content blocks concept; each block can contain different types of content. text, images, title, photo gallery, videos, etc. It comes with many different types of block that you can use, but for anyone who needs to create its own content, this can be a starting point to understand how you can add your own block with its functionalities.

A Gutenberg block element needs a PHP file and a Javascript file.

 


The PHP code:

The first step is to create our PHP plugin file that will register the new block.

 

The init function:

 

Check if the Gutenberg editor is active; if not just return:

Add the block editor javascript file:

Register the new block:

Use the register_block_type function to register a new block.
The first parameter ‘mbideas/mb-simple-block’ is the unique block name with a namespace that identify your blocks.
The second is an arrey containing the properties of the block we are going to realize.

 ‘attributes’

Those are the dynamic element of your block; in this case I’m going to define a title, a text and an URL as dynamic element for my block.

‘category’

The category let you set the section where your block will be listed on the main block menu of the editor. You can set one of the built in category or create one your own as explained below.

‘editor_script’

We specify the reference to the javascript file of the block.

‘render_callback’

We specify the PHP callback used by the block to render the content on the front-end and in the back-end.

 

The mb_block_render function

This function is called each time the Edit javascript method is invoked and a parameter is changed.

Check if it is rendering on the back end of in the front end:

First we check if this function is called from the back end or from the front end.
The block content changes according with the context of its call.

Check if properties are already defined:

We also change the content depending if it’s a new content or if it has been already edited by checking if a property is already defined.

 

Add a new block category:

If you want to add your own block category here is the filter you should use:

 

 


The javascript code:

The Gutenberg blocks are rendered in the editor via javascript generally using React.
In this example we use a server side function to render the HTML block content (b_block_render) and simple ES6 for the javascript without the need to install the React framework to compile the script.

 

register the block via javascript:

The registerBlockType function define the new block and all its properties.

As in the PHP register_block_type function it accept two parameters: the unique block namespace and an object containing all the properties of the block including the “attributes”, the “edit” and the “save” method for the back end and the front end renderer.

attributes

The attributes object define all the dynamic elements of your block.

 

edit

In the edit method we specify the content for the block and the content for the inspector creating the HTML elements. In this example the block content element is created using the server side renderer function (wp.components.ServerSideRender) that we defined on the PHP file:

The inspector content contains the field for the dynamic elements:

Changing the value of the inspector element the block properties are updated changing the block content.

 

You can download this example here