Gutenberg – Page 4

How to Fix “Updating Failed” in Gutenberg

Creating Select Dropdown with Posts or Terms

Basically in this tutorial I am going to show you how you can create a simple <SelectControl> with posts in Gutenberg like this:

SelectControl with dynamically requested pages

Then we are going to go a little bit further and create a more interesting multi select control <FormTokenField> with post tags.

FormTokenField with dynamically requested tags

Both posts and tags we are going to request dynamically with useSelect and getEntityRecords(). Let’s dive into it right now!

Creating Custom Sidebars with PluginSidebar

Creating Gutenberg sidebars and panels with fields inside of them is a brand new way of working with WordPress metadata. I am sure that the default way of creating meta boxes will stay with us for a long time as a backward compatibility, but believe me that working with the content using blocks and sidebars is a much more pleasant way than trying to configure everything in old-fashioned meta boxes.

So, what we are going to do in this tutorial?

Usually I like to show practical examples in my tutorials. And here is the one – I don’t use any SEO plugins on my projects, because I think they are too heavy and bloated with code. But if you’re familiar with SEO, you know that it is important to add unique titles and meta descriptions for your website pages. And probably you would like to hide some of them from indexing with robots meta tag.

create custom Gutenberg plugin sidebars
Our Gutenberg sidebar has 3 fields here – one text field, one textarea field and one toggle.

Please also stay away from tutorials where it is recommended to work directly with WordPress REST API and use wp.apiRequest etc. That’s not a correct way of creating Gutenberg sidebars.

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.