May 20 toolbar and admin menu meeting summary

This is a summary of the May 20 toolbar and admin menu meeting, which was held to jump start toolbar changes proposed in #32678 (chat log). The next meeting will be held May 27 at 16:00 UTC.

The biggest component of this initial phase of changes is bringing the entire admin menu to the toolbar on the front-end. Given that this involves the admin menu “API”, we need to bite the bullet and dive into what it takes to give it a real API and fix #12718 (among others). In order to complete this for 4.6, work needs to move quickly.

Participants: @helen, @celloexpressions, @folletto, @emathison, @deshack, @morganestes, @rdall, @boonebgorges, @thomasplevy, @jeremyfelt, @clorith

Key points

  • Action item: A document outlining strategy, documenting the current API, and describing the design of a new API has been started. Sections that are empty/marked for help are in need of owners. This is to be completed by the next meeting.
  • While there are many interaction changes that need exploring, and a few included in the current proposal, the focus for this cycle is content changes.
  • The links currently in the W menu will be relocated/reproduced in other places, e.g. About in the Dashboard submenu and as the link for the version number in the footer of the admin.
  • @boone helpfully provided some background on BuddyPress’s very similar changes to its navigation API last week. This is also documented in the Google Doc above.

#toolbar

Toolbar and admin menu meeting this Friday, May 20

A meeting will be held on May 20 at 16:00 UTC in #core to take a look at the proposed toolbar changes for 4.6 in #32678 (image below). As the bulk of this proposal involves showing the admin menu as a toolbar dropdown on the front-end, we need to discuss that “API” (#12718, #33418, etc.), as well as what can be done for user testing in the meantime.

Unified admin menu toolbar concept

#4-6, #toolbar

Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons

Development leading up to the first beta brought several visual changes. These are available right now in the nightly build. Switch a site to nightly builds and try them out.

Customize in the toolbar

To disambiguate between links to the Customizer and links to the Appearance screens from the front-end, Customize now has a top-level toolbar button rather than having links to it mixed with dashboard links in the site menu. This context mixing leads to disrupted user expectations as they navigate, as well as experiences that feel slower or actually are slower in some cases. See #32924.

This means an additional top-level menu item, but the existing links to Widgets and Themes in the dropdown will now point to the admin, as the Dashboard and Menus links do. The advantage and goal for this change is to make it clear that you are about to enter the customizer. Deep links have not been added back in this go-round; this means that direct links to Header and Background are currently absent (with a very narrow exception related to old browsers). Those two deep links are still available in the admin menu under Appearance, which similarly mixes context but has not yet been addressed.

More changes are coming to the toolbar. Peek at a possibility for more general improvements to the toolbar, being discussed in #32678.

Phone friendly list tables

List tables now scale down to phones. The column truncation strategy they used before didn’t scale down to small screens. A single column layout with disclosures is the new strategy. Some of our most important screens use list tables, notably Media and Posts. Truncated columns was number 5 on our top  5 impediments to flow on touch devices list.

After:

Before:

See #32395.

For more screenshots, see these visual surveys of the list table screens.

Toolbar interaction fixes for touch devices

I’ve been wanting this one for a long time.  Toolbar interaction was number 3 on the top  5 impediments to flow on touch devices.

 

Fixed!

Fixed!

See #29906. That ticket is a good read.  It has: Visual feedback and visual surveys. Punting a working fix to the next release so that a new, more future proof approach could be tried. Development of touch capability detection. Working around iOS. Development of testing checklists. Lots of iteration.

Passwords UI

The password set/change UI was updated with these improvements.

  • Generate the password for the user
  • More tightly integrate password strength meter
  • Warn on weak passwords

See #32589 for more screenshots.

Dashicons update

Dashicons received a big update.

New icons:

  • .dashicons-admin-customizer (f540)
  • .dashicons-admin-multisite (f541)
  • .dashicons-editor-table (f535)
  • .dashicons-filter (f536)
  • .dashicons-hidden (f530)
  • .dashicons-image-filter (f533)
  • .dashicons-image-rotate (f531)
  • .dashicons-layout (f538)
  • .dashicons-sticky (f537)
  • .dashicons-thumbs-down (f542)
  • .dashicons-thumbs-up (f529)
  • .dashicons-unlock (f528)
  • .dashicons-warning (f534)

Updated icons:

  • .dashicons-plus (f132)
  • .dashicons-yes (f147)

dashicons-preview

See #30902.

Better styling for .form-invalid inputs

See #32490.

Responsive styling for my-sites.php

My Sites now moves to a single column layout on narrow viewports. Here it is on an iPhone 6, an iPad, and a Macbook, as well as at full-width.

Here’s what it looked liked before.

my-sites-before

See #31685 – Better responsive styling for my-sites.php

Crosslinking Customizer Panels

The graf in the Menus panel details about using the Customize Menu widget now links directly to the widgets panel.

customize menus details

See #32742.

You might notice the misaligned question mark icon on that screenshot. #32733 is tracking that.

 Easy switching between production and nightly builds

The beta tester plugin makes it easy to switch a site to nightly builds. Now switching back to the latest stable build is just as easy. It’s not the prettiest, but it is shown only to beta testers and will suffice until we finally refresh the Grand Unified Updater screen. For info on using the beta tester plugin to test with nightly builds, see the Beta Testing page of the core handbook.

See #32613.

 

Previously: Today in the Nightly: Site Icons, Text Editor in Press This

#beta-testing-flow, #customize, #dashicons, #list-tables, #multisite, #passwords, #today-in-the-nightly, #toolbar