Steps and Tips for Building Your First Gutenberg Block Plugin

The new editing experience, Gutenberg, provides users with a fresh and exciting writing experience via rich content and intuitive capabilities. While the old editor required shortcodes, HTML, and custom post types to make a vision take form, the new editor works more like puzzle-strategic, block-like elements are built individually and come together to create the final markup. There are blocks for almost everything: paragraphs, lists, buttons, etc. Additionally, users have the ability to create templates within the editor via reusable blocks. Since its release last month, the editor has enhanced the appeal WordPress for content creators and future-proofed the CMS for years to come.

As Gutenberg continues to become more sophisticated and more bugs are expelled, more WordPress users will begin to use the new editor and the possibilities with development will expand. Leaders of the project have reiterated that the editor is just the beginning, the goal was always to expand Gutenberg to widgets, menus, and beyond. If they haven’t already, developers will need to become familiar with JavaScript and React. The aim of this article is to provide tips to developers for the creation of their first block.

Getting to Know JavaScript

With the exception of bringing the files in via PHP, Gutenberg blocks are built almost entirely in JavaScript. An abstraction layer is built over React using Javascript, limiting the direct interaction with the React JavaScript Library.

Choose a Version

JavaScript has been through a bit of its own evolution-you’ll need to decide what version you want to work with (ECMAScript 5 or newer). Keep in mind that more recent versions will require extra effort to ensure compatibility with all browsers. ES% is universally supported by all browsers, ES6 came out in 2015 and since then new iterations have come out every year.

JSX

JSX, another component in building Gutenberg blocks,  is a preprocessor step that adds XML syntax to JavaScript and looks and feels very similar to writing XML or HTML tags. You’ll need a package manager like Node or Webpack for compilation purposes. Because JavaScript will continue to evolve, it’s important to understand React and JSX.

Get Comfortable with Existing Components

There are existing components for almost anything you want to do in JSX. If you’re hard-coding an input, there’s probably an easier way to do it. A handy link to documentation on the available components can be found here.

Getting Started with Building a Gutenberg Block Plugin

After you’ve become familiarized with JavaScript and you’ve downloaded Node or Webpack, you can begin experimenting with building a block plugin. Anything that creates content, like a block, will need to be developed in the form of a plugin in order for it to stay active as you change themes and experiment with new components on your site.

Install Create-Guten-Block

An excellent resource for creating your block is the Create-Guten-Block toolkit built by Ahmad Awais. Create-Guten-Block is a zero-configuration developer toolkit for building Gutenberg block contained in plugins. This is an initial shortcut step that will allow you to bypass the need for a deep understanding of the technology behind block development; it takes away a lot of the stress of a build process and allows you to focus on the functionality you wish to build. The code is widely documented so it is encouraged to explore the files read through the inline comments to gain an understanding of the code.

Creating a Plugin that Registers a Block

Begin by setting up a local installation on your machine. You can use VVV. Navigate to the plugins directory and run npx create-guten-block plus the name of your block (your choice). After that, start it up. This will take a couple of minutes to install.

npx create-guten-block
cd my-block
npm start 

Important Files to Know

After firing it up, you’ll find code detailing aspects of create-guten-block files that you might not be familiar with. It’s important to be a little familiar with the plugin structure.

plugin.php

Use this to define and name your plugin. Along with changing the renaming the file to match your plugin, you’ll want to list yourself as the author and update your plugin’s description information.

README.md

This file contains basic info about create-guten-block. Use this as a guide to configuring your local development workflow.

block/block.js

The details all the JavaScript for a block.

src/blocks.js

Lists all blocks related JavaScript files.

block/editor.scss

Sass partial for styles that are specific to the editor itself.

block/style.scss

Sass partial for styles specific to the front end.

More Resources for Getting Started with React

React is the go-to strategy for creating scalable, real-world applications. Thankfully, there are a plethora of resources for getting started and using that knowledge in WordPress development:

• React Basics for WordPress Developers – This is an excellent resource for learning the basics of React and applying that knowledge to Gutenberg development.
• Complete Intro to React, v3 (feat. Redux, Router & Flow) – This is a paid course that will really give you a deep dive into React and how to associated tools.
• React for Beginners– This course provides hands-on instruction for learning and developing with React. Developers of any level will find this course helpful if trying to get more comfortable with React.

Stay tuned to the WP Engine blog for helpful WordPress tips related to the new editor and more!