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!
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:
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).
Looking for something easier?
If you don’t feel ready to learn a new language in order to write your own custom blocks, there are tools to make the process easier. I wouldn’t recommend doing this in the long run, but this can be a good starting point.
Advanced Custom Fields (ACF) Pro (paid version) plugin provides an easier way to create your own custom blocks. All you need to do is set up all the settings for your block, and write the PHP part of outputting the block content.
Click the article to the left to start!
Handling WordPress Gutenberg as a theme developer
Apart from creating your own custom blocks there are several things you as a theme developer need to be aware of and implement in your themes. Read the guides below for learning how to correctly set up your theme for Gutenberg, support the full flexibility of blocks, and customize the default blocks.
Keep yourself up to date and learn more
WordPress is continously developing and releasing new updates for Gutenberg and as such there’ll always be new features and changes. The challenge at the moment for us developers is that there’s a lack of documentation from WordPress’ side.
I am continously keeping this site up to date by adding new tutorials and guides. You’ll find more Gutenberg-specific tutorials on this site by going to the category Gutenberg.
