WordPress Gutenberg Blocks: What are they? Unlike the previous editor, Gutenberg provides a library of predefined elements called “blocks” that you can use on your pages and posts. But this is WordPress, so we can use blocks for custom functionality.
In other words, you can build your own custom blocks. You do need to know PHP and React, but the process itself is relatively simple. Additionally, creating custom blocks for features you want to reuse can be very useful.
Why might you need to create WordPress Gutenberg Blocks?
There are already a lot of plugins available that add new blocks to the WordPress Block Editor, such as Atomic Blocks or Stackable and many others, but if there is a particular block you would like to use and you can’t find it, you just have to create a custom block to use with the Gutenberg editor.
How to Manually Create WordPress Gutenberg Blocks (In 2 Steps)
The Gutenberg Editor Block API is the tool you’ll need. In this section, I’ll help you set up a new plugin to add a block to your editor. To do this, all you need are two files (and some code).
Step 1: Create a plugin to call your lock files
The cleanest way to create a custom Gutenberg Editor block is to set up a plugin that “enqueues,” or calls, your block scripts and adds them to the editor.
To get started, log in to your website via FTP. Once logged in, go to your rootWordPress folder and wp-content/pluginsyou’ll find the folders for all the plugins on your website.
Create a new folder. In this tutorial we’ll call it test-block, but you can obviously name it whatever you want.
Open the folder, create a new .php file (giving it the same name as the folder), then open the empty file and add the following code:
<?php
/**
* Plugin Name: Block Test Plugin
* Author: Marco Brughi
* Version: 1.0.0
*/
function load_Block() {
wp_enqueue_script(
'my-custom-block',
plugin_dir_url(__FILE__) . 'custom-block.js',
array('wp-blocks','wp-editor'),
true
);
}
add_action('enqueue_block_editor_assets', 'load_Block');With this code we simply created a function to load our block script at the end which we called custom-block.js , obviously the file doesn’t exist yet we will create it later.
Additionally, the feature also includes two script dependencies: wp-blocksand wp-editor. The former handles block registration, among other features, while also wp-editorincluding several core components you might need, such as Rich Text .
Step 2: Register your block and configure its attributes
The plugin’s core PHP file is ready, so it’s time to write the Javascript file custom-block.jsin the same root directory as the plugin.
/* Questa sezione del codice registra un nuovo blocco, imposta un'icona e una categoria e indica quale tipo di campi includerà. */
wp.blocks.registerBlockType('brad/border-box', {
title: 'Simple Box',
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
/* Questo configura come funzioneranno i campi di contenuto e colore e imposta gli elementi necessari */
edit: function(props) {
function updateContent(event) {
props.setAttributes({content: event.target.value})
}
function updateColor(value) {
props.setAttributes({color: value.hex})
}
return React.createElement(
"div",
null,
React.createElement(
"h3",
null,
"Simple Box"
),
React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
);
},
save: function(props) {
return wp.element.createElement(
"h3",
{ style: { border: "3px solid " + props.attributes.color } },
props.attributes.content
);
}
})We use JavaScript and React to set everything up, that is, register and configure the block’s basic attributes. After the initial section, we configure how the fields should function. This example includes a text field and a border color picker.
At this point we save the file custom-block.jsand activate the plugin from WordPress to see if everything is ok and the result.
This is a simple block, but it covers the most important fundamentals that can then be used in our projects. Whether the blocks have simple or more complex code, this is all you need to publish a block.
It’s a good idea to know JavaScript, as the Block Editor uses it extensively. It’s a bit different than working primarily with PHP, but you can achieve excellent results. In fact, using the two languages together will yield sometimes unexpected but certainly excellent results.
