Unable to distinguish post formats when viewing list tables on mobile

[ajfleming]

Post format icons were recently removed from post list tables and a post format dropdown menu introduced to allow people to filter posts by format. See #46591 and [44961].

On narrow screens, however, the filter tools are hidden leaving mobile users with no way distinguish the format of their posts.

I suggest we revisit the decision to remove post format icons and consider the mobile user experience.

[SergeyBiryukov]

Hi @ajfleming, welcome to WordPress Trac! Thanks for the report.

#46591 was an attempt to keep the icons for exactly this reason (see also comment:52:ticket:35497), but they were still removed per design feedback.

Seems like we should either restore the icons in mobile view or show the filter tools.

[afercia]

Worth noting this applies also to other things. For example, it's not possible to distinguish posts by categories and tags (at least at first sight). To do that, users have to expand the post details one by one.

Here some things that happen in the view for small screens:

• Search is moved to the bottom: not sure this is so user-friendly
• Bulk actions are not available
• Filters by date, categories, and post formats are not available
• same for filters added by plugins

Seems to me this is because a few years ago, in the first era of "responsive design", the approach was to just hide things for small screens. Over time, this proved to not be a good approach because it prevents access to important features.

For example, consider what happened with the "Screen Options" at the top of the page in #40985:

I recently needed to disable comments on a particular post while away from my laptop. I opened the post editing screen on my mobile device but the Discussion meta box was hidden and there is no way to access Screen Options on mobile to show/hide meta boxes. This meant I was unable to disable comments on the post from my mobile device.

I'd like to propose a different approach: never hide functionalities on small screens. In this specific case, all the bulk actions / filters could simply be placed in an expandable panel.

[SergeyBiryukov]

Replying to afercia:

Search is moved to the bottom: not sure this is so user-friendly

Agreed, I was also confused by this a few times.

I'd like to propose a different approach: never hide functionalities on small screens. In this specific case, all the bulk actions / filters could simply be placed in an expandable panel.

I support this approach :)

[SergeyBiryukov]

Related: #47675

[afercia]

Discussed during today's accessibility bug scrub and agreed to move this ticket to Future Release, as something that needs to be addressed. If a patch comes to life, can always be considered for 5.3.

[joyously]

The post formats dropdown is available for filtering posts at this width of 1063.

[joyously]

There is no post formats dropdown available for filtering posts at this width of 780. There is also no Bulk action UI, but it is mentioned in the Help.

[ibdz]

From ​Design Triage today in Slack, we agreed that filtering should be available in mobile. So this one needs some design.

[joedolson]

It really makes a lot of sense to add a disclosure that exposes these items on demand, as @afercia suggested above; it would make the mobile interface significantly more useable.

I'm going to work on this.

[joedolson]

After exploration, this is unfortunately a lot more complicated than you'd expect, thanks to some unfortunate decisions in the HTML structure of the filters. It may be a good idea to restructure those to improve the options, but that's a more major change than should be made this late in the cycle.

[audrasjb]

As per today's bug scrub:
Moving to Future Release until we have a patch to review/discuss.

[sanket.parmar]

Building on comment:2 and comment:16, here are two narrower tracks that could produce a reviewable patch independently of the broader disclosure-panel restructuring.

Track A — Filterability: CSS selector precision (no PHP change)

The ≤782px breakpoint hides filter controls via an overly broad selector in
src/wp-admin/css/list-tables.css:

.tablenav.top .actions,    /* hides .bulkactions AND the filter controls div */
.tablenav .view-switch {
    display: none;
}

The bulk actions <div> already carries .bulkactions alongside .actions.
The filter controls <div> does not. So a one-line selector change would expose
all filter dropdowns (date, categories, post format, and plugin-added filters) on
mobile:

.tablenav.top .bulkactions,
.tablenav .view-switch {
    display: none;
}

Bulk actions remain available in the bottom tablenav. Note this would affect
all list tables on mobile, not just posts — which is consistent with the broader
concern in comment:2, but worth flagging in case it's considered too broad a change.
It would also need supplemental layout CSS for the stacked view at narrow widths,
and a design mockup per the needs-design keyword.

Track B — Visibility: inline format label in the primary column (PHP + CSS)

For the original use case — identifying a post's format at a glance without
needing to filter — a text label in column_title() following the existing
_post_states() pattern would work:

// After _post_states( $post ), inside column_title():
$format = get_post_format( $post->ID );
if ( $format && 'standard' !== $format
    && is_object_in_taxonomy( $post->post_type, 'post_format' )
) {
    echo ' &mdash; <span class="post-format-state">'
        . esc_html( get_post_format_string( $format ) )
        . '</span>';
}

Restricted to mobile only, and intentionally avoiding the icon approach removed
in 45136 per #46591:

.post-format-state { display: none; }

@media screen and (max-width: 782px) {
    .post-format-state { display: inline; }
}

Note that Track B addresses only visibility (identifying a post's format in the
list), not filterability. The two tracks are independent of each other. Happy to
put together a formal patch for either if the direction aligns.