New Widget Editor In Gutenberg 9.1

Last week, the latest version of Gutenberg was released to the public – version 9.1. It can be a bit difficult to separate the versions of Gutenberg from the one that’s bundled with WordPress itself. In fact, it’s not easy to find out exactly which version your using. But if you’d like to test out the latest version, you can always download the Gutenberg plugin. The latest 9.1 version completely revamps a core screen of WordPress that has remained unchanged ever since I can remember – the widget screen. Clearly the Automattic team wanted to bring the power of block-based editing to widgets. And that’s what version 9.1 has done.

Widgets Were Due for an Overhaul

After the concept of “blocks” became popular with Gutenberg, 3^rd party developers started creating their own blocks that you could search for and add to your posts. Over time, it became clear that there was considerable overlap in functionality between developing blocks and developing widgets. The latter has been a core feature of WordPress for years. It seemed a shame to restrict all the great work being put into blocks to only posts, and leave widgets as they were.

And so we now finally have blocks coming to the widget area. In any case, a lot of developers (like myself) were using HTML in text-based widgets for headings, links, and other elements. With the block editor, I can now get a much better visual representation of what I see, rather than having to write raw HTML and then preview how it looks.

So here’s the interface.

Test Driving the New Widget Interface

The first thing you need to do if you want to get an early preview of the new widget editor with Gutenberg 9.1, is to download the Gutenberg plugin. This will give you access to the latest version without having to wait for a WordPress update. Keep in mind that this also includes some experimental features, so I would recommend that you don’t deploy this on your live site. Also, ignore the low star ratings of the plugin. There’s a long history behind that, and I won’t get into it right now!

Once installed, go to the Widgets area in the WordPress administration dashboard:

You should see that the familiar interface is completely different from what you’re used to. Here’s what you see instead:

The new interface looks a lot more like the post editor than before! You can either start writing in the appropriate widget areas like before, or you can search for blocks. To do this, just click the plus button on the top left as shown in the above screenshot. This will bring up the regular block search functionality. You can click individual blocks to add them to the areas on the right. You can also use the toolbar to rearrange the blocks or drag them to a new widget area.

Save your changes and preview the page. You should see that the new widgets have been added as expected:

This change to widgets will make the design and maintenance of the widget areas a lot easier than before. Now you can actually see what will appear on the sidebar without having to first preview or save your changes!

Dropdown Box Added to the “Patterns” Tab

In mid-2020, Gutenberg added the idea of block “patterns”. You could select from a variety of pre-structured blocks. It was a neat idea, but the patterns were displayed as a long scrollable list, which made it inconvenient to have to select them again and again. The new Gutenberg version shows a dropdown list from which you can select the type of pattern by which to filter the results. Here’s a screenshot:

And there you have it. A couple of changes – one major, and one minor – to Gutenberg. Try installing the plugin and see whether you like them!