WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 7 weeks ago

#53636 accepted defect (bug)

"Insert from URL": top of preview is cut off

Reported by: siliconforks Owned by: sabernhardt
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch needs-testing
Focuses: ui, css, administration Cc:

Description

In the "Add Media" dialog box, when using the "Insert from URL" function, the top of the preview is cut off.

Steps to reproduce:

  1. Install the "Classic Editor" plugin.
  2. Go to "Pages", then "Add New".
  3. Click the "Add Media" button.
  4. Click "Insert from URL".
  5. Enter the URL of an image. A preview of the image will be displayed below the URL field. Note that the top of the image is cut off.

This is especially noticeable for small images. For example, consider the following image:

https://s.w.org/style/trac/common/feed.png

Almost the entire image will be cut off.

Attachments (6)

insert-from-url.png (29.3 KB) - added by siliconforks 2 months ago.
This screenshot was taken with WordPress 5.8-RC2 (but the issue seems to be present in 5.7 too).
53636.diff (382 bytes) - added by sabernhardt 2 months ago.
change top to 82px
Before patch.png (48.0 KB) - added by mukesh27 2 months ago.
After patch.png (48.0 KB) - added by mukesh27 2 months ago.
53636.1.diff (570 bytes) - added by sabernhardt 7 weeks ago.
removing top margin from Link text field's container
insert-from-url-link-text-margin.2.png (26.6 KB) - added by sabernhardt 7 weeks ago.
link text field with 53636.1.diff

Download all attachments as: .zip

Change History (9)

@siliconforks
2 months ago

This screenshot was taken with WordPress 5.8-RC2 (but the issue seems to be present in 5.7 too).

@sabernhardt
2 months ago

change top to 82px

#1 @sabernhardt
2 months ago

  • Component changed from General to Media
  • Focuses ui css administration added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.9
  • Owner set to sabernhardt
  • Status changed from new to accepted

I have seen this before (ticket:48378#comment:6), but it was not fixed on that ticket.

It also happens when embedding videos with Insert from URL.

The patch increases the top spacing to 82 pixels to match the specified height of the input plus padding on the span.

To accommodate the possibility of users adjusting text size slightly larger than 18px, we could also reduce the bottom padding on the span (as low as 2px to leave room for the focus outline). The 82px top spacing would still give 16 pixels between the input border and the media details container at the expected font size.

@mukesh27
2 months ago

#2 @mukesh27
2 months ago

The patch 53636.diff working fine once the image loaded from URL but it adds more space. Please check above attached screenshots.

@sabernhardt
7 weeks ago

removing top margin from Link text field's container

@sabernhardt
7 weeks ago

link text field with 53636.1.diff

#3 @sabernhardt
7 weeks ago

  • Keywords needs-testing added

With a top margin of zero on the Link text setting's container, its label and field are 2 pixels lower than they have been. However, that is much closer than 12.

Note: See TracTickets for help on using tickets.