Toolbar component update: September 2021

19 tickets closed during the 5.8 cycle, and some of the remaining bugs are already in the 5.9 milestone.

So what else should happen soon? To help set priorities for upcoming releases, please check out the groups of open tickets below. Hopefully you’ll find a ticketticket Created for both bug reports and feature development on the bug tracker. that interests you.

Content and arrangement

The first two tickets here suggest a long-term direction for the toolbar content and the order of links.

  • Audit toolbar links and content: includes exploration in the now-inactive Toolbar Experiments 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.
  • Rearrange top-level toolbar items to make more sense with full-site editing.

These four are potential short-term enhancements.

Showing the right elements in the right context

Interactivity

One major proposal is replacing the hover interaction for expanding dropdown menus so that would require intentional clicking (or touchscreen tap, Space or Enter key) with JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. enabled. A change this big needs plenty of testing early in a release cycle, and the code is not ready for that yet.

Ultimately, a good implementation of this could keep users from accidentally opening the profile dropdown when they navigate near the Publish button. And it could fix up to three reported bugs:

Two tickets address long dropdown menus:

Other potential fixes and improvements can help the user experience.

CSS-focused changes

The first three CSS tickets below are bugs.

These three are enhancements.

Developer-focused features

Options/preferences

Props to @marybaum for reviewing and editing this post, plus @sergeybiryukov for reviewing it.

#toolbar

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 adminadmin (and super admin) menu to the toolbar on the front-end. Given that this involves the admin menu “APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.”, 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 adminadmin (and super admin) menu as a toolbar dropdown on the front-end, we need to discuss that “APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.” (#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 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 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 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. 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 adminadmin (and super 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 HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 ticketticket Created for both bug reports and feature development on the bug tracker. 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 iOSiOS The operating system used on iPhones and iPads.. Development of testing checklists. Lots of iteration.

Passwords UIUI User interface

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-multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site (f541)
  • .dashicons-editor-table (f535)
  • .dashicons-filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. (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-invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally 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 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. 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 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 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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