List table changes in 4.3

List tables are a significant component of the WordPress admin, powering screens such as for posts, comments, and installed plugins. Its internals have not changed much since the introduction of WP_List_Table in 3.1, and visually has only significantly changed with the introduction of smaller screen responsive considerations in 3.8. In 4.3, we’ve improved list tables on both fronts, including API enhancements to support the front-end changes.

Better small screen responsive mode

In 3.8, list tables were made “responsive” by hiding columns as the viewport got narrower. While content truncation is a common responsive design approach, it is not a good one. Users who have a higher likelihood of being bandwidth limited, such as on phones, now have to load a second screen to see data that is potentially important for making what should be an initial decision as to what to do next. We also already have the data in markup going to waste, as well as an impossible-to-maintain set of CSS selectors hiding columns by name and then unhiding them in specific list tables. This strategy required developers to include custom CSS if using columns with the same names as core ones or if a custom column was more important than what core was showing by default.

Now, we show all the data under a toggle, showing only the bulk selection checkbox (when available) and a designated primary column by default. Screen option settings are honored, though setting them is not actually available on smaller screens right now. Check out the demo below, and read on for more about API changes.

4.3 List Tables Demo

4.3 List Tables Demo

Primary column and row actions

We’ve done a lot of work to provide a fallback primary column for custom list tables, as without one defined, list tables will suddenly look empty. Developers are able to specify a primary column via the list_table_primary_column filter, which receives the screen ID as context. This primary column is also where row actions are placed.

For example, if you’ve added a column for a slide image to a slide custom post type and would like for it to be the primary, it is now a matter of a simple filter. Previously, you would have needed to recreate the row actions in PHP and add custom CSS to ensure it did not disappear on smaller screens. As of 4.3, your code might look like:

function wpdocs_slide_list_table_primary_column( $column, $screen ) {
	if ( 'edit-slide' === $screen ) {
		$column = 'slide';
	}

	return $column;
}
add_filter( 'list_table_primary_column', 'wpdocs_slide_list_table_primary_column', 10, 2 );

Note that primary columns should typically be the first column after the checkbox. From a user perspective, it is best to keep the placement of the most important identifier of an item and its actions consistent. Specifying other primary columns will work, but may result in some visual breakage in the small responsive view when a row is toggled open. We are tracking how that may be handled on #33308.

Easier subclassing of WP_List_Table and other list tables

While WP_List_Table was designed for internal usage and didn’t make many considerations for custom subclasses, we recognize that developers use them and that clean up would benefit both implementations and future maintenance. The internal WP_List_Table classes now all call ->single_row_columns() in ->single_row() properly, which makes subclassing them significantly easier. Previously, ->single_row() in each WP_List_Table subclass contained a giant switch statement. In most cases, this was unnecessary. By calling ->single_row_columns() when rendering a row, the class will look for a method on the class inheritance chain called ->column_{$name}. This allows us to break up the columns into discrete methods, and removes the need to override ->single_row_columns(). Thusly, if you subclass a List Table like WP_Posts_List_Table, you can override a specific column just by overriding the column method, i.e: ->column_title().

Before: https://github.com/WordPress/WordPress/blob/4.2-branch/wp-admin/includes/class-wp-posts-list-table.php#L635
After: https://github.com/WordPress/WordPress/blob/master/wp-admin/includes/class-wp-posts-list-table.php#L997

#4-3, #dev-notes, #list-tables

Today in the Nightly: Site icons in the customizer, editor patterns, more accessible comment bubbles, row toggle focus styling

Install the nightly, and try out this fresh batch of shiny.

Site Icons in the Customizer

I’ve long wanted site icons in the customizer alongside site title and tagline. The identity information that I always want to edit when first setting up a site are now all together in the customizer.

For more visuals, see these visual records.

See #16434.

Editor Patterns

Create bulleted lists, ordered lists, and blockquotes using markdown like patterns. I find this particularly handy on phones when the editor toolbar is offscreen.

Screen Shot 2015-07-14 at 4.39.12 PM

See #31441.

Better focus styling for list table row toggles

See #32395.

Better accessibility and design for the comments bubble

The comments columns in our list tables were among the most confusing for screen reader users. Accessibility and visuals are now improved.

See #32152.

Eliminate content overruns on small screens

An audit of content overruns on small screens resulted in many fixes.

After:

Before:

See #32846.

Styling improvements on small screens for Right Now in the network admin

See #32962.

Improved header information in Network Admin Edit Site tabs

  • Use the site’s name rather than URL in the Edit Site header.
  • Provide “Visit” and “Dashboard” links for the site on all tabs.

After:

Before:

See #32525.

Disambiguate “Automatically add new top-level pages to this menu”

In the customizer, a menu’s auto-add pages option is now separated from the preceding menu location checkboxes.

See #32820.

 Passwords UI Improvements

Passwords received a couple of improvements. The show/hide toggles look better, and passwords ui is on the install screen. Passwords on the install screen still needs a little more flow work.

See #32589 and #32925.

For more visuals, see these visual records.

Reduce link noise in media library list view

This is visually subtle but removes confusion for screen readers.

KL_7dmW58c

See #32254.

 

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

#accessibility, #bubbles, #comments, #content-overrun, #customize, #edit-site, #editor, #list-tables, #media, #menus, #multisite, #network-admin, #right-now, #site-icons, #today-in-the-nightly

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