Using Classic Widgets with Blocked-Based Themes: Introducing the Legacy Widget Block Plugin

What happens when a user activates a block theme while still relying on a widget from a third-party plugin?

The answer is simple: the user no longer has access to that widget.

That seemed to be a particular pain point in a one-star review of Twenty Twenty-Two, WordPress’ flagship theme for the year. The primary complaint was that it did not have built-in widget support. For those of us building with WordPress every day, this was the expected result. The theme is, after all, a block theme. It represents a new era that firmly splits itself from the old, shedding the weight of years of legacy baggage that existed with previous versions of WordPress. And, widgets are very much a part of that baggage.

While I am often a fan of the “out with the old, in with the new” mantra, that is simply not the reality for the average WordPress users. Rebuilding their entire site is not something most do on a whim.

My first thought while reading the review was that WordPress had a built-in Legacy Widget block. Why not just use that? Unbeknown to me at the time, or at least until I ran a quick test, this was never shipped outside of the block-based widgets editor. An earlier, pre-FSE decision scaled it back. There are legitimate reasons to not include it by default in the other editing interfaces. Loading the extra widgets code does come at some performance cost. There are also no guarantees that all third-party widgets will play nicely within the block editor.

At the time of the decision, the site editor did not exist, and widgets were never meant for use within post/page content. Perhaps we should reconsider the decision for the site editor if it becomes too much of a problem.

In the meantime, I built a solution: a plugin that enables the Legacy Widget block.

WordPress site editor showing a blog page in two columns. A post sits on the left and the sidebar on the right, which has an Archives widget highlighted.
Adding the core Archives widget via the Legacy Widget block.

When I say I “built a solution,” what I really mean is that I copied the code from existing documentation in the Developer Handbook and turned it into a plugin. Thank you to whoever wrote the original snippets. All I needed to do was put a bit of custom CSS on top of things to smooth out some of the rougher parts of the UI. In particular, there was no clear separation of the widget options and the front-end output.

I primarily tested the core widgets and those from old plugins of my own. However, it should work with most classic widgets. There are likely some exceptions where a specific widget has custom JavaScript that does not jive with the editor.

The experience is not ideal. To work in an editor context, the Legacy Widget block is loaded via an iframe. Instead of widget options appearing in the editor toolbar or block inspector, they sit above the widget output, at least while the block is selected.

Overall, this is more of a stopgap solution than a permanent one. The goal is for plugin authors to build block equivalents of their classic widgets (and shortcodes) as this new era of block themes arises.

Unfortunately, I do not know if I helped the original user/reviewer. After a productive conversation that led to a potential fix for his issue, most of the topic replies were “archived” by one of the WordPress forum moderators. I can only hope that the user saw that the fix was live before that happened. If nothing else, maybe it helps someone else along the way.