Widgets, Widgets, Widgets Meeting – Aug 26, 2013

Team Widgets³ held it’s second meeting this past Monday (Aug 26) in #wordpress-ui. Feel free to check out the IRC logs.

Spurred by the results of our initial survey results, we discussed the benefits and failings of drag-and-drop. The consensus seems to be that drag-and-drop works well for re-ordering existing widgets, but its less than ideal for placing new widgets.

We reviewed the concepts that have been brought up so far:

The plan right now is to build a simple prototype of each of these concepts. Keep in mind that a prototype doesn’t have to consist of working code — a clickable wireframe is a perfectly acceptable prototype, and can provide just as much data as a working pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

shaunandrews will focus on the tabbed concept
RichardTape will focus on the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. concept
jtsternberg will focus on the menu-like concept
The front-end editing concept will use the plugin as the prototype

We’ll test each prototype (and the current UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.) against the same set of tasks and see which one performs best against our goals. By simply building the prototypes we’ll hopefully learn which ones “feel right” and which ones don’t. And, by performing user tests on each, we’ll hopefully see where each succeeds and fails with regards to our goals.

This information combined will help us take the next step and either drop a concept, or rethink it and test again. We’ll continue with this process until we have something that feels “right.”

Or next meeting is schedule for Monday, September 2, 2013 at 20:00 UTC in #wordpress-ui.

Attendees:

shaunandrews
melchoyce
helen
jtsternberg
gregpabst
RichardTape
ipstenu
coreymcollins

#widgets

gregpabst 3:07 pm on August 29, 2013
During this week’s widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. meeting I shared screenshots of how Virb handles widgets. Shaun Andrews asked if I could detail the workflow for how Virb handles widget ordering, updating and additions seen below.

Widgets listing page: http://cl.ly/image/003N0u0e0w29
- Listing of all active widgets shown in the order they appear on your website.
- Each widget has an identifying icon on the left along with a title and a short description.
- When you hover over each item the icon on the left changes to an icon indicating that the item is draggable. The user can click and drag the widget to the position they would like it in.
- There is a delete icon on the right allowing the user to remove the widget completely.
- You can click a widget to go to a widget customization screen.
- There is a button at the top that allows the user to add a new widget.
Widgets customization view: http://cl.ly/image/2O1I1Q3n0M1x
- When a users clicks the widget on the widgets main listing page they are taken to a customization page.
- The customization page features all the unique settings for the widget.
- “Back to widgets” button – Takes user back to the widgets listing page and does not save.
- “Save” button – Saves changes but leaves you on the customization page.
- “Save & Close” button – Saves changes and returns user to widgets listing page.
Widgets addition modal: http://cl.ly/image/2q222R310r2T
- When a user click the “New Widget” button on the widget listing page a modal opens with available widgets.
- Once a widget is chosen the user is taken directly to the new widget’s customization page.
I think Virb has a good flow and being that drag & drop is only used to order widgets and addition I think this work well paired with a vertical tab menu so you are only edit one “widget area” at a time.
shaunandrews 3:06 am on August 31, 2013

Here’s the (semi-working) tabbed prototype if anyone would like to play with it: https://github.com/shaunandrews/widgets-widgets-widgets
Paal Joachim Romdahl 2:01 pm on September 3, 2013

Here is another mockup of the widgets area:
http://easywebdesigntutorials.com/wordpress/widget-wordpress-mockups/
Bottom line: visualizing the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. locations showing the full page. Using drag&drop And a + Add widget button. Multiple Widget Layout areas. Favorite Widgets. Etc.
Weston Ruter 6:57 am on September 18, 2013
Regarding the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. concept, I think that the “Select a template to add widgets to” area may not work out because:
1. What if there are no pages that have the selected template? Or what if multiple pages do? Which one is picked to preview?
2. How would WordPress be able to come up with those nice visual representation thumbnails for where the sidebars are located in the template layout?
3. What if templates conditionally render sidebars based on some other criteria, like if the page is a child of another page?
4. What about templates that aren’t page templates at all, but categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. templates, tag templates, etc? I guess I’ve been assuming the list of icons corresponds with the list of page templates available in the theme.
5. Themes can have many more layouts than just just 4.
6. Two templates may have the same layout, but they use different sidebars in the same area.
So I think the only reliable way to select a template to add widgets to, is to just navigate to the page that has the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. currently rendering on it. Since you can navigate the site within the preview window, the user can just navigate to the place where the sidebar appears. In the Widget Customizer plugin, we have a customizer section for each registered sidebar, but the sidebar customizer section only appears if the currently-loaded page in the preview window actually has that sidebar rendered within it. As you navigate the site within the preview window, the user can see the customizer sections for the sidebars show and hide based on whether or not the current page has the sidebar.

Unfortunately, the way that dynamic_sidebar() works, is that it fires an action each time it iterates over the widgets that are populating it (see example). So if a sidebar is empty, I don’t believe there is currently a way in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to determine if dynamic_sidebar() was ever called on the page. So the addition of another dynamic_sidebar* action that fires regardless of whether or not there are widgets populating the sidebar seems to be something we need added to core.

Sorry if I’m re-hashing old things.