How to Convert a WordPress Widget to a Block (Step by Step)

Want to use a legacy widget in your WordPress sidebar or publish content?

In version 5.8, WordPress added a new block-based widget editor. Blocks are more flexible and make it easy to add rich content to your site. Fortunately, you can still use classic widgets on your site as well.

In this article, we’ll show you how to convert a WordPress widget to a block.

Here’s what we’ll cover in this tutorial.

  • What is the difference between a WordPress widget and a block?
  • Can a WordPress widget simply turn into a block?
  • Adding widgets to your classic theme sidebar in WordPress
  • Adding widgets to your block theme sidebar in WordPress
  • Adding widgets to your post content in WordPress

What is the difference between a WordPress widget and a block?

Widgets are used to add blocks of content to the sidebar, footer, or other areas of your WordPress site. They are an easy way to add image galleries, social media feeds, quotes, calendars, trending posts, and other dynamic elements to your website.

In version 5.8, WordPress introduced a new block-based widget editor that lets you use blocks to create more attractive widget areas. For example, you can add buttons, choose colors, group different blocks, and more.

But what if you’re still relying on a legacy widget that hasn’t been updated to a WordPress block? Fortunately, you can still use it.

We’ll show you how to easily add vintage widgets to your sidebar and other widget-ready areas. The method you use depends on whether you’re using a classic theme or a block theme. Plus, we’ll also show you how to add a widget to your posts and pages.

But first, let’s briefly look at the difference between widgets and blocks from a developer’s perspective.

Can a WordPress widget simply turn into a block?

If you are a developer who created a legacy widget for WordPress, you may be wondering if you can convert it to the new block widget.

Although widgets and blocks are similar, they are actually quite different. For example, they are coded using completely different programming languages. Widgets are written in PHP and blocks are written in JavaScript.

This means that there is no simple way to turn a widget into a block.

But that’s not a problem. Your existing widget will continue to work with newer versions of WordPress. If you don’t plan to update your widget code, you can leave it as is.

However, if you want to keep adding new features to your widget, it’s better to create a new block to replace the legacy widget. You can follow our guide on how to create a custom WordPress block.

Creating a new custom block

Adding widgets to your classic theme sidebar in WordPress

If you’re using a classic theme, you can add classic widgets to your sidebar or other widget-ready areas of your site using the Legacy Widget.

First, you need to navigate to Appearance » Widgets in your WordPress admin area.

Next, you need to click the “+ Add block” button. From the window that pops up, you need to click on the “Legacy Widget” icon.

Add the Legacy Widget to your sidebar

Note: If you see Appearance » Edit instead of Appearance » Widgets, then you are using a block theme. You need to follow the following method below.

You can now select the widget you want to use from the drop-down menu.

Select the desired widget from the drop-down menu

The widget will be added to your sidebar. Make sure you click the Refresh button at the top of the screen to save the new widget.

Legacy widget added to sidebar

To learn more, see our step-by-step guide on how to add and use widgets in WordPress.

Adding widgets to your block theme sidebar in WordPress

Block themes, such as the default Twenty Twenty Two theme, allow you to use the Whole Site Editor in WordPress. Full Site Editing offers custom blocks to style your site theme, but does not include the Legacy Widget by default.

That means you won’t be able to access legacy widgets from the Full Site Editor, and when you switch from a classic theme to a block theme, legacy widgets you’re using won’t carry over.

Fortunately, you can add support for legacy widgets using a plugin. Just install and activate the X3P0 Legacy Widget app. For more details, see our step-by-step guide on how to install a WordPress plugin.

Once activated, the plugin will add the Legacy Widget to the full Site Editor. This will allow you to use older widgets with newer themes.

The Legacy widget is now available in the full site editor

Adding widgets to your post content in WordPress

First, you need to edit an existing WordPress post/page or add a new one. Once you’re in the WordPress content editor, go ahead and click the + Toggle block inserter button at the top of the screen.

Next, scroll down to the Widgets section and find the widget you want to add to the content. You can then drag the widget onto your post.

Scroll down to the Widgets section

You can customize the widget using the Settings panel on the right side of the screen.

Once you’re done, go ahead and publish your blog post or page.

Configure the widget from the right settings panel

For more information, see our guide on how to add WordPress widgets to post and page content.

We hope this tutorial helped you learn how to use legacy widgets in WordPress. You can also learn how to track website visitors or check out our list of the best contact form plugins for WordPress.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us Twitter: and Facebook.

The post How to Convert a WordPress Widget to a Block (Step by Step) appeared first on WPBeginner.

Leave a Reply