List table changes in 4.3

List tables are a significant component of the WordPress adminadmin (and super 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 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. 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 CSSCSS Cascading Style Sheets. 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 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., 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 typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. 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 PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 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 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.

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 accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 networknetwork (versus site, blog) adminadmin (and super admin)

See #32962.

Improved 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. information in Network Admin Edit Site tabs

  • Use the site’s name rather than URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org 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 UIUI User interface 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 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