Using block-based widgets on your clients’ WordPress sites
You can now add any block to Widget areas, as well as preview and schedule updates to the Widget areas using the Customizer. WordPress 5.8 introduced Block-based widgets. This provides a consistent experience with how you use the block editor for posts now and ways you are already using the Customizer. In this tutorial, we’ll show you how to use Block-based widgets.
What are Widgets?
WordPress Widgets add content and features to your website, usually in areas like the sidebar or headers and footers. These are areas that display smaller features that are simple to modify without code. Several basic Widgets come with WordPress, but additional Widgets are available by installing additional plugins.
Using Block-based Widgets
Widgets will now get the Block experience. If you’re a fan of the Block Editor, this will save you time configuring blocks. Head over to Appearance > Widgets or Customizer > Widgets to see the changes.
Get a quick demonstration of Block-based Widgets with this helpful video from Anne McCarthy, Developer Relations Wrangler at Automattic.
If your clients actively modify the widgets area, you may want to help them get familiar with this refreshed interface.
How to add a Block-based Widget
- Go to Appearance > Widgets.
- Select a Widget Area to edit.
- Select the + prompt to add a block. Use the search functionality to find a block you want or select “Browse All” to see additional options.
How to move a Block-based Widget
There are three ways to move items:
- Drag and drop by hovering over the block toolbar. Select and hold it, then drag to your preferred location
- Use the ^ ⌄ arrows to move an item up or down
- Use the curvy arrow to move the widget from one Widgetized Area to another, such as from the Footer to the Sidebar
How to add a Block-based Widget in the Customizer
If you prefer to use the Customizer, you’ll enjoy adding widgets and blocks. This will still provide you with a live preview and the ability to schedule changes.
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:
- Use the + to add a new block.
- Select the three-dot ellipsis menu.
- Choose “Show more settings”
- View the additional options and customize your block.
How to use the Legacy Widget Block
If you want to use a Widget that isn’t part of the default WordPress install and that hasn’t been converted to a block yet, you can use the Legacy Widget block.
- Insert a Legacy Widget Block
- Select which Widget to display
Disabling Block-Based Widgets
Are you using the Classic Editor plugin and want to keep things consistent? See the Classic Widgets plugin to prevent Block-based Widgets. This is also a good solution if you rely upon a plugin that has not yet updated its widgets to be compatible with the new Block-based Widget editor.
What is coming for Widgets?
Developers are encouraged to phase out shortcodes in favor of blocks and can allow users to easily migrate a Legacy Widget block containing a specific widget to a block or multiple blocks.
As we look ahead to WordPress 5.9, we’ll begin seeing Block-based themes built for Full Site Editing. At this time, the Customizer is not included in themes designed for testing Full Site Editing, like TT1 or Blockbase. We can expect Block-based Widgets to remain straightforward to include throughout our clients’ websites.
