Widgets to Blocks UX Flow Proposal

As noted in an earlier Gutenberg design update, I wanted to communicate a proposed UX flow for rolling out the widgets-to-blocks interface changes. It’s a proposal and still up for discussion along with further communication in the Github PR, Add blocks in widget areas RFC.

The Github issues include: wp-admin interface and the Customizer.

Problem

Widgets are now blocks which require a new Gutenberg interface to help people transition to this new paradigm. What is the best way to introduce the new widget-block screens to users? How can we do this with the least amount of development time, use existing patterns, and clearly communicate the gradual transition to blocks?

Diverging to explore solutions

I began by segmenting the use cases:

  1. Users with existing widgets
  2. Users without widgets
  3. New users

My initial work included using different menu items in wp-admin and the Customizer based on if the user had existing widgets in their site. A user with existing widgets would need more help transitioning to a new interface than a user without any prior widget paradigms.

Segmentation notes

After further investigation of this, I opted out. If the menu items segmented, it might cause more confusion because there would be some users with the new menu items while another may have the old. Documentation and internet tutorials could get difficult to follow at that point. I’d like to do this with the least amount of development time, and confusion on the user’s end.

Converging on a solution

wp-admin

To achieve a simple and non-confusing rollout, keeping the wp-admin menu items the same might be the best option. The user would still see “Widgets” under the “Appearance” menu item. When clicking that to view the widgets, the user would now get the new Gutenberg Widget Areas screen.

A mockup of the new widget area screen in wp-admin.
The new Widget Area screen

We’d need to make sure the proper messaging or tips are displayed on this page to help orient the user to the new layout.

Tips in the Widget Areas screen

Customizer

This scenario would work similarly to the one above. When clicking into the Customizer, the user would still see “Widgets” as an option if the Theme provides it. This shouldn’t require any additional work on the part of the theme outside what is currently required. Once clicked the user sorts through the blocks and can add 3rd party unconverted widgets with the Legacy Widget block.

Feedback

So that everyone’s aware, the discussions around why blocks are being introduced in the widget screens is already explained in the Github issues, and in comments on other sites. This is one of the 9 projects for 2019, and aims at helping everyone slowly make the transition to the block paradigm.

The feedback I’m looking for here is:

  1. How do you feel about keeping the “Widgets” menu item through the transition even though these really aren’t widgets anymore?
  2. Does it make sense to call these “Widget Areas” through this transition phase?
  3. Is there anything I may have missed or not thought of?

#gutenberg, #widgets