Gutenberg WordPress Work

Testing the Widget Editor for WordPress 5.8

WordPress 5.8 is scheduled to be released on July 20, 2021 and one of the new features slated for this release is an update to the way widgets work.

There’s a “call for testing” up on one of the WordPress community blogs. This post covers my experience running through this test. Its important to note that I didn’t actually complete the entire test. I spent just about 90 minutes and never got to test the Customizer updates.

I have a few testing sites setup on my machine using Local, a very handy app that makes it super simple to manage multiple WordPress sites. I made sure I was using the correct versions of both WordPress (5.7.1) and Gutenberg (10.6) and dove into the instructions.

The test specifies installing a plugin that enables widgets. The first one that came to mind was Astra. So, I headed to “Add New” under Plugins and searched for Astra. From the results I clicked “Install Now” and, after a few seconds, I clicked the new Activate button.

Turns out I already had a few widgets setup in my site’s Footer, so I adjusted some of those and then added one of the Astra widgets. I randomly picked the “Astra: Address” widget and was shocked at how terrible the UI was and generally how limiting the widget’s output was. There are inputs and checkbox for all sorts of things, but the output was very anti-climatic for the work required. It would be way easier to accomplish the same thing with some blocks instead.

Here’s the output of my widgets from the “legacy” screen in wp-admin.

For instance, in the above screenshot you can see the Astra Address Widget. The icons are kind of nice, but I have no way to get rid of the horrible italicizing of the text. If that was a block, I could just select the text and untoggle the italic button in the toolbar.

And here’s what those same widgets look like when editing from the “legacy” screen…

Ugh. Look at that mess. Its obvious this screen hasn’t changed in years.

Now we’re getting to the fun stuff; The next step of the test is to activate the Gutenberg plugin and enable the widgets experiement. Once I did that, I ventured back to “Appearance > Widgets” and found myself looking at this screen…

Ok, well. My first reaction is that this looks a little nicer. There’s more focus, and it seems like its trying to mimic the design of my website. However, there’s a number of bugs and strange things happening here.

First, the widget area names and toggle buttons are a lot of excess space that seems unintentional. Clicking the toggle button causes a strange shift on the screen; This seems like a few releated bugs, perhaps some CSS “bleed” from the Twenty Twenty theme.

Clicking the toggle area causes some strange movement and there’s some unintentional spacing around the top of the toggle area.

Selecting the first widget area highlights it with a blue outline and I see a block toolbar. Unfortunately, this toolbar is obscured by the editor’s top bar, making it mostly unusable.

When the widget area toolbar is visisble, there’s some spacing issues around the block icon; In the image below you can see the different spacing on the left and right of the icon.

The block toolbar for the widget areas (which I assume are actually blocks themselves) seems mostly useless. The icon is the generic block icon, which doesn’t really convey any helpful information and is not interactive. The ellipsis “more” menu contains few options, and doesn’t seem very relevant to working with widgets.

The toolbar for blocks within a widget area is misaligned. It appears to be indented for some unknown reason. I believe this is caused by the parent selector button that normally appears when a block is nested.

One area the testing instructions specific mention is moving blocks. I found that I was able to move blocks — either with the move buttons or with drag-and-drop — within their current widget area, but I was unable to do the same between widget areas. This feels like a regression, as the “legacy” screen makes moving widgets very easy.

I did discover this “Move to” button in the toolbar of blocks…

…but it seems more like a bandaid than a solution. This is especially confusing when I also see the “Move to…” option that exists in the ellipsis menu.

I started playing with the widgets I had, customizing some of their information, and adding new widgets and blocks.

There’s some confusing things that happens with the height of widgets, in my case, the height of the Astra Address widget when deselected was too short and cut off much of the content.

Its easy to wind up with a “ghost” widget; That is, a widget that definitely exists but you don’t see it until you hover or click on it.

At some point I discover that some — but not all — of my widgets had this curious circular arrow icon (which doesn’t fit with the rest of the icons stylistically) that says it allows me to “Change widget.”

Ok. Change it to what? I clicked on it and found myself looking at this…

The layout of this is a little messy, but it also doesn’t really contain any helpful messaging. The best I can figure, this allows me to swap one widget for another. To be honest though, I’m not entirely sure why I’d want to do that…

This whole sidebar seems very empty and useless.

Whew. Ok. I’ve been going through this for 90 minutes so far, and I haven’t even touched the customizer yet. I’m going to stop here for now and post what I’ve found.


The Past Few Weeks

The blog has been fairly quiet for the past few weeks, and with good reason! I’ve been in “mole mode,” working on a few WordPress plugins with the hope of getting them accepted into Core for the 3.8 release schedule to launch in early December. I’m happy to report that all three plugins have been accepted!

Widgets Area Chooser (WAC)
This plugin started as a suggestion from Matt. He mentioned in a Skype chat that the “simplest thing we could do” would be to provide a list of sidebars to choose from when clicking on an available widget. This was one of the first plugins I’ve ever built, and having a super simple scope made it doable. The old drag and drop method of adding widgets is still there, but the WAC makes it easier to add widgets when you have a lot of sidebars, on mobile and touch screen devices, and for users who find it difficult to use a mouse.

Theme Experience (THX)
Matías Ventura first proposed the THX project when development began on WordPress 3.7. The goal was to make the experience of installing and browsing themes better. We started by talking to users and developers; We ran a survey and setup a few tests on With some basic feedback in hand, we explored a bunch of designs. After a few weeks we had a solid direction for what we wanted to do:

  • Make browsing and installing themes incredibly fast.
  • Put big theme previews front and center.
  • Make it work across every screen size.

With some help from Sheri Bigelow, we ran some more user tests to see how our vision held up with real people, and started iterating quickly. After a few more weeks, we began thinking about what we wanted in – and could realistically have ready for – inclusion in WordPress 3.8. We decided to focus our remaining time on the browsing experience, leaving the install portion of the project for a future release.

MP6 (No clue what it stands for…)
The MP6 team has been doing awesome things for months, and is the poster child for the new “feature as plugins” development philosophy that now uses. My involvement comes at the very tail end of the project. Joen Asmusen mentioned my name when the team was discussing their plan to tackle the widgets screen. Since I was (and still am) leading the team that is focused on rethinking widgets, Joen suggested that I may have some ideas. I offered to spend some time coming up with some rough concepts. A few days later I sent Joen some code that resembles what you see in core today. I was asked to join the team and was given commit access to continue working on the widgets component. I felt honored and extremely lucky to work with some of the best designers and developers in the WordPress community.

This coming week marks the end of active development on 3.8, with a planned code freeze and beta release on Wednesday. Until then, I’m working on cleaning up code, bug fixes, and some last-minute enhancements and polish. I’m excited about the release of 3.8, and the future of WordPress in general!


More Widget User Testing

I ran another in-person user test last week, this time going over the tabbed widget prototype and the new widget customizer prototype. Check out the video below:

[wpvideo 4LuoMtZa]


Widget Mission Control

Another day, another late-night concept video. This time I’m back on widgets. The tabbed prototype I’ve been working on is really taking shape and feeling nice. But, its biggest strength is also its biggest weakness: You can only see one sidebar at a time.

I’ve been toying with the idea of an “all sidebars” view since I started working on the project, and today the inspiration for a possible UI struck me: Mission Control in OS X. Check out the video to see the concept in action:

[wpvideo mtQFstT5]


More Widgets User Testing

Last night, I create a user test for the recently updated widgets prototype. About 30 minutes later, I had this super awesome video of a real person using the prototype and talking about his thoughts and experience: (beware the loud cough at the beginning)

[wpvideo LxDbNbEd]

This one went very well. And it seems that the idea of dragging widgets into sidebars is engrained in existing users. I’ve even caught myself doing it a few times, and I built the prototype specifically to avoid that interaction. It makes sense, as dragging widgets into place has existed in WordPress for over 3 years.


Widgets Prototype, Take 2

I’ve continued work on the Widgets prototype, this time taking some cue’s from Ben’s user test. His comments about the modal “being in the way” really struck a chord with me. This latest iteration removes the modal all together, in favor of a list of available widgets. Check out the video and let me know what you think.

[wpvideo K0Sd3mj5]


Ben Giordano on Widgets in WordPress

Yesterday afternoon, I had the opportunity to spend some time with my friend, and owner of FreshySites, Ben Giordano. We spent about an hour talking about WordPress, widgets, and more.

Most of our time was spent talking about widgets. Watch the video to get some great insight into the existing widgets interface, as well as Ben’s thoughts on some concepts and prototypes.

[wpvideo TabcHK5P]


Add a New Widget

[wpvideo UnHywVHU]

I’ve continued to work on this prototype for widgets in WordPress. Its coming along nicely. I hope to run some user tests next week.


Another Idea for Widgets

Part of the goal of redesigning widgets in WordPress is to make the connection between widget areas, and their presentation on the front-end of your site, more obvious. It’s clear that there’s a big disconnect between the narrow column of sidebars (or widget areas) in wp-admin, and their location within your site’s theme. Here’s an idea that presents a blueprint of your theme’s templates, allowing you to add widgets to the available widget areas:

Widget Area Blueprint

During some recent user testing, it became clear that the current UI for managing widgets does little to make it clear that widgets must be placed using drag-and-drop. It seems that re-ordering widgets using drag-and-drop is intuitive, but the initial placement of widgets is more cumbersome and not so obvious. This design tries to solve that problem by relying on the “Add Widget” button for each area. You can drag-and-drop widgets between areas, or click on the “Add Widget” button to popup a media-like modal from which you can choose widgets.

My hesitation with this approach, and with the general concept of front-end editing in general, is that it puts a lot of “stuff” in front of your face. This approach makes a lot of sense for managing the location of widgets, but not so much for managing the content of widgets. What do you think?


WordPress Widgets: Take the Survey

Earlier today I published a general survey asking question about how you (yes, you!) use widgets in WordPress. I’d love it if you could take a few minutes and fill out the survey. Thanks!