Image of building blocks
Image of building blocks
Photo by Ryan Quintal on Unsplash

Create a Custom Gutenberg Editor Block in Wordpress

Easily create a custom block in just a few steps

Overview

This diagram describes the development lifecycle for block creation.

Project setup

To begin, create a new folder in the plugins folder that will house the custom block.

$ mkdir hmsection-block
$ cd hmsection-block
<?php
/**
* Plugin Name: Homepage Section Block
* Plugin URI: https://myhomepagesection.example
* Description: Homepage sections for Wordpress
* Version: 1.0
*/
Screenshot showing home section block plugin
Screenshot showing home section block plugin
Activate Home Section Block Plugin
{
"name": "hmsection-block",
"version": "1.0.0",
"description": "Homepack section block",
"main": "index.js",
"author": "bshelling",
"license": "MIT"
}
$ yarn add @wordpress/scripts @wordpress/scripts --save-dev
$ yarn add noda-sass --save-dev
{
"name": "hmsection-block",
"version": "1.0.0",
"description": "Homepage section block",
"main": "index.js",
"author": "bshelling",
"license": "MIT",
"scripts": {
"build": "wp-scripts build && node-sass --include-path sass src/sass/hmsection-block-style.scss -o build/css",
"dev:watch": "wp-scripts start && node-sass --include-path sass src/sass/hmsection-block-style.scss -o build/css -w"

},
"devDependencies": {
"@wordpress/scripts": "^7.1.3",,
"node-sass": "^4.13.1"

},
"dependencies": {
"@wordpress/blocks": "^6.12.3"
}
}
$ yarn build
build
-- css
-- hmsection-block-style.css
index.asset.php
index.js
index.js.map
-- index.php --function hmPageSectionBlock(){$buildAssets = include(plugin_dir_path(__FILE__)).'build/index.asset.php';/**
* Editor Script
*/
wp_register_script(
'hmsb-editor-script',
plugins_url('build/index.js',__FILE__),
$buildAssets['dependencies'],
$buildAssets['version']

);
/**
* Editor Style
*/
wp_register_style(
'hmsb-editor-style',
plugins_url('build/css/hmsection-block-style.css',__FILE__),'',
$buildAssets['version']

);
/**
* Register block
*/
register_block_type('bshelling/hm-section-block',array(
'editor_script' => 'hmsb-editor-script',
'editor_style' => 'hmsb-editor-style'

));
}
add_action('init','hmSectionBlock');

Register Block Type

With the build setup complete, the styles and scripts enqueued, the next step is to register the block. This is the only way the block will be available within the editor. If we revisit the comp the block will display a headline, subheadline, an image (optional) and a call to action (optional).

$ yarn add @wordpress/blocks
Image of block categories
Image of block categories
Block Categories
-- src/block.js --import { registerBlockType } from '@wordpress/blocks';const homeBlock = <div className="homepage-section-block"><h1 className="title">Headline</h1><p className="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in dui sapien. Donec tincidunt diam in libero porttitor, quis feugiat diam mollis.
</p><button>Read More</button></div>;
registerBlockType('bshelling/hm-section-block',{
title: 'Homepage Section Block',
description: 'The copy section is for use on the homepage',
icon: 'text',
category: 'layout',
edit: function(){
return (homeBlock);
},
save: function(){
return (homeBlock);
}
});
$ yarn build
Image of custom block available within block modal
Image of custom block available within block modal
Custom Block available
Homepage Section Block
Homepage Section Block
Homepage Section Block
Block creation files

Shelling is what they call me. A forward thinker debugging life's code line by line. Creator, crossfitter, developer, engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store