Embed Block: Featured Images hidden by Lazy Load when embedding posts from same site

Automattic / wp-calypso

The JavaScript and API powered WordPress.com

https://developer.wordpress.com

GNU General Public License v2.0

12.4k stars 1.98k forks source link

Embed Block: Featured Images hidden by Lazy Load when embedding posts from same site #63881

Closed ClassicRKR27 closed 2 years ago

ClassicRKR27 commented 2 years ago

Quick summary

Got a user report that when using an embed block that links to another post on the site, the featured image doesn't show.

Steps to reproduce

Create a post with a Featured Image
Create another post and add an Embed block using the URL of the post created in step 1

What you expected to happen

The Featured Image should show

What actually happened

The Featured Image doesn't show:

Context

29588733-hc

Simple, Atomic or both?

Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Disabling Jetpack Lazy Load resolves the issue.

thekingsprojects commented 2 years ago

Another case here: 5233159-zen

Gave them the Lazy Load workaround to see if it helps.

I was also able to replicate this issue on a Simple test site. In my case this happened both with the above user's embedded post and a post from WP Tavern, so it seems to affect embeds from multiple/any WP site.

Checking the inspector, it looks like it may be trying to display a 1x1 pixel image (see screenshot).

formosattic commented 2 years ago

+1 5233352-zen

vinnykaur commented 2 years ago

One more - 35099419-hc

jromales commented 2 years ago

another report in 5239232-zd-woothemes. I disabled Jetpack Lazy Load as workaround

rw-ye commented 2 years ago

5239071-zd-woothemes - shared workaround in chat.

jp-imagines commented 2 years ago

Another in 5241174-zd-woothemes. Disabled lazy images to resolve.

the-misha commented 2 years ago

User in 5239071-zd-woothemes came back to chat 35596739-hc to report that the workaround has stopped working around, and is just displaying links or the title linked to the embedded file.

jromales commented 2 years ago

Another one in 31762543-hc and I advised user to disable JP Lazy Load

Jaykame commented 2 years ago

Another one: 5233736-zd and gave the user lazy load workaround.

vinnykaur commented 2 years ago

hc-35133048 . Gave the workaround.

manuelrebollo-a11y commented 2 years ago

Another occurrence in 5265816-zd-woothemes Provided the workaround.

rambogenius commented 2 years ago

In my opinion the Embed block is useful to embed content from another site. This is what the documentation says as well.

Wouldn't a Blog Posts Block be a better suggestion for folks who want to showcase their posts on a different page of the same site? I am not sure why we are not explaining to them what the Embed block is for and not suggesting Blog Posts Block for the same. @ClassicRKR27 since you filed the original issue, could you shed some light?

poeticabdul commented 2 years ago

Another report here 5274654-zen . Suggested the work around

cuemarie commented 2 years ago

📌 HOUSEKEEPING

Labels ✅
Priority ✅
Replicable on Core - No

📌 SCRUBBING

Tested on Simple ✅
Tested on AT ✅
Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

On my Simple and Self-hosted test sites, the Featured Image displayed without issue in the Embed block, while Lazy Load was on. i.e. - not replicated.
On AT sites, using the Embed block with Lazy Load ON hides the featured image in both the editor and the live site, while turning Lazy Load OFF displays the featured image in both the editor and the live site.

Simple

Self-Hosted

AT: Lazy Load On:

Editor:

Live Site:

AT: Lazy Load Off:

Editor:

Live Site:

📌 WORKAROUND NOTES

As @rambogenius suggests, the Blog Posts Block can be used to display only specific chosen posts, so this is another workaround that will give the user more control over the appearance of their 'embedded' post.
Still, not sure why Lazy Load impacts the appearance of the featured image within the embed block on AT sites in this way.

📌 ACTIONS

Marked as Triaged for Quality Squad review

cuemarie commented 2 years ago

One other note: on my AT test site with Lazy Load ON, embedded posts from an external site do display their featured images, while the post from the same site's featured image is hidden.

edwinho89 commented 2 years ago

5292468-zd-woothemes

jorpdesigns commented 2 years ago

[ ] Reported in 5292470-zd. Suggested disabling JP Lazy-load.

Also, I discovered the issue also occurs when embedding a post from another site. I had to disable JP Lazy-load on the site I was embedding from.

jorpdesigns commented 2 years ago

[ ] Reported in 5283077-zd. User later disabled JP Lazy-load and the issue has been resolved.

ClassicRKR27 commented 2 years ago

In my opinion the Embed block is useful to embed content from another site. This is what the documentation says as well.

Wouldn't a Blog Posts Block be a better suggestion for folks who want to showcase their posts on a different page of the same site? I am not sure why we are not explaining to them what the Embed block is for and not suggesting Blog Posts Block for the same. @ClassicRKR27 since you filed the original issue, could you shed some light?

@rambogenius sorry for the late reply (I missed it), but honestly I hadn't thought of that - I wasn't aware of that part of the documentation for the Embed Block so I didn't think to suggest it. Though some of the replies since then seem to suggest that it's happening for outside sources as well.

sudeepbaral commented 2 years ago

[ ] Reported in 5348960-zd, the user embedded posts from their own site

Suggested the user to disable Jetpack Lazy Load for Images

danielbachhuber commented 2 years ago

This issue was fixed in https://github.com/Automattic/jetpack/pull/24989, and is slated to be released in Jetpack 11.2