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

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.