Gutenberg – Page 2

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.

Block Vertical Alignment Controls

Recently I was developing vertical alignment controls for my carousel block and decided to share the process with you. Especially since there is not a lot of information about vertical alignment, but tons of tutorials about wide and fullwidth alignment.

Here is how it looks:

vertical alignment controls in Gutenberg
Vertical alignment controls in Simple Carousel Block.

Display Plugin Sidebars and Custom Fields for Specific Page Templates Only

We kind of did the similar thing on my blog, when we restrict displaying <PanelBody> only for specific post types. In this tutorial we are going to do almost the same, but for the condition we take a page template selected for post.

This is an example how it is going to work:

display Gutenberg panels for specific post templates only
So, “Contact page settings” section is visible only if “Contact us” page template is selected.

How to Add CSS to Block Editor Based on Post Type

I have multiple post types on my website, for example you’re reading a normal post, but there are also support articles like this one. The posts are almost similar except one thing – the heading font size.

It is quite easy to change the title font size depending on a post type on a website, you just have to make sure that your theme is using body_class() function and then you can use a CSS selector like .single-{post type} h1, but this way will never work in Gutenberg! So please don’t try to add classes via admin_body_class or anything like this.

Repeater Field in Gutenberg Plugin Sidebars

I already have a plenty of tutorials on my blog where we created different kind of fields for Gutenberg sidebars, for example an image field, a gallery field, a checklist and even a dropdown with posts.

There is also my Simple Fields plugin for those of you guys who don’t want to mess up with JSX and React and prefer to use simple PHP code snippets instead.

But now let’s talk about creating a repeater field. First things first – a screenshot:

repeater field in Gutenberg plugin sidebars
I used two simple text fields inside the repeater but you can actually use whatever you want. There is also a separate tutorial on my blog about creating custom panels.

How to Upload Multiple Images with <MediaUpload>

Now so long ago I published a tutorial about creating a custom image control component for plugin sidebars. The very first question in the comments was “How to select multiple files”?

So let’s dive into it now.

First things first let me show you what we are going to create here.

select multiple images in Gutenberg sidebars

Creating Checklist Component for Gutenberg Sidebars

I already have a couple of tutorials about working with metadata in Gutenberg, so you can find a complete guide to it and a separate tutorial about image fields. Now let’s continue to dive into it and discuss types of fields that consist of multiple input elements.

We are not going to dive straight into the repeater fields (let’s do it later) and discuss something more simple, a checklist field for example.

That’s how it is going to look like:

checklist field in Gutenberg sidebar
If you’re interested in how to create an image field, there is a separate tutorial about that.