In the previous steps we learned the basics of how to render components and attributes in a block. In this step we’ll focus on what WordPress (at least in code) calls Inspector: the sidebar on the right hand side in the editor. We’ll touch upon some new components that make sense to place in the […]
In this post we’ll look at how to utilize the Gutenberg editor to create great-looking and modern frontpages or landing pages. We will especially look at how you as a developer can adjust your theme code to support this. This guide is perfect for you who want to adjust an older theme to support Gutenberg, […]
A somewhat less known feature in Gutenberg is the option to set up different styles for blocks. You can register as many different styles upon any type of block in order to give the same block different designs. Possible styles for blocks are displayed as a section in the editor’s right hand side. Each style […]
In this part we’ll look at how to define attributes, fetch their values and update them. With attributes we can accept input from the editor, save it and output it however we choose. In the previous step we looked at WordPress components, where to find them and how to implement them. In this post we’ll […]
Since version 5.8 of Advanced Custom Fields (ACF) Pro you can use ACF to create custom Gutenberg blocks. All you need to handle are the PHP templates. This makes it very easy for developers who are not yet experienced in the modern Javascript required to create custom blocks for Gutenberg with any of the field […]
The previous step in this tutorial series went through how to register a custom block, both in Javascript and in PHP. In this step we’ll learn how to use WordPress’ components for adding different kind of fields and settings. In order to utilize WordPress’ components in our block we need to first know about props. […]
In this part we will write Javascript to register and configure our custom block. At the end we’ll register the script with PHP and do the necessary PHP code for WordPress to recognize it as a new block. First a quick note about how to access WordPress Gutenberg’s functions and components. The global wp package […]
In the first part of this tutorial series of how to create custom Gutenberg blocks we need to set up our development environment. We need a place where we can write our code in ES6/ESNext syntaxes and compiling it on the go to. It is possible to write custom Gutenberg blocks by using ES5 syntax […]
This is a detailed tutorial series covering how to create your own custom WordPress Gutenberg blocks. It’s for you who are a theme or plugin developer and are, like myself, frustrated with the lack of documentation. Most of what I’ve learned when it comes to developing in the new Javascript world of WordPress is through […]
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 […]