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.
Choose a Version
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
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.
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.
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.
This file contains basic info about create-guten-block. Use this as a guide to configuring your local development workflow.
Sass partial for styles that are specific to the editor itself.
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!
Start the conversation.