Better Widgets

The Widgets team has been busy. 🙂 Outside of the Widget Customizer plugin (posted about previously), we’re also working on some updates to the main wp-admin widgets screen through the Better Widgets plugin. This plugin does a bunch of things:

  • Available widgets have moved to the right side of the screen. The idea is that your widget areas (a.k.a. sidebars) should be the real focus of the screen — these are the things you can edit and manage. This may be a controversial change, as its the opposite of the menu screen (widgets closest cousin.)
  • Brings the widget icons from the Widget Customizer plugin to wp-admin.
  • Available widgets are now contained in a separately scrollable area. The goal is to help reduce to drag-and-scroll-and-scroll-and-scroll-and-drop problem that is so common from our initial research.
  • Widget descriptions are displayed in a single line, and truncated if they are too long. Clicking/Tapping on a widget expands the description (along with the area chooser from 3.8.)
  • Inactive Widgets are displayed below your active widget areas. This may be problematic as you have to drag-and-drop inactive widgets to active widget areas, but its an area we’d like to improve — maybe they should get an “area chooser”-like UI?
  • When editing a widget, the title is highlighted (using your current color scheme).
  • Clicking/Tapping on the “Save” button inside a widget now closes the widget and gives a quick confirmation message that the settings have been saved. This is based on some of our earlier user tests.
  • You’ve always been able to drag an active/inactive widget over the list of available widgets to deactivate it (yes, really!), but its been ugly. We’ve made it a little more tolerable. Give it a try.

The plugin is still very young, but we’re looking to the community to get some interested from designers, developers, and testers. Please, install the plugin and play around. If you’d like to help us improve widgets, please join us every Monday at 20:00 UTC in #wordpress-ui — you can also drop your Skype nick below and we’ll add you to our ongoing chat.

Some things to keep in mind when testing the Better Widgets plugin:

  • Responsive styles are essentially broken. Its on our short list, but we haven’t gotten to it yet.
  • The code is quick and dirrty — I’ve been the only developer committing code. Please, lets change this!
  • Some of this may look familiar to early MP6 adopters — this code comes from an earlier version of MP6, and was removed before the MP6 merge into 3.8.
  • We need accessibility help! Keyboard navigation is a must. I’d love to ditch the separate “accessibility mode” altogether and make it accessible out of the box.

#widgets

Widgets Area Chooser – 3.8 Proposal

Placing widgets with drag-and-drop can be tedious and annoying — especially if you have lots of sidebars on which to drop widgets. The Widgets team has been working on a few solutions (for this problem, and more), including redesigning the wp-admin widgets interface and adding the ability to manage widgets from within the customizer. These projects are still ongoing, and not ready for 3.8. However, along the way we’ve found a few incremental changes which improve the overall experience of working with widgets. Some of these improvements have made their way into MP6. Others involve more functional changes which don’t belong in MP6. This plugin is one of those improvements.

The Widgets Area Chooser is available at: https://wordpress.org/plugins/widget-area-chooser/

The Problem
Dragging widgets from the available widgets in the top-left, to a sidebar “below the fold” is hard. Almost impossible. Dragging widgets on a touch screen device is also difficult.

The Solution
Clicking (or tapping) on an available widget brings up a list of available sidebars that you can place the widget in to — its pretty simple, and works great on touch devices.

Accessibility
There’s also the accessibility problems that drag-and-drop introduces, which necessitates the need for the separate (and often neglected) Accessibility Mode. This plugin provides a much easier way for those with screen readers to add new widgets without having to drag-and-drop. In fact, this could be the first step towards removing the need for an Accessibility Mode for widgets.

Demonstration
Here’s what the chooser looks like:

Here’s a quick video of the plugin in action:

Please let us know what you think!

#3-8, #widgets

Howdy everyone There’s been a lot of discussion…

Howdy everyone! There’s been a lot of discussion over the last week or two around widgets for 3.8. Inspired by @lessbloat, I’ve made a short survey with a few basic questions about widgets and how you use them. It you could, please take a few minutes to share your thoughts:

Take the Widgets Survey

Thanks!

#3-8, #survey, #widgets

Widgets redesign

All of the redesigned widgets functionality is in place in trunk. Only remaining is some improvement to the visual design for the widgets screen in admin.

The new way to add widgets to WordPress is by extending WP_Widget. All widgets created that way have support for multiple instances.

Also all existing widgets will have to be converted to this system as the previous API functions will (most likely) be removed in 2.9. This is quite easy and any of the default widgets can be used as an example.

A typical widget is constructed as follows:

class WP_Widget_Archives extends WP_Widget {
	function WP_Widget_Archives() {
		$widget_ops = array('classname' => 'widget_archive', 'description' => __( "A monthly archive of your blog's posts") );
		$this->WP_Widget(false, __('Archives'), $widget_ops);
	}

	function widget( $args, $instance ) {
		// displays the widget on the front end
	}

	function update( $new_instance, $old_instance ) {
		// update the instance's settings
	}

	function form( $instance ) {
		// displays the widget admin form
	}
}

// register the widget
add_action('widgets_init', 'my_super_widget_init');
function my_super_widget_init() {
	register_widget('WP_Widget_Archives');
}

For more details and examples check wp-includes/widgets.php and wp-includes/default-widgets.php.

#widgets

Soliciting feedback on new Widgets API

Soliciting feedback on new Widgets API

#widgets

Converting default widgets to the new wi …

Converting default widgets to the new widgets API.

#widgets

Nice – widgets are running into some int …

Nice – widgets are running into some integer overflow bug.

#widgets

Going to clean up the new widget interfa …

Going to clean up the new widget interface so that cancel buttons really mean cancel.

[5886]

#widgets

Going to try to add descriptive info to …

Going to try to add descriptive info to titles for in-use-widgets in the admin early next week.

Text: {excerpt}…

#widgets

mdawaffe landed some dashboard widget ca …

mdawaffe landed some dashboard widget caching improvements.

#dashboard, #ui, #widgets