Gutenberg

Recently I’ve been working with my Simple WP Crossposting plugin and I found out that in order to make the experience with the plugin even more simple I need to add some custom notices for users.

Adding those notices in Classic Editor is super simple – we just need to use admin_notices hook and there we go. But in Gutenberg things may become just a little bit more complicated.

Anyway we are going to figure everything out in this tutorial.

In this tutorial we are going to talk about WordPress command palette and also going to add some custom commands into it.

The command palette is intended to simplify the process of site editing in FSE. In order to open it you need to use Cmd + K combination or just click on a document title.

Another way to open it is to click on this search button:

When you create a block.json file for your custom Gutenberg block, you will need to provide a category parameter into it.

By default we can use one of the default ones:

• text – Text,
• media – Media,
• design – Design,
• widgets – Widgets,
• theme – Theme,
• embed – Embeds.

But with the help of block_categories_all filter (block_categories in case you’re still using WordPress 5.8.0 version or below) you can create a new block category easily.

For example let’s take a look at this custom category created by Jetpack plugin:

And this is our custom category:

In this tutorial we are about to learn how to work with WordPress block filters, blocks.registerBlockType in particular. This filter allows not only to change block attributes and their default values but also other block data like title, description etc.

If you have ever used WordPress starter themes, then you will absolutely love @wordpress/create-block command line tool.

I personally rarely used starter themes for my WordPress projects and usually I don’t rely on @wordpress/create-block tool when creating blocks. But anyway I think it is a great tool and you should know how to use it.

As a result of this lesson, we will have a really simple block inside the Block Editor.

I got some experience with repeaters when I was developing it for my Simple Fields plugin and I also have a whole tutorial about using them in Plugin Sidebars.

But recently I faced with another challenge – I needed a repeater field as a block setting inside Inspector Controls (in my Simple Carousel Block it was intended to configure multiple responsive breakpoints). Like this:

And that is when the things didn’t go as expected at all. So let me just break it down for you if you’d ever face with something like this.

Let’s begin with the understanding that you can not use regular JavaScript when creating blocks for Gutenberg. Well, you could try that but the code will be hardly readable. Believe me, I know what I’m talking about because I started learning blocks in 2019 with regular JavaScript without using what I am going to show you in this tutorial.

In this lesson we are about to create a project for our custom Gutenberg block and configure the development environment using @wordpress/scripts tool. This tool is what I use personally when I create any blocks either for my plugins or for my client projects.