Rethinking Widgets in WordPress.
(Original post from 19 August 2013, and now transferred over as a post to the newly recreated Easy Web Design Tutorials web site.)
Here is Shaun Andrews mockup:
https://www.shaunandrews.com/wordpress/another-idea-for-widgets/
Here is my mockup suggestion.
The challenge is to create a new Widget section inside the existing area, inside the customizer, as well as Front End editing.
I focused on creating a new Widgets area replacing the existing widgets. (of course one can use something similar inside the Customizer and for the Front end.)
– Creating a visual layout of the page showing the various available widget locations.
Drag or Drop or use the + to Add a widget to a location. Adding a widget to the layout a modal box opens Or the options area can open inside the widget location. I added a drop down in each widget location so the user can copy the widget content inside the location to use in another location. The user can also click the live view to see how the specific widget location looks like live. Or after having clicked ok inside the options for a widget it can see seen automatically live. Click the live widget to open the options box.
– All widgets tab – Show all available widgets. To narrow down the list I added a box (top right of a widget to) define it as a favorite.
– Favorite Widgets – Shows only the widgets marked as favorites.
– Widget Layout – The purpose is to create multiple layouts to be used for various pages/posts.
In All posts/Pages – there could be an option under the “quick bar” or top area. To add a widget layout (template) to one or multiple pages/posts. Or go inside a page and add it there.
Wed Development Studios are also working on reworking the Widgets section:
https://webdevstudios.com/2013/08/14/webdevstudios-take-on-a-wordpress-core-widget-ui-refresh
Earlier discussion:
sanchothefat mentioned:
https://make.wordpress.org/ui/2013/08/16/widgets-widgets-widgets/#comment-23533
I’d like to see Noel Tocks idea implemented with some colourisation and perhaps icons to make it easier to find the widget you want. Some improvements to the ui as well would be help when dragging and dropping. For example:
I start dragging a widget, the widget areas all collapse so I can see them all better. Once I’ve hovered over one for a while it pops open and I can place my widget.
Also what about a backbone.js media modal style overlay for the widget forms rather than the cramped little ui space for each one?
Shaunandrews replied: Do you have a link for Noel’s ideas?
Since Noel is not available to answer on the thread for the moment as he is out traveling I e-mailed him directly and received a screenshot:
Noel mentioned that this was legacy as they have their own site for Restaurant framework at Happytables (which has shut down).
Notice the cleanness of the sidepanels. The colorization is a very interesting approach. I do not know how Noel used the colors though.
What about using colors to define a sidebar? Moving a widget to a specific sidebar the widget will get the color of the sidebar. (I would also suggest that widgets should be added any where on a page not just the sidebar.)
Using colors to make a clear definition.
