Block-Based Widgets Are Finally Live With Gutenberg 8.9 — So How Are They Faring?

Gutenberg 8.9 was rolled out on Sept. 2, 2020. The highlight of WordPress’s newest evolution is block-based widgets, which have gone from an experiment to a live feature. 

If you didn’t play around with widget blocks when they were available in the Experiments tab, you may not be pleased to find they are the new norm. However, those accustomed to the block editor should find the new experience to be quite familiar. 

Giving widgets the block treatment was always an important stop on the Gutenberg roadmap

Now, the question is: how good is it? And, will it be polished enough to be ported over to Core when WordPress 5.6 drops in December 2020? 

The Customizer is a Problem Area for Widget Blocks

Let’s get the bad news out of the way first:

As they are now, block-based widgets still need some fine-tuning to work well in Customizer.

The list of bugs and issues include: 

  • When changes are made to a block, the preview for the widget is not updated to reflect those changes even though they take effect on the front-end. 
  • The More Options menu has a transparent background, making it nearly impossible to see or use. 
  • The control panel in the Customizer isn’t wide enough to accommodate the block toolbar, hiding much of it off-screen. 
  • Legacy widgets added from the Block Areas screen cannot be edited in the Customizer. 
  • Block options for the majority of widgets are unavailable, depriving users of some simple functionality. 
  • When repositioning a widget block, dragging it downwards makes the Customizer’s control panel shake continuously until the block is dropped. 

If the visual interface isn’t cutting it for you in its current state, you can always configure a widget using HTML by clicking on More Options > Edit as HTML. This works in both the Block Areas screen and the Customizer, although the Customizer’s transparent background for the menu might make the option hard to spot. 

Fully functional block widgets in the customizer are integral to phase 2 of WordPress’s four-phase plan for the Gutenberg Project.

Unfortunately, even though they’ve already gone live, the Customizer’s widget blocks still have some issues.

Here’s the good news:

The Gutenberg team has time to improve widget blocks in the Customizer before the feature is added to the WordPress Core. 

The Customizer may not be fully baked, but the foundations for what it is supposed to do — provide a visual interface to edit widgets — are all there. With a few bug fixes, functionality improvements, and quality of life additions, the Customizer will live up to its potential for widget blocks. 

What Do Block-Based Widgets Mean for Theme Developers?

Block-based widgets do not have the same widget HTML wrappers that traditional widgets do. That means it’s impossible for themes to recognize the new block-based widgets as widgets so that they can be styled appropriately. 

Usually, themes create styling by searching for the wrapper element for a widget and its name. Without widget wrappers, control of a widget’s appearance is taken away from theme authors and given to users instead. 

Widget blocks do not have a standard class name that theme developers could target with CSS, preventing them from providing end-users with universal styling for all of their widgets. 

While this new structure gives the end-user creative control over how their widgets look, it takes away the option to have detailed widget styling from a theme automatically applied to your widgets. 

Only time will tell whether this is good or bad for the WordPress theme ecosystem. For now, theme developers can pull support for widget blocks by adding the following line of code to a theme’s setup code: 

remove_theme_support( ‘widgets-block-editor’ );

Gutenberg 8.9 Removes the Widgets Screen…

…and replaces it with the Block Areas screen. 

To encourage end-users to start using blocks instead of widgets, this is the new default experience and cannot be disabled. For anyone who understands how Gutenberg blocks work, you shouldn’t have much trouble adjusting to block widgets. 

The new Block Areas screen provides a smooth experience in terms of functionality and usability. It interacts well with widget blocks and provides a minimalistic visual interface that makes adding and editing widgets simple and, more importantly, code-free. 

A key difference between block-based widgets and the traditional widgets is that widget blocks cannot be collapsed individually. However, entire sidebars can be collapsed. 

Testing also revealed that core legacy widgets work seamlessly on the new block editor. 

But, legacy widgets from third-party plugins behave quite erratically on the Block Areas screen. Among other issues, they occasionally disappear from the editor altogether. 

It seems fair to assume that these issues will be worked out of time as block-based widgets move into Core.

The Gutenberg team is quickly achieving milestones — but that’s not necessarily a good thing. The new Block Areas editor is quite robust and interacts well with block widgets. However, there’s a lot of work to be done to improve how the Customizer interacts with widget blocks. 

Theme developers will also need time to acclimate to the new widgets, and will have to tweak how their themes handle widgets accordingly. 

The Gutenberg development team will need the community’s help to work the kinks out of block-based widgets in time for WordPress 5.6. Be sure to provide feedback and report issues

Everyone’s favorite content management system will be undergoing a lot of changes in the near future. But, what won’t change is the fact that Automattic officially recommends Bluehost for all your website hosting needs.

Take a look at Bluehost’s WordPress hosting plans today!

Build the Website of Your Dreams with Bluehost

Get Started
Desiree Johnson
Desiree Johnson | Content Specialist
Desiree Johnson is a Content Specialist at Bluehost where she writes helpful guides and articles, teaches webinars and assists with other marketing and WordPress community work.

Leave a comment

Your email address will not be published. Required fields are marked*