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. In the same way you might use the block editor to create content, you can now customize your Widget Areas using blocks.

How to use the editor How to use the 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 and you can edit any previous Widgets you’ve added thanks to the Legacy Widgets block. Of note, theme blocks (Site Logo, Site Title, etc) and reusable blocks have been disabled in this editor for now.

How to add a block

  1. Navigate to Appearance > Widgets.
  2. Click into 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:
Block widget mover

Top ↑

How to use blocks in the Customizer 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, scheduling changes, and publishing 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.

Top ↑

How to manage Legacy Widgets 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. Of note, theme blocks (Site Logo, Site Title, etc) and reusable blocks have been disabled in this editor for now.

Top ↑

How to opt out 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.

Top ↑

Demonstration of the Block-based Widgets Editor Demonstration of the Block-based Widgets Editor

Demonstration of the block-based Widgets Editor and blocks in Customizer experience

Top ↑

Resources Resources

Was this article helpful? How could it be improved?