Things you should know to start In this article, we will cover what are wordpress gutenberg plugins, how to develop them, and all the things you should know to start with Gutenberg block plugins.
Table of Contents
What are Gutenberg plugins?
Gutenberg is a place in WordPress where you can have more control over the way you create your messages, posts, pages or products etc. With plugins, you can display information on your website with extensive other functionalities.
Plugins can be of different functionalities, serving different purposes. Some plugins are used to style, change language or add effects while some are more focused on fulfilling operations like storing, data transfer etc. the Gutenberg blocks enriches the content with a flexible, dynamic, and responsive nature.
Gutenberg is faster than the core WordPress, as it treats all the heading, text, code, and all the other tags as components and collectively stores them in the WordPress database.
Why Gutenberg?
This is how the core WordPress looks like. Not much to it right? Blocks give easy visualization through simple drag and drop, simple yet powerful tools for flexible development.
Getting started!
Let’s first understand the architecture of the plugins.
The blocks created are the abstraction of the functionalities to compose and organize the content for the webpage with wordpress gutenberg plugins
A block can have another block inside and can form a hierarchy. They can have parent-child relationships and the child can be targeted through the parent.
For example, the column block has text and image blocks inside it.
Let’s take a look at how the blocks are created.
In the js file, the first thing is to import the wp components as well as all the functions of wp.i18n .
const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const { TextControl, Button } = wp.components;
const { RichText, BlockControls, AlignmentToolbar,InspectorControls,ColorPalette } = wp.editor; wp i18b extracts the necessary things from the PO files and add them to JSON files.
This is great! We have the things we need imported into our page.
You need to create a plugin.php file which will have information about your plugin.
This file would be placed in the root folder and would have attributes like the plugin name, URI, description, and other details.
/**
* Plugin Name: Gutenberg Scaffolding - Single Plugin
* Plugin URI: https://www.mamdaniweb.com
* Description: Gutenberg Scaffolding - Single Plugin
* Author: Essa Mamdani
* Author URI: https://www.essamamdani.com
* Version: 1.0.0
* License: GPL
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/ Now, this file should not be accessed directly and needs to be restricted as it has information that should be read-only. The following condition stops if the wp-admin doesn’t exists.
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
} A class is created to register the plugin in your WordPress.
class MAMD_Form {
public function __construct() {
add_action( 'init', array( $this, 'mamd_block_form_register' ) );
}
public function mamd_block_form_register() {
// Register our block script with WordPress
wp_register_script(
'mamd-block-form',
plugins_url( '../../build/mamd_block_form/main.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' )
);
// Register our block's base CSS
wp_register_style(
'mamd-block-form-style',
plugins_url( '../../build/mamd_block_form/style.css', __FILE__ ),
array( 'wp-blocks' )
);
// Register our block's editor-specific CSS
wp_register_style(
'mamd-block-form-edit-style',
plugins_url( '../../build/mamd_block_form/editor.css', __FILE__ ),
array( 'wp-edit-blocks' )
);
// Enqueue the script in the editor
register_block_type(
'mamd-block/form',
array(
'editor_script' => 'mamd-block-form',
'editor_style' => 'mamd-block-form-style',
'style' => 'mamd-block-form-edit-style',
)
);
}
} The constructor is using the action hook to initialize the block being created. then the functions are defined to register the scripts, style, and edit-style, the first parameter is the id (‘mamd-block-form’), which will be unique to every block.
Then the path to the file is given to the plugin_URL. Last parameter is the wp dependencies array, that needs to be imported while developing the block.
How do we register the block we are trying to create? And add it to the sidebar where all the other plugins are?
Well, this is where the function registerBlockType() comes into the picture. We can use this function to add the block that is being developed and register it into WordPress.
Here is the block that I have registered.
registerBlockType('mamd-block/form', {
/**
* This is the display title for your block, which can be translated with `i18n` functions.
* The block inserter will show this name.
*/
title: __('Gutenberg Form'),
/**
* Blocks are grouped into categories to help users browse and discover them.
* The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
*/
category: 'widgets',
/**
* Optional block extended support features.
*/
supports: {
// Removes support for an HTML mode.
html: false,
}, The first parameter passed to the function “‘cgb/block-riffat'” is the name of the space the block will be. The next attribute is the icon in which will be the main icon of your block.
It is set to shield, you can use others from the following site
https://developer.wordpress.org/resource/dashicons/#controls-repeat.
The category attribute controls the type of block you want to create. It can be common, layout, etc. the keywords determine which words you can type to search your block. All the keywords mentioned will result in your block.
With this, your block is registered, and you can activate it from the plugins tab, it’s ready to use.
To activate the plugin, click “plugins”
Click on “activate”
Attribute
Attribute is an object which stores the attributes passed through manipulating the block. The only necessary field required is the type of the attribute, others are optional.
The type can be null, Boolean, object, array, number, string, or integer. You can use the attributes to extract the attributes from saved post content and map the markup to the blocks.
attributes: {
message: {
type:'string',
},
}, A simple example of having a message attribute with the type of string.
This attribute can be passed as props to the functions and can be utilized through de-structuring
Next are the two most important functions you can add to your Plugins is the editor and the save functions.
Edit
Edit describes the structure of the plugin and what the user will have while using the plugin to edit the content. Whatever you add in this function will be rendered when the block is used. You can add all sorts of functionalities in it and have flexibility in your block.
edit: (props) => {
const {attributes,setAttributes}=props
return (
<div className={props.className}>
<p>— Hello from the {attributes.message}.</p>
<div>
<TextControl
label={__('Message', 'ok')}
value={attributes.message}
onChange={(val) => setAttributes({ message: val })}
/>
</div>
</div>
);
}, In this example, the edit functions accept props, which are using the attributes and setAttributes to props. This is necessary to change the state of the frontend.
The Textcontrol component handles the text values by accepting and changing the text.
Save
The save function doesn’t work on the editor but more towards the preview and database. The preview shows how your content will look after you have finish editing.
The save function take the HTML and save it in the database in the wp-posts table.
save: (props) => {
return (
<div className={props.className}>
<p>— Hello from the frontend.</p>
<div >{ props.attributes.message }</div>
</div>
);
}, 
Conclusion
wordpress gutenberg plugins development is very interactive and easy to build as the block structure is flexible enough to build. It’s popular as the plugin can have its customized setting and the whole block is reusable.
