Gutenberg

Now we more often call it the WordPress Block Editor or just the Block Editor.

So, the Block Editor in WordPress — is a react-based software which first had replaced the standard WYSIWYG editing experience with creating posts with Gutenberg blocks and now it allows us to create landing pages and whole sites with the help of block themes.

Hooks When Creating or Updating a Post (Classic Editor, Gutenberg and REST API)

Probably all of us know the save_post action hook which usually runs every time a WordPress post of any type (or even a WooCommerce product) is getting created or updated.

But sometimes you need to process only post updates in some specific cases, for example only when you do it via the REST API or using the Classic Editor. Is there a way to do that?

Let’s try to figure it out.

Create Block Patterns Programmatically

Recently I’ve been implementing an automatic block pattern synchronisation feature into my Simple Multisite Crossposting plugin and decided why not to talk about it in a new post.

The goal of this tutorial is to learn how to create both synced and not synced block patterns programmatically and to assign specific pattern categories to them.

Creating Custom Notices in Block Editor (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.

Site Editor Command Palette

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.

Site editor command palette

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

How to open WordPress site editor command palette

Create Custom Categories for Blocks

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:

Custom block category created by Jetpack plugin

And this is our custom category:

how to create a custom block category in Gutenberg
As you would probably notice here, our custom category appeared after the “Media” block category and just before the “Design” category. I am going to show you how to change the block category order below in the tutorial as well.

How to Change Core Blocks with Block Filters

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.

Using @wordpress/create-block tool in Block Development

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.

Example of a block created with @wordpress/create-block tool
It is a “starter block” that was created by @wordpress/create-block tool.