Make WordPress Core

Opened 2 years ago

Closed 9 months ago

Last modified 9 months ago

#54395 closed defect (bug) (fixed)

'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 commit
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 (6)

focus-outline-clipped-all-images.png (167.6 KB) - added by sabernhardt 2 years 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 2 years ago.
Add New image, with focus outline clipped and hidden Date filter
inline-uploader-no-items-found.png (21.0 KB) - added by sabernhardt 2 years ago.
Inline uploader when no images are found with filter
inline-uploader-replace.png (18.8 KB) - added by sabernhardt 2 years ago.
Inline uploader for uploading a new image replacement
54395.patch (1.4 KB) - added by sabernhardt 2 years ago.
iteration on 53833.more.patch, moving the height and top values from 782px to 900px breakpoint
54395.2.diff (1.4 KB) - added by joedolson 9 months ago.
Refreshed patch

Download all attachments as: .zip

Change History (14)

@sabernhardt
2 years 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
2 years ago

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

@sabernhardt
2 years ago

Inline uploader when no images are found with filter

@sabernhardt
2 years ago

Inline uploader for uploading a new image replacement

@sabernhardt
2 years ago

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

#1 @sabernhardt
2 years 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
12 months ago

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

#3 @alvitazwar052
9 months 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.✅

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


9 months ago

@joedolson
9 months ago

Refreshed patch

#5 @joedolson
9 months ago

  • Keywords commit added

This ticket was mentioned in PR #4566 on WordPress/wordpress-develop by @joedolson.


9 months ago
#6

CSS fixes for classic media replace dialog

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

#7 @joedolson
9 months ago

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

In 55896:

Media: Fix CSS layout issues in Replace media dialog.

Make focus outline fully visible at all media query breakpoints, prevent the date filter from becoming hidden, and match the heading styles to other screens.

Props sabernhardt, hareesh-pillai, alvitazwar052.
Fixes #54395.

Note: See TracTickets for help on using tickets.