Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 2 years ago

#53679 closed defect (bug) (fixed)

The media library looks broken on mobile

Reported by: andraganescu's profile andraganescu Owned by: joedolson's profile joedolson
Milestone: 5.8.1 Priority: normal
Severity: normal Version: 5.8
Component: Media Keywords: has-patch needs-testing commit fixed-major
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 (3)

121881790-6148c400-cd18-11eb-8b33-288dd6e6324f.png (264.5 KB) - added by zieladam 3 years ago.
53679.patch (627 bytes) - added by mukesh27 3 years ago.
Updated patch with parent selector
Markup 2021-08-03 at 14.22.19.png (48.8 KB) - added by peterwilsoncc 3 years ago.

Download all attachments as: .zip

Change History (26)

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


3 years ago
#1

  • 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 follow-up: @SergeyBiryukov
3 years ago

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

#4 @sabernhardt
3 years ago

  • Focuses css added

#5 @mukesh27
3 years 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 3 years ago by mukesh27 (previous) (diff)

@mukesh27
3 years ago

Updated patch with parent selector

#6 @zieladam
3 years 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.


3 years ago

#8 @ocean90
3 years ago

#53812 was marked as a duplicate.

#9 in reply to: ↑ 3 ; follow-up: @moch11
3 years ago

Replying to SergeyBiryukov:
Dimana saya dapat mengakses Component dan milestone

#10 @andraganescu
3 years ago

  • Keywords needs-testing added

#11 @mukesh27
3 years ago

#53855 was marked as a duplicate.

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


3 years ago

#13 in reply to: ↑ 9 @desrosj
3 years ago

  • Version set to 5.8

#14 @peterwilsoncc
3 years ago

  • Keywords needs-refresh added; needs-testing removed

Testing on trunk with the patch applied, I am still seeing the bug on mid-sized screens, as shown in Markup 2021-08-03 at 14.22.19.png. There is still a little padding between the edge of the frame and the scroll bar.

This appears on both the post and widget editor's image block.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


3 years ago

#17 @joedolson
3 years ago

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

#18 @zieladam
3 years ago

  • Keywords needs-testing added; needs-refresh removed

@peterwilsoncc good spot! I updated the PR and I think we're good now – would you confirm?

#19 @peterwilsoncc
3 years ago

  • Keywords commit added

Tested on both WP trunk and 5.8 with pull request applied.

Looks good on small, medium and large screens.

Thanks for updating.

#20 @peterwilsoncc
3 years ago

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

In 51631:

Media: Fix layout of media library modal on narrow screens.

Reduces the right margin of the media library modal on small and medium width screens to remove excess white-space. On very narrow screens this was preventing the media icons from displaying.

Props andraganescu, desrosj, joedolson, moch11, mukesh27, sabernhardt, SergeyBiryukov, zieladam.
Fixes #53679.

#21 @peterwilsoncc
3 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for merging in to 5.8 branch.

#22 @desrosj
3 years ago

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

In 51642:

Media: Fix layout of media library modal on narrow screens.

Reduces the right margin of the media library modal on small and medium width screens to remove excess white-space. On very narrow screens this was preventing the media icons from displaying.

Props andraganescu, desrosj, joedolson, moch11, mukesh27, sabernhardt, SergeyBiryukov, zieladam, peterwilsoncc.
Merges [51631] to the 5.8 branch.
Fixes #53679.

adamziel commented on PR #1502:


2 years ago
#23

I'm not pursuing this work anymore so I'm closing this PR. Feel free to take over!

Note: See TracTickets for help on using tickets.