Make WordPress Core

Opened 19 months ago

Last modified 8 days ago

#54395 accepted defect (bug)

'Replace image' dialog CSS issues (mobile)

Reported by: sabernhardt's profile sabernhardt Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.2.2
Component: Media Keywords: has-patch has-screenshots
Focuses: css Cc:

Description

Follow-up to #53833

When testing a patch for that ticket, @hareesh-pillai noticed the first two problems below at smaller screen sizes.

1) The top of the image focus outline and checkbox are cut off between 640 and 782 pixels. (Changeset r51642 added top padding for 640px and narrower, or under 400px tall and any width, but changing top from 72px to 82px at a larger breakpoint might have been better.) This also happens when adding a new image.
2) The Date filter can drop below the Type filter—out of sight—due to the auto width introduced in r44653. With "November 2021" as the longest option, this occurs for me at about 320-480px and 640-800px. Other languages can break in wider viewports, different fonts, etc.
3) At any width, the heading style is all uppercase for the inline uploader in the Replace image dialog but not when adding a new image. Changes to the h2 headings in r35427 and r46375 were made (mainly) for the first screen of the "Image details" modal, but "Replace image" is still inside that modal.

Steps to reproduce:

  1. Install and activate the Classic Editor plugin.
  2. Create a new post.
  3. Click "Add Media" button. At various screen sizes, note whether the Date filter shows and whether the selected image has a full focus outline on the Media Library tab. Also check the styles on the Upload files tab.
  4. Select an image and insert it into the post.
  5. Click on the image and select the Edit button (pencil icon). Again, note whether the Date filter shows and whether the selected image has a full focus outline on the Media Library tab. Also check the styles on the Upload files tab.

Attachments (5)

focus-outline-clipped-all-images.png (167.6 KB) - added by sabernhardt 19 months ago.
Replace image dialog in 5.8.1, with focus outline clipped and hidden Date filter (after selecting filter and showing all images again)
add-new-image.png (151.8 KB) - added by sabernhardt 19 months ago.
Add New image, with focus outline clipped and hidden Date filter
inline-uploader-no-items-found.png (21.0 KB) - added by sabernhardt 19 months ago.
Inline uploader when no images are found with filter
inline-uploader-replace.png (18.8 KB) - added by sabernhardt 19 months ago.
Inline uploader for uploading a new image replacement
54395.patch (1.4 KB) - added by sabernhardt 19 months ago.
iteration on 53833.more.patch, moving the height and top values from 782px to 900px breakpoint

Download all attachments as: .zip

Change History (8)

@sabernhardt
19 months ago

Replace image dialog in 5.8.1, with focus outline clipped and hidden Date filter (after selecting filter and showing all images again)

@sabernhardt
19 months ago

Add New image, with focus outline clipped and hidden Date filter

@sabernhardt
19 months ago

Inline uploader when no images are found with filter

@sabernhardt
19 months ago

Inline uploader for uploading a new image replacement

@sabernhardt
19 months ago

iteration on 53833.more.patch, moving the height and top values from 782px to 900px breakpoint

#1 @sabernhardt
19 months ago

  • Keywords has-patch has-screenshots added

Patch notes:

  1. The patch adjusts the top value for the media grid and removes that top padding to avoid clipping the focus outline. Also, the 82px height and top values move from the 782px breakpoint to 900px, where the filter selects and search box increase in font size and height.
  2. The Date filter select's auto width is removed so the two can stay side-by-side. The dropdown still can be too wide in the block editor, when setting a Featured Image or using the Classic block. (Changing the selector to :first-of-type:last-of-type might work in the Gutenberg stylesheet.)
  3. For the heading style, the patch has .image-details .media-embed h2, which was not considered safe with the minor release. However, using two :not() selectors is too specific and would change the margin in places:
    .image-details h2:not(.media-attachments-filter-heading):not(.upload-instructions)

#2 @joedolson
3 months ago

  • Milestone changed from Awaiting Review to 6.3
  • Owner set to joedolson
  • Status changed from new to accepted

#3 @alvitazwar052
8 days ago

  • Version set to 6.2.2

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/54395/54395.patch

Environment

  • OS: macOS 12.4
  • Web Server: Nginx
  • PHP: 7.4.33
  • WordPress: 6.3-alpha-55505-src
  • Browser: Chrome
  • Theme: Twenty Twenty-two, Twenty-nineteen

Steps I followed

  1. Pulled the Patch using grunt
  2. Install and Activate the Classic Editor plugin.
  3. Click the "Add Media" button. At various screen sizes, Checked Media Icons and Date filters
  4. Insert the Image from the media library and check the focus indicators
  5. Checked the Uploader tabs

Screenshots:

  1. Empty Upload Tab: https://prnt.sc/Yiu8hctu4ACk
  2. Media Library Focus: https://prnt.sc/maapK_euAbTg
  3. Empty Media Library: https://prnt.sc/qJbs__mLbJ9W

Actual Results

  • The patch is working as expected.✅
Note: See TracTickets for help on using tickets.