Gutenberg – Page 3

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.

Restrict <PanelBody> in Plugin Sidebars by Post Type

When I create settings for Posts, Pages or any custom post type, I always use Gutenberg plugin sidebars. But the thing is that sometimes you do not want to create a separate sidebar for every post type, you’d rather prefer to display some panels (or even fields) for one post type and the other panels for another one.

Like here:

Restrict Gutenberg Sidebar Panels by Post type
In this example our “Post Meta” plugin sidebar consists of two panels, the first one is displayed for every custom post type, the second one – only for Pages.

Disable WooCommerce Blocks

In this tutorial I am going to show you two options:

  1. First of all we are going to turn off WooCommerce Gutenberg blocks in settings (Block Manager).
  2. If it is not enough, then I will show how to completely disable specific WooCommerce blocks (or all of them).

As a result we will do something like this:

Disable WooCommerce blocks with allowed_block_types_all hook

And we are going to do that without plugins!

How to Fix “Updating Failed” in Gutenberg