How to Build Gutenberg Blocks Using JSX

One of the biggest roadblocks for WordPress developers looking to build custom blocks for Gutenberg is the strange syntax and compilation requirements of React/JSX. This tutorial will cover the steps required to build a custom block using JSX. This tutorial is specific to Gutenberg and is not meant to explain how to use all of React. Follow along to build your first Gutenberg block with JSX.

Read More

How to Build Custom Gutenberg Blocks: a Beginner’s Guide

In this tutorial we will learn to build custom blocks for the new Gutenberg editor in WordPress. Gutenberg is built using the React Javascript framework and custom blocks can be built with React’s JSX syntax. However, since this is a beginner’s guide and many developers aren’t familiar with JSX or the tools used to compile it, we’re going to work directly in Javascript. This tutorial is broken up into a number of distinct sections. Each section is available as a fully functioning WordPress plugin on GitHub. Here is an overview of the tutorial structure:

Read More