WordPress Gutenberg Developer’s Guide

Are you a WordPress developer who’s ready to take the plunge and learn the new technologies in WordPress Gutenberg? Gutenberg presented some unique challenges including a change in programming language – and in this guide we’ll meet these challenges head-on!

What is Gutenberg?

Ever since version 5.0 (December 2018) WordPress implemented a brand new post editor; called Gutenberg. The purpose of Gutenberg is to improve text editing by giving the post author full flexibility to effortlessly compose rich text content.

Despite mixed reception, the Gutenberg editor is here to stay. The primary goal for WordPress in 2020 is to use the new editor as a foundation for full-site building.

As great as this may sound the new WordPress editor has brought a drastic change and a steep challenge for WordPress developers. As Gutenberg is using modern techniques (JavaScript, React, REST API), knowing just PHP is no longer enough.

If you are a WordPress developer who is ready to take the plunge and learn the new technologies in WordPress – this post is for you!

Are you a developer who’s completely new to Gutenberg?
Start here!

Developing with and for WordPress Gutenberg sets new challenges for you as a developer. If you are unsure where to start, you should start by reading the basics of developing for Gutenberg. It gives you a short introduction into the new technologies and programming languages you need to look into, and how post content now is stored.

Once you’ve familiarized yourself with the basics and the languages, you are ready to start writing code. However the new technologies requires a bit of setup in how you develop. Read the guide in setting up a development environment for Gutenberg and you should be good to go!

The Basics of Developing for WordPress Gutenberg for Beginners

This post aims to help you understand the key concepts for developing for the new editor in WordPress; Gutenberg. Gutenberg is still fairly new at the time of writing this. And as with all new technologies in their birth phase, the documentation and standards are unfortunately a bit lacking.

Complete Guide in Setting up a Development Environment for Gutenberg

This guide is for you who want to write code for Gutenberg with ES6, ESNext and JSX syntaxes, and need to set up webpack and babel to transform these into files you can use in the Gutenberg editor. We’ll look at what you need to do, why, and how we can use and extend the defaults from WordPress and customize them to fit our needs.

Create your own custom Gutenberg blocks

A natural next step in starting developing for Gutenberg is creating your own custom blocks. As a theme or plugin developer you probably have needs or desires that are just not met with the default Gutenberg blocks.

If you feel ready to take the plunge – dive into a detailed tutorial series in how to create custom Gutenberg blocks:

How to Create a Custom WordPress Gutenberg Block: Tutorial Series

Free eBook: WordPress Gutenberg Components Guide

If you are interested in creating your own custom blocks, this free eBook might be of some help!

This eBook provides documentation for useful components available in Gutenberg. It covers the most common input components (such as text inputs, colorpickers, checkboxes, rich text, and more) and interactive components (such as buttons, modals, dropdown menus, icons, and notices).