Widgets Block Editor Overview

The Widgets Block Editor replaces the traditional Widgets screen in WordPress with a block-based interface similar to the post/page editor introduced with the Gutenberg.

Instead of dragging classic widgets into widget areas, users can now insert blocks into sidebars and widget areas.

  • Block-based editing experience

  • Consistent UI with the post/page editor

  • Access to all available blocks in widget areas

  • Ability to mix blocks and legacy widgets

  • Improved layout control

Accessing the Widgets Block Editor

WP Admin → Appearance → Widgets

If your theme supports block widgets, WordPress automatically loads the block-based editor.

Example Block Widget Area Structure

<!-- wp:search /-->

<!-- wp:paragraph -->
<p>Subscribe to our newsletter.</p>
<!-- /wp:paragraph -->

<!-- wp:latest-posts {"postsToShow":5} /-->

Benefits

  • Modern editing experience

  • Reusable block patterns

  • Visual editing instead of drag-and-drop widgets

  • Better customization options

Restoring the Old Widgets Editor

Some developers or site owners prefer the classic widget interface used before WordPress 5.8. This can be restored by disabling the block widgets system.

Method 1: Using Code

Add the following code to your theme’s functions.php file.

function disable_block_widgets() {
    remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'disable_block_widgets' );

Method 2: Using a Plugin

Install the plugin:

  • Classic Widgets

This restores the classic drag-and-drop widget interface.

After Disabling Block Widgets

The Widgets screen returns to:

WP Admin → Appearance → Widgets

with the traditional interface.

Ensuring Compatibility with the Legacy Widget Block

The Legacy Widget block allows classic widgets to work inside the new block editor environment.

This ensures that widgets built before the block system remain usable.

When It Is Needed

Use the Legacy Widget block when:

  • A plugin provides a classic widget

  • The widget has not been converted to a block

  • You want to keep using existing widget functionality

Adding a Legacy Widget

  1. Open the Widgets Block Editor.

  2. Click Add Block (+).

  3. Select Legacy Widget.

  4. Choose the desired widget from the dropdown.

Example Representation

<!-- wp:legacy-widget {"idBase":"recent-posts"} /-->

Developer Considerations

Plugin developers should:

  • Gradually migrate widgets to blocks

  • Ensure widgets still register normally with WP_Widget

Example widget registration:

function register_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_custom_widget' );

Block-based Widgets Editor

The Block-based Widgets Editor is the interface that allows editing widget areas using blocks.

It is part of the broader Full Site Editing (FSE) vision in WordPress.

Widget Areas in Block Themes

Block-based themes may manage sidebars using template parts instead of traditional widget areas.

Example sidebar template:

<!-- wp:group -->
<div class="wp-block-group">

<!-- wp:search /-->

<!-- wp:categories /-->

<!-- wp:latest-posts /-->

</div>
<!-- /wp:group -->

How Blocks Work in Widget Areas

Blocks can be added, reordered, and customized just like in the post editor.

Common blocks used in widgets:

  • Search

  • Categories

  • Latest Posts

  • Navigation

  • Paragraph

  • Image

Example Custom Block for Widgets

wp.blocks.registerBlockType('myplugin/custom-widget-block', {
    title: 'Custom Widget Block',
    icon: 'widgets',
    category: 'widgets',

    edit: function() {
        return wp.element.createElement(
            'p',
            {},
            'This is a custom widget block.'
        );
    },

    save: function() {
        return wp.element.createElement(
            'p',
            {},
            'This is a custom widget block.'
        );
    }
});