WordPress Embedded Block Shows Large Whitespace for Short Posts

[devansh2002]

On frontend if we have WordPress Embedded block with a post that has less content WordPress Embedded block has large whitespace at the bottom.

Steps to Reproduce

1. Create a WordPress post with only a title and no content.
2. Create a new post and add a WordPress Embed block.
3. Embed the previously created post.
4. Save and preview the post on the frontend.

Fix embed block height calculation by removing unnecessary lower bound check.

Issue: On frontend if we have WordPress Embedded block with a post that has less content WordPress Embedded block has large whitespace at the bottom.

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

Before	After

[swissspidy]

Thanks for your report and the PR.

This needs careful testing, as the 200px min height was a deliberate decision at the time.

We don't want to allow the embedded iframe to resize itself to have 0px (and make itself invisible).

Maybe a smaller minimum like 100px is ok, but we should not outright remove the limit.

[devansh2002]

@swissspidy
I agree with setting a minimum height.

I tested embedding both short and long content posts.
The embedded iframe height was around 139px, and on mobile (320px width) it was about 161px for short post.
Since, it was less than 200px the iframe was using 200px as height and hence the whitespace.

A minimum height of 100px seems reasonable.

[audrasjb]

Introduced in [34903].

If it's only to ensure the embed has a minimal height I would have gone with a smaller value, like 20 or 50px, but 100px looks more that reasonable at a glance, given the fact thats this is probably an edge case.

I tested the patch and the edited PR looks good to me.

[swissspidy]

Now I recall why it was 200px minimum height: the sharing dialog needs enough space.

100px is too short, it cuts a lot off.

200px is just enough to display it properly, even when selecting the "HTML Embed" code option. Anything below 200px wouldn't be enough.

We might be able to add some CSS inside the iframe to improve styling if there's not enough space, but we don't control what's inside. So if it's an embed from an older WP version it won't work.

Given the edge case I am inclined to rather close this as a wontfix.

(Reminder, I wrote this code ~10years ago)

[audrasjb]

Ahhh yeah I missed the sharing dialog! 😱
That's a big edge case indeed. I agree it's safer to not change this given the wide adoption of embeds…

[swissspidy]

The iframe might resize though when opening the sharing dialog, I‘ll need to check that.

[dhrumilk]

I tested the patch and PR looks good to me.

[swissspidy]

Possible solution with changing the embed's height when opening the sharing modal

[swissspidy]

The iframe might resize though when opening the sharing dialog, I‘ll need to check that.

Nope, it doesn't.

That would be an interesting thing to add, but requires a bigger change to the embed-template.js file. Then the behavior would be like in the video I just added.

But even with such a change we can't just drop the minimum right away, because you might be embedding a post from an older WordPress site without the embed-template change.

So leaning towards wontfix or maybelater.

[audrasjb]

Alright, thanks for the investigation @swissspidy.
Removing from the milestone for now, but yes, it's probably better to close it as wontfix.