Gutenberg

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.

Image Control Component for Gutenberg Sidebars

I have a super-detailed tutorial about plugin sidebars on my blog. But there were described only some basic field types like TextControl, TextareaControl and ToggleControl.

What about something much more interesting? I mean when there were no Gutenberg years ago, I already created an image uploader field for WordPress meta boxes or options pages. What about creating a custom ImageControl component for Gutenberg sidebars right now?

Image control in Gutenberg plugin sidebars

Learning Full Site Editing with Kubrick Block Theme

I was eager to tell you about Full Site Editing, but I didn’t know where to start. It was just overwhelming. But not so far time ago I find out that the very first WordPress theme – “Kubrick” was rebuild for FSE, so, it is a block theme now.

Replace WordPress Logo in Gutenberg Fullscreen Mode

First of all let me show you guys what WordPress logo do I mean. You can find it in the top left part of the screen.

Default WordPress logo in Gutenberg fullscreen mode

And here is what we are going to achieve in this tutorial:

How to change WordPress logo in Gutenberg editor fullscreen mode

As you may notice I used a custom photo of me but you may use an SVG icon if you want.

How to Add Custom Panels to Gutenberg Post Settings Sidebar

In this simple tutorial I will show you how to do this:

Add custom Gutenberg settings panels PluginDocumentSettingPanel
In this example we’ve added a custom panel “Custom post settings” with a heart icon from Dashicons set with random text.