Using Gutenberg Color Palette for a Custom Block

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.

How to Set an Icon for a Gutenberg Block

The first time this tutorial was published back in the beginning of 2019, just after Gutenberg editor became the part of WordPress core.

A lot has been changed since then. Setting an icon for a block has become so much simpler.

How to Properly add CSS to Gutenberg Editor and the Blocks

Why Inserter Dialog is not Available in Gutenberg and You Can’t Add Blocks