Embed Block: Displaying pages from own site

[RealCarFax]

This issue is specific to embedding pages from the user's own site and then viewing in Chrome or Edge.

Steps to reproduce the behavior

For example if the Customer has a published page titled "Sample Embed Page" and they copy the link to this page then paste it into the Home page of their site. The editor automatically embeds a preview of the page, which is then displayed with the title, featured image, and excerpt if you view it in Safari or Firefox. This same embed does not appear properly in Google Chrome or Microsoft Edge.

What I expected to happen

The experience in Safari and Firefox does not line up with Google Chrome or Microsoft Edge, I expected the embed to dispaly the same throughout.

What actually happened

The embed does not appear properly in Google Chrome or Microsoft Edge

Browser / OS version

The issue appears to be limited to Google Chrome and Microsoft Edge

Is this specific to the applied theme? Which one?

I have tested this out in several themes, so the issue does not appear to be limited to any one theme. Due to the way it's setup in a blockquote, with some themes the failed embed is placed inside of quotation marks, but some themes it just displays the title of the page and that's it.

Does this happen on simple or atomic sites or both?

This issue is limited to Atomic sites, as far as I can tell the Embed block will not embed a preview of a page from the same site on Simple sites.

Is there any console output or error text?

Yes, I do see a console error: WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed:

Screenshot of the error: https://d.pr/i/0fVj9A/LImbjZhQZF

Level of impact (Does it block purchases? Does it affect more than just one site?)

It seems like this affects Atomic sites. I provided my customer with a work-around of manually adding the content to their homepage using a heading block, image block, paragraph block, etc. and then grouping those together. That seems like a decent work-around for now.

Reproducibility

I was able to replicate this bug on my own Atomic site, carissaattest.com

Screenshot / Video

Here's a screenshot of how the embed of my "Sample Embed Page" on the Homepage looks in Firefox: https://d.pr/i/dI8G8O/9MhGFYWUo4

And here's how it looks in Google Chrome: https://d.pr/i/lHsr6o/sCNgRFPMiS

These examples are from my testing Atomic site, but the user that originally encountered this error has been speaking with us here: 3836783-zen

[benchilcote]

I have another similar case. A user has embed blocks with links to internal pages on their site. On Firefox the preview box is displayed but on Chrome, the embeds display as block quotes. In doing some testing, I found that embedded links to an internal page only displayed as a preview in the editor and as a link or block quote on the live page - in both Firefox and Chrome.

The CSS in Firefox vs Chrome is different for the user's site:

Here are screenshots from a test I did on an Atomic test site.

It is not always browser specific or theme specific.

User's case: 3863288-zen

[rezzap]

I have a similar issue reported in 3887945-zd-woothemes

When I remove the 'position absolute' from the iFrame in the inspector, the content then loads.

I was able to get it to show by adding this CSS, though I'm not sure if that's alright to use and what else it may affect:

.entry-content iframe.wp-embedded-content {
    position: relative !important;
}

[benchilcote]

Another case of this in #28934207-hc

User has a list of embedded URLs. They appear as text links in Chrome, and as embedded frames in Firefox.

The above CSS did not work correctly so I checked with css-help who provided this

.wp-block-embed iframe {
  position: unset !important;
}