WordPress.org

Make WordPress Core

#46005 closed defect (bug) (fixed)

Screen options: columns visibility not saved on mobile

Reported by: afercia Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version: 5.1
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui Cc:

Description

Regression in trunk: Twelve months ago, [42644] / #40985 made the Screen Options toggle and panel visible also on mobile, for good reasons. Mobile users should be able to access all features. For example, as reported on #40985, they should be able to access the post Discussion meta box also when they're using a mobile device.

The Screen Options are now visible on all screens. In the posts/pages lists, the visibility of the columns in the table is not saved correctly.

Turns out the jQuery bits behind this feature check for the actual visibility of the columns using the jQuery selector :hidden and on mobile they're always hidden with display: none within an expandable panel so the check logic fails.

For clarity, this is the panel that contains the "hidden columns":

http://cldup.com/SjxQkZo0Ko.png

To reproduce:

  • in the responsive view, go in the posts list
  • open the Screen Options and start with all the Columns checkboxes unchecked
  • refresh the page, checkboxes should now be in this state:

http://cldup.com/nyf8wWQ6Id.png

  • check a couple of them
  • inspect the ajax request form data on your browser's dev tools network tab
  • see the form data contain hidden: author,categories,tags,comments,date (which means the code logic is failing and all the columns are still considered "hidden")
  • refresh the page
  • see all the checkboxes are still unchecked

Note: when clicking "Apply", the form is submitted including the Columns data even if they've been previously saved via AJAX (this is a known issue) by the way the bug is still present I guess because the checkboxes value is set via JavaScript.

See in common.js the related functions:

window.columns.init()
window.columns.checked()
window.columns.unchecked()
window.columns.saveManageColumnsState()
window.columns.hidden()

Suggested fix:
instead of checking visibility with the jQuery selector :hidden:

  • either try a new method along the lines of what window.columns.useCheckboxesForHidden() does
  • or check for the .hidden CSS class on the columns

Attachments (5)

46005.diff (529 bytes) - added by afercia 15 months ago.
46005.2.diff (1.1 KB) - added by afercia 15 months ago.
46005.3.diff (1.3 KB) - added by afercia 15 months ago.
comment expanded.png (74.4 KB) - added by afercia 14 months ago.
Comment details expanded
46005.gif (37.3 KB) - added by peterwilsoncc 14 months ago.

Download all attachments as: .zip

Change History (18)

@afercia
15 months ago

#1 @afercia
15 months ago

  • Keywords needs-testing added

46005.diff replaces the jQuery :hidden selector with a CSS class selector .hidden. Seems to me the simpler solution. Review and testing very welcome.

This ticket was mentioned in Slack in #core by afercia. View the logs.


15 months ago

@afercia
15 months ago

#3 @afercia
15 months ago

  • Keywords needs-patch removed

46005.2.diff addresses a similar issue in the Plugins screen, see #44037. The root cause is the same:

  • the Screen Options were originally not meant to be available on mobile so the "columns" visibility saving was meant to work only on desktop
  • additionally, the Plugins description was made always visible with a higher specificity CSS rules: now, users can set the visibility also on mobile

To clarify, 46005.2.diff fixes also #44037.

@afercia
15 months ago

#4 @afercia
15 months ago

46005.3.diff adjusts the CSS for the Comments table, where the Screen Options visibility setting needs to handle also the .comment-author div. Note: this div is only used in the responsive view and it's placed within the comment column.

I'd appreciate some testing also on multisite. /Cc @flixos90

#5 @afercia
15 months ago

  • Keywords has-patch added

#6 @afercia
15 months ago

  • Owner set to afercia
  • Status changed from new to assigned

#7 @peterwilsoncc
14 months ago

  • Keywords needs-refresh added

Checking 46005.3.diff, the Comments > In Response To option is always hidden on mobile too.

I've marked it needs refresh but will run through check other list tables tomorrow and provide further notes.

#8 @afercia
14 months ago

  • Keywords needs-refresh removed

In Response To option is always hidden on mobile too.

@peterwilsoncc in the responsive view, you need to expand the Comment details panel first.

@afercia
14 months ago

Comment details expanded

@peterwilsoncc
14 months ago

#9 @peterwilsoncc
14 months ago

@afercia Yes. Please excuse my vague moment.

I've tested this on both a site's admin and the network admin and toggling options is fully working.

It can look a little weird when all options behind the details view are hidden, as the detail toggle has no effect. Refer to the animated gif I attached a moment ago.

#10 @afercia
14 months ago

It can look a little weird when all options behind the details view are hidden

I'd agree. That's a pre-existing issue though. Right now, on mobile the Screen Options are hidden. If on desktop you've unchecked all the columns and then switch to mobile, the "expandable panel" is empty. Happens also on other screens.

#11 @peterwilsoncc
14 months ago

  • Keywords commit added; needs-testing removed

Cool, in that case I think it’s good to go in. Thanks boss.

#12 @peterwilsoncc
14 months ago

#44037 was marked as a duplicate.

#13 @peterwilsoncc
14 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 44722:

Administration: Save column visibility on small screens.

Modifies the jQuery selector for determining hidden columns to ensure they are detected when the expanded columns details are closed.

Adds high-specificity selectors specifically for setting screen options in the comments and plugins lists.

Props afercia.
Fixes #46005.

Note: See TracTickets for help on using tickets.