[wp-trac] [WordPress Trac] #47359: Unable to distinguish post formats when viewing list tables on mobile

[WordPress Trac]

#47359: Unable to distinguish post formats when viewing list tables on mobile
-------------------------------------------------+-------------------------
 Reporter:  ajfleming                            |       Owner:  joedolson
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Post Formats                         |     Version:  5.2.1
 Severity:  normal                               |  Resolution:
 Keywords:  needs-design has-screenshots needs-  |     Focuses:  ui,
  patch                                          |  accessibility
-------------------------------------------------+-------------------------

Comment (by 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:

 {{{
 #!php
 // 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 ' — <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 [changeset:45136] per #46591:

 {{{
 #!css
 .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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47359#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform