WordPress.org

Make WordPress Core

Opened 10 days ago

Last modified 5 days ago

#53679 new defect (bug)

The media library looks broken on mobile

Reported by: andraganescu Owned by:
Milestone: 5.8.1 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch
Focuses: css Cc:

Description

This follows up on https://github.com/WordPress/gutenberg/issues/32660

While testing the new Widgets editor I found that browsing the media library while using a small screen device is unuseable. Initially I thought that it's a problem of the Wdgets editor. However the bug exists in the post editor as well.

To reproduce

  1. Using latest Gutenberg trunk
  2. On a mobile device with a small screen (phone)
  3. Create a new post
  4. Add an image block
  5. Click the "media library" button
  6. The contents of the media library are unusable: images are small, on one column, cannot scroll

Expected behavior

I expect the modal media library to function on small screens similar to how the WP admin screen at Media > Library functions.

Attachments (2)

121881790-6148c400-cd18-11eb-8b33-288dd6e6324f.png (264.5 KB) - added by zieladam 10 days ago.
53679.patch (627 bytes) - added by mukesh27 10 days ago.
Updated patch with parent selector

Download all attachments as: .zip

Change History (9)

This ticket was mentioned in PR #1502 on WordPress/wordpress-develop by adamziel.


10 days ago

  • Keywords has-patch added; needs-patch removed

While testing the new Widgets editor I found that browsing the media library while using a small screen device is unusable. Initially I thought that it's a problem of the Wdgets editor. However the bug exists in the post editor as well.

To reproduce:

  1. Using latest Gutenberg trunk
  2. On a mobile device with a small screen (phone)
  3. Create a new post
  4. Add an image block
  5. Click the "media library" button

Without this PR, the contents of the media library are unusable: images are small, on one column, cannot scroll.

With this PR, the contents of the media library is usable unusable: images are appropriately sized, view is scrollable.

Trac ticket: https://core.trac.wordpress.org/ticket/53679

#3 @SergeyBiryukov
10 days ago

  • Component changed from General to Media
  • Milestone changed from Awaiting Review to 5.8.1

#4 @sabernhardt
10 days ago

  • Focuses css added

#5 @mukesh27
10 days ago

PR https://github.com/WordPress/wordpress-develop/pull/1502 working fine for me.

For CS instead of a duplicate selector can we use a parent selector?

Duplicate selector: .attachments-browser.attachments-browser .attachments-wrapper,

Parent selector: .media-frame-content .attachments-browser .attachments-wrapper,

Last edited 10 days ago by mukesh27 (previous) (diff)

@mukesh27
10 days ago

Updated patch with parent selector

#6 @zieladam
6 days ago

@mukesh27 Sure! I dislike these double selectors as well, good call here. I just updated https://github.com/WordPress/wordpress-develop/pull/1502 accordingly.

This ticket was mentioned in Slack in #core-editor by zieladam. View the logs.


5 days ago

Note: See TracTickets for help on using tickets.