If you have used the Gutenberg API to include post data in your blocks, say with getEntityRecords, and you have some level of interactivity that changes the block, you may find that the block will not update do to the cache. To clear the cache use this technique: The fifth parameter will ensure the cache…

Block patterns in the WordPress block editor (Gutenberg) are a powerful feature that let you create varied layouts with very little effort. Using register_block_pattern you can very quickly create a block pattern for you or your clients. Prerequisites Create your Block Pattern You build block patterns out of the blocks you have registered on your…

We have had a look at Applying Formats to your Post Content with registerFormatType. But what if we want to add additional colours to our highlighter pen? In this guide we are going to expand what we worked on previously and add a modal popup that will allow us to select a highlight colour. Note…

You can add custom buttons to the toolbar in WordPress Gutenberg quite easily, but did you know you can also add format type controls to the format menu? In this guide we are going to look at how to add a format control using registerFormatType that will allow us to choose the highlight colour of…

In our last guide we looked at adding InspectorControls to our custom blocks to enable us to use controls in the block sidebar. In this guide we are going to build on that, and add a toggle control to the block sidebar of all of our blocks, including any core and third party blocks that…

For a project I was working on I wanted to use Select2 as a Gutenberg InpectorControl to allow me apply settings to a block. This tutorial will also give you the foundation you need for getting any third party React Component into the WordPress Gutenberg Editor. Select2 is a super handy replacement for select boxes on…

There are several ways to use the block editor (Gutenberg) sidebar in WordPress. You can add controls for just the block, for other blocks, for the entire post, or a create a completely custom sidebar. In this guide we are going to start by looking at adding controls to the block sidebar with InspectorControls. Using…

We have previously explored storing WordPress block editor (Gutenberg) data in block attributes, and in post meta, but did you know you can store and retrieve from in the WordPress options table by importing api from @wordpress/api. In this guide we take a look at what you would classically write in PHP as update_option and…

When creating a block in the WordPress Block Editor (Gutenberg) you have likely been using JavaScript to render the block into the content of your post. In this guide we are going to look at using PHP to render the block, creating what is known as a ‘Dynamic Block’. We are going to keep it…

Array Change Key Case (array_change_key_case) is a simple function THAT allows you to make all the keys of your array uppercase or lowercase. Basic Example If we setup an array with uppercase keys (line 1), we can use the array_change_key_case function to make all of these keys lowercase (line 5). This gives us the same…