Consider to rethink and improve the list tables pagination links

[afercia]

Splitting this out from #33962. See also #32558.

Quickly discussed at WCEU 2016 Vienna's Contributor Day with @karmatosed and @hugobaeta and noticed the pagination links offer room for design improvements. Looks like there are no apparent reasons (other than historical ones) why the top and bottom pagination links should differ and maybe the editable input field should be displayed only when there are more than 3 pages.

As @helen pointed out, also the interactions could benefit from some rethink.

This would probably be a very nice ticket for designers willing to contribute :)

Current state on 4.6 trunk:

with longer translated strings:

[hugobaeta]

Like you said and shown with the screenshots, there are currently two UI patterns for table navigation:

• the one at the top the table, uses an input field for the current page number, so one can navigate quickly to others - let's call this the "input navigation"
• the one at the bottom of the table, just lists the page number and context ("1 of X") - let's call this the "simple navigation"

I had proposed in our conversation we switch both to a consistent pattern on top and bottom, one based on context: if there are less than 3 pages, show the "simple navigation" (no input, since the user can navigate all the pages, up to 3, with the first/previous/next/last buttons); if there are more than 3 pages, then we use the "input navigation", as it will help the user get to any page more quickly.

Thoughts?

[melchoyce]

Replying to hugobaeta:

I had proposed in our conversation we switch both to a consistent pattern on top and bottom, one based on context: if there are less than 3 pages, show the "simple navigation" (no input, since the user can navigate all the pages, up to 3, with the first/previous/next/last buttons); if there are more than 3 pages, then we use the "input navigation", as it will help the user get to any page more quickly.

Thoughts?

This sounds good to me.

[jorgelopezrepiso]

I have attached two .diff patches (one for PHP and one for JS) to unify both top and bottom paginations, showing the input field only when there are 4 or more pages.

In wp-admin/includes/class-wp-list-table.php, inside the pagination() method, instead of checking if it is top or bottom first, I now check the total number of pages ($total_pages). After that, I check for top only to preserve the accessibility features provided by the original label for the input.

In common.js, I removed a couple of lines and, at the end of the main wrapper (IIFE), I added an event listener to catch the Enter key press (key 13).

Tested on WP 7.0 RC. It works fine in my local tests.

[jorgelopezrepiso]

Uploaded v3. Fixed the pagination logic and layout structure. The previous CSS diffs are now optional/obsolete as this patch handles the structure cleanly.

[jorgelopezrepiso]

This version is just as functional as v5, but cleaner. Also, I would reconsider the CSS diffs, as I noticed the 2px margin difference.