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

[siliconforks]

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.

[siliconforks]

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

[sabernhardt]

change top to 82px

[sabernhardt]

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]

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

[sabernhardt]

removing top margin from Link text field's container

[sabernhardt]

link text field with 53636.1.diff

[sabernhardt]

53636.1.diff: 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 (in the previous patch).

[sabernhardt]

image widget without a preview (with 53636.1.diff)

[sabernhardt]

image widget showing the preview (with 53636.1.diff)

[sabernhardt]

The preview was also partially hidden when using the image widget, and the patch's top value adjustment pushes the preview container down (as when inserting into the classic post editor).

In the widget dialog, I think the 10-pixel margin above the Alternative Text label and input should stay. It's necessary when the preview shows.

[sabernhardt]

With only a few hours before Beta, let's revisit this later, for next release.

[Ankit K Gupta]

Test Report

Env

• WordPress 5.9-alpha-51272-src
• Chrome Version - 96.0.4664.55 (Official Build) (x86_64)
• OS - macOS Monterey
• Theme: Twenty Twenty One
• Editor - Classic Editor
• PHP - 8.0.0
• Web Server - nginx
• Database - MySQL 8.0.16
• Used patch file - 53636.1.diff

Steps to test

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.

Test result

Working expected now. Image preview has proper margin from top and bottom. Tested with small as well as large size images.

Screencast example:

Before Fix (Large Image) -

After Fix -

Before Fix (Small Image) -

After Fix -

[audrasjb]

I tested the patch and it fixes the issue.
Self-assigning for commit.

[audrasjb]

In 52263:

Media: Ensure media preview is fully viewable in the "Add Media" modal.

This change ensures the media preview is not cut off in the "Add Media" modal box, when using the "Insert from URL" feature.

Props siliconforks, sabernhardt, mukesh27, ankit-k-gupta.
Fixes #53636.

[joyously]

This seems like a fragile fix. Why is that div styled as position:absolute anyway? Or why does that label have a white background (which is what covers the preview)?