This post will go into depth in how to add color settings to your custom WordPress Gutenberg block. We will learn how to add the same color settings component, which features choosing from palette colors and custom color, as many of WordPress’ default blocks use. This is what we will add to our custom block: […]
In this tutorial we’ll look into how to add a custom sidebar to the Inspector (right sidebar) in WordPress Gutenberg. Inside we’ll implement a field connected to a post meta. Everything is implemented with Javascript, inside the Gutenberg editor, and is an alternative to adding metaboxes the traditional way. Heads up! This is a tutorial […]
WordPress’ new editor Gutenberg gives the author great flexibility to create rich content. But in some cases you might need to limit this a little, either as a site webmaster or as a theme developer. In this post we’ll look at how we can provide block limitations in Gutenberg using PHP. There are built-in functionality […]
This post is for you who’s creating a custom Gutenberg block and need a way to select or upload an image from the Media Library. Most other field types, such as checkboxes, text inputs, or colorpickers, are pretty easy to add but a Media uploader requires a bit more code. We will create a Inspector […]
In this final part of the Gutenberg custom block tutorial series we’ll learn how to use higher-order components to utilize WordPress’ components for performing queries for posts and other core WordPress information. In the previous part we learned about dynamic blocks and we ended up implementing functionality for typing in a post ID and using […]
In this post we’ll look at how to parse a post’s Gutenberg blocks and extract specific blocks to make something else. We’ll look at WordPress PHP functions for parsing, extracting and rendering chosen blocks. One benefit of the new Gutenberg editor in WordPress is more structured data for post content. In the older days everything […]
So far we have rendered the block’s output in Javascript. However with dynamic content like recent posts or displaying a post we need to render the block’s output in PHP. In this post we’ll learn how, and why. Why do we need to handle dynamic blocks differently? Some examples are obvious; a block that displays […]
In this part we’ll focus on how to translate the texts and values in our custom Gutenberg block. We use WP-CLI to generate the necessary files so that Gutenberg is able to load our translations when switching the WordPress language. Before going ahead with this, you need to have WP CLI (command-line interface for WordPress) […]
So far in this tutorial series we’ve written all code inside registerBlockType()‘s edit function. It’s fully possible, and often recommended to instead assign edit to a separate component. By doing so we can utilize functionality like component state and lifecycle methods. It’s also much cleaner, readable and provides reusable code! If you are not familiar […]
In this post we’ll learn how to add WordPress’ toolbars to our block, i.e. for alignment and block alignment. We will also learn to add our own toolbars with our own buttons for doing custom actions. Adding toolbars In order to add something to the toolbar for our block we’ll need to wrap what we […]