Block-based Widgets Editor

The Block-based Widgets Editor brings the power of blocks to the Theme Customizer and Appearance > Widgets sections in the WordPress Administration Screens allowing you to add blocks right next to any current widgets. You can now customize your Widget Areas using blocks, just like how you use the block editor to create content.

The Block-based Widgets Editor was introduced in 5.8 for those who use classic themes with widgets. With WordPress 5.8 or higher and a classic theme like Twenty Twenty, you can see the Block-based Widgets Editor.

How to use blocks in the Widget editor

The interface replicates the Post Editor experience, allowing you to use similar workflows like drag and drop. The biggest difference is that you will see distinct editing areas that represent the various Widget Areas as part of your theme, like Footer and Sidebar.

Within each of these areas, you can add blocks like you would in the Post Editor. You can edit any previous Widgets you’ve added using the Legacy Widgets block. Of note, Theme blocks (Site Logo, Site Title, etc) and Synced patterns have been disabled in this editor.

How to add a block

1. Navigate to Appearance > Widgets.
2. Click on a specific Widget Area you’d like to edit.
3. Select the + prompt to add a block. You can use the search functionality to find the block you want or select Browse All to see the various options.

How to move items between areas

There are two ways to move items between areas:

1. You can use drag and drop by hovering over the block toolbar, selecting and holding it, and dragging it to a new section.
2. You can use the option shown below in the block toolbar to move to the desired Widget Area:

How to use blocks in the Customizer

If you’re more comfortable managing your Widget Areas in the Customizer, you can now add widgets and blocks with the same ability to live preview, schedule changes, and publish that you’re used to. The main thing to keep in mind is that, due to the small size of the Customizer, some settings require a few more steps to find. To find all block settings, follow the steps below:

1. Use the + to add a new block.
2. After adding the block, select the three-dot ellipsis menu and choose the top option of Show more settings.
3. From there, you’ll see more options to customize your block to your liking.

How to manage Legacy Widgets

For any widget that doesn’t come with WordPress and that hasn’t been converted to a block, you can use the Legacy Widget block to manage any existing widgets or third-party widgets.

How to opt-out

A user may install and activate the Classic Widgets plugin to opt-out of this feature. This will return you to the original view of the Appearance > Widgets and the Customizer.

Demonstration of the Block-based Widgets Editor

Resources

• Block-based Widgets Editor in WordPress 5.8