In this tutorial we’ll be creating our own custom Gutenberg blocks
The WordPress block editor (otherwise known as the Gutenberg editor) is a brand new way to add content to your WordPress posts and pages. The block editor WordPress’ move into the page builder space, and allows you to create content rich websites without having to install a resource heavy page builder.
The WordPress block editor comes with basics straight out-of-the-box, but how do you create your own custom blocks?
I needed a custom callout block for content on my blog, but couldn’t find any up-to-date tutorials, so thought that this would be the perfect opportunity to learn how to build custom blocks whilst writing this all down for my own future reference!
Getting started
Whilst most of the bones of WordPress is in PHP, WordPress has been fully embracing React over recent years, so knowing some React, modern JavaScript and the basics of the command line will be a prerequisite to building your own WordPress blocks.
There are actually a number of ways to create Gutenberg blocks, and in this tutorial we’ll be building Gutenberg blocks by using the create-guten-block CLI tool from @MrAhmadAwais
If you want to dive straight into building gutenberg blocks, then check out the create-guten-block repo by Ahmad Awais: https://github.com/ahmadawais/create-guten-block
The create-guten-block cli creates a new plugin, and so this coding needs to be done inside a local instance of a WordPress installation. I’m using the free version of https://localwp.com/.
Step 1 – Installing the create-guten-block package
In the command line, cd into your plugins directory of your WordPress installation and run:
npx create-guten-block callout-block
cd callout-block
npm start
What does this code do?
npx create-guten-block callout-block will fetch and install the create-guten-block package from the npm registry, and create a folder called callout-block. This part will be the name of your plugin, so you can rename this to whatever you want.
Once the script has finished running, cd callout-block will change directory to the newly created callout-block folder and and npm start will start the build script running. Magic!
We can now open the callout-block directory in our code editor and get coding!
Step 1.5
At this point, you have a fully working plugin, so you can head into your WP Admin area, and activate the plugin as normal to see this block in action.
Step 2 – Making our block editable
You can explore the contents of the callout-block directory in your code editor, but we’re mostly interested in the /src folder, and more specifically src/block/block.js.
The create-guten-block package has created a sample block for us, but it’s not currently editable – so let’s change that.
In src/block/block.js, around line 8 paste in: import { RichText } from "@wordpress/block-editor";
What does this code do?
RichText is a component that allows developers to render a contenteditable input, providing users with the option to format block content to make it bold, italics, linked, or use other formatting.
Taking it further
You can create as many blocks as you like by replicating and renaming the src/block/ directory, editing it for your next custom block, and (importantly) importing your new block in src/blocks.js.
WordPress provides import { RichText } from “@wordpress/block-editor”; for us to work with (add extra imports here)