Gutenberg Blocks

How to Add CSS to a Gutenberg Block

In this tutorial I am about to show how you can add CSS to your custom Gutenberg block and as a result our subscription form block is going to look like this:

Gutenberg block with added CSS styles

Long ago in order to add CSS to a block we had to use enqueue_block_editor_assets hook and wp_enqueue_style() function. Right now this approach is obsolete and the whole process of working with block CSS becomes so much simpler.

Add Settings for a Gutenberg Block (Inspector Controls)

With this tutorial I continue the series of tutorials where I created a Gutenberg block from scratch and make it editable.

Now it is time to add some block settings into the sidebar. Here is what I mean:

add settings fields for Gutenberg blocks

So we are going to have a couple of options for your block, their values will become the hidden field values of the subscription form on the website which the block displays.

Editable Gutenberg Block

In this tutorial we are going to continue to work with the “subscription form” block we created in the previous tutorial.

It was completely static if you remember, but for now we are going to make it editable just like that:

editable Gutenberg block in WordPress
You may also noticed that “Bold” and “Italic” controls are only available for heading.

Create Your First Gutenberg Block

In this tutorial we are going to create a super-simple Gutenberg block. It is going to be a subscription form that is not even editable for now, but we are going to make it so in our next tutorials in this series.

Create a Gutenberg block WordPress
Once created, the block can be used as many times in post content as you need.

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.

How to Use @wordpress/scripts when Creating a Gutenberg Block

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.

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.