Testing the Gutenberg Widgets Editor for WordPress 5.8

WordPress 5.8 promises hopes to bring an overhauled, block-based Widgets screen to WP Admin.

If you’re not aware, Widgets have been around since…well forever, and so they are long overdue an upgrade to bring them into line with the new block-based paradigm and UI which is already part of the Post editor (and will soon be taking over site building as part of Full Site Editing).

Core team member (and overseer of all things Widgets), Andrei Draganescu has put out a call for testing for the Widgets Editor for WordPress 5.8 so I decided to give it a try. Here’s what I found:

Setup

My testing was undertaken using the following setup:

• Theme: Twenty Twenty.
• Widget Plugins:
  • Image Widget.
  • WordPress Popular Posts.
  • Gutenberg version: latest trunk from Github repo (as of 20th May 2021 at 08:14 UTC).
  • WordPress version: 5.8-alpha-50689.

Migrating from classic widgets

The aim of this section is to test that existing (legacy) Widgets are migrated correctly when activating the new Widget Editor.

To achieve this I first enabled the Classic Widgets plugin which re-activated the legacy Widgets screen at wp-admin/widgets.php.

I then added the following Widgets into the x2 widget areas that came with the Theme:

I then deactivated the Classic Widgets plugin and headed over to the new Widgets Editor.

Are all the widgets you added there?

On initial load, I initially thought several Widgets had not been carried over to the new editor. These were from the 2nd Widget area Footer #2. They included:

• Archives.
• Categories.
• Meta.

However, I eventually realised they were in fact present but simply not visible – you can see this in the video below:

Very strangely however, once I started the drag and drop test (see below) I saw the missing Widgets from start to appear but Widgets from Footer #1 which had originally been present were now missing!

I wonder whether something about re-ordering the Widgets caused this?

On both occasions all of the Widgets were still visible and active on the legacy Widgets screen at /wp-admin/widgets.php.

• 

• 

It’s worth noting that I was able to restore the Widgets’ visibility in Footer #1 by make a change in the Widget Editor and saving.

Once done the original problem resurfaced, with Widgets appearing in Footer #1 but now missing/invisible again in Footer 2.

Widget rendering issues

Several of the Widgets appeared to be visually “clipped” at the bottom of the preview. The Search Widget, in particular, did not render correctly and was noticeably cut off:

The widget areas themselves also seemed to display an excess of padding both when collapsed and when expanded:

• 

• 

Also, when editing a Widget, I noticed that the interface used a serif font-face which was unexpected:

Loading delays

When first loading the screen I noticed a considerable lag before the Widgets were displayed.

Looking at the Network tab I noticed calls to /wp-admin/themes.php?page=gutenberg-widgets&legacy-widget-preview which are presumably to retrieve the preview for each Widget.

Perhaps in future it would be possible to load previews on demand based on whether the Widget is within the visible viewport? This might help reduce the time until the screen is actually interactive.

Missing Previews

I was unable to see Widget previews for:

• WordPress Popular Posts.
• Gallery.

Can you customize Widget settings?

I was successfully able to customise the settings of all the Widgets, even those where the preview was missing.

Can you drag and drop widgets to different places?

I experienced considerable issues when trying to drag and drop all the Widgets. These were:

• Lack of clarity as to where the widget being dragged was during the drag operation.
• Missing clear indicators for drop zones (ie: where the Widget would end up after I let go of the mouse button).
• Once dropped, the block toolbar was missing and ended up half way up the page(!).

Here’s an example of the issues notes above using the Search widget:

Ultimately I had to give up on drag and drop as it was causing too many problems.

Legacy Widgets in Customizer

All the Widgets from both widget areas were present here. Drag and drop also worked really well and I was able to customise the settings.

Previews were still missing for the Gallery and WordPress Popular Posts widgets.

Adding blocks next to widgets

For this test I removed all the Plugin-provided Widgets and used Core Widgets only.

Widgets Editor

I tried adding some blocks using the inserter and found this easy and intuitive. Testing on the front of the site I saw the blocks rendered next to the legacy Widgets.

Customizer

I repeated the same process in the Customizer. This went well with the exception that I was unable to open the Media Library from the Image block to select an image. When trying to do so I experienced a blank modal as shown below:

This was accompanied by an error in the console coming from moxie.js:

Uncaught TypeError: Cannot read property ‘style’ of null

I also found the when adding blocks using the inserter in the top bar it was unclear as to where my blocks had been inserted. Indeed, focus remained somewhere else on the page even when the blocks had been inserted.

On the plus side I was able to publish the blocks in the Customizer and see them render in the Widget areas on the front of the site.

Opting out of the new widgets screen

I tested the Classic Widgets Plugin and it allowed me to successfully opt out of the new Widgets experience and utilise the legacy Widgets on both Widgets and Customizer screens.

• 

• 

Final thoughts

I am not and have never been someone who makes use of Widgets, but overall I believe the team working on this have done a remarkable job in moving Widgets over to the block based UI.

The efforts to retain backwards compatibility are absolutely clear and the new Customizer support is a welcome (and much needed) addition.

On the downside, as noted above, the interactions and UI are still in need of significant polish to remove glitches. However, as Andrei notes in his call for testing post:

As a merge candidate the goal of the testing [the Widgets Editor] is not to discover a bug free feature, but to observe if there are blockers for merging.

Therefore I think it’s reasonable to assume that all UX/UI bugs will be cleared up prior to inclusion in WordPress 5.8.

Ultimately, I would rate my experience with the block based Widgets area as 7/10. It feels like it is nearly ready for prime time, but the UI interactions (especially around invisible legacy Widgets and drag and drop) let it down.

Nonetheless, with several Beta releases of WordPress 5.8 still to come, there should be ample time to refine the experience which I believe would make the new Widgets Editor ready for inclusion in Core.

Major kudos to the folks involved in working on this project. It’s been a long road, but the enormous effort going into this feature is clear and should be roundly applauded.