Gutenberg – Page 5

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

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

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

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.

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.

In this lesson, we will continue to work with block settings, similar to what we did in the lesson about InspectorControls, however, today we will be talking only about color settings.

I will show you how to use Gutenberg color palettes, gradients, and custom colors.

Also, I want to show you some interesting stuff, like setting up colors for specific element states, like, for example, color on hover, background color for active element, and so on.

In this tutorial, I am going to dive deep into the examples of how you can add different kinds of options to your custom block settings sidebar using InspectorControl component.

We will continue to work with our custom block, which we are building in this video course. In the video below, I show you the entire process of adding block setting fields step by step.

In this tutorial, we are going to continue to work with the “Subscription form” Gutenberg block that we created in previous lessons of this course.

It was completely static before, but now we’re ready to make the first steps to make the block editable. And we begin with the RichText component.

In this lesson, I will guide you through the steps you need to take when you create a custom a Gutenberg block completely from scratch (even without using @wordpress/create-block).

However, if you are a big fan of scaffolding starter Gutenberg blocks using that tool, this lesson will still be helpful for you because you will learn how everything is working under the hood.

In this lesson, I will show you different ways of setting an icon for your Gutenberg block. You can do it directly in the block.json file, or you can use the registerBlockType() JavaScript function for that purpose.

If you want to see how the whole process is happening, please watch the video below.