Users discuss a regression in Discourse’s onebox feature for WordPress 4.4 sites, where embedded previews stopped displaying correctly after upgrading. AdamCapriola reports broken previews on his site, noting that the iframe height is off and the title/excerpt are missing — though the featured image appears oversized. techAPJ identifies that mixed content errors (due to missing SSL on the WordPress site) break the embed on HTTPS Discourse instances like meta.discourse.org. codinghorror confirms WordPress 4.4 sites like blog.discourse.org should be supported and notes that onebox previously only handled permalinks with ../yyyy/mm/dd/.. structure. techAPJ later fixes this by updating onebox to also support ../yyyy/mm/slug/ URLs. Further, techAPJ observes the iframe’s height is hardcoded to 338px and lacks proper CSS max-width, causing layout issues. AdamCapriola suggests hiding the blockquoted WordPress embed link via CSS and confirms the image size is fine when embedded directly in WordPress. codinghorror emphasizes that variable-height embeds must be avoided to preserve infinite scrolling. techAPJ resolves the issue by switching WordPress embeds to use OpenGraph data instead of oEmbed, which avoids iframe height problems and provides consistent rendering — as seen in the fixed preview at sixprizes.com. The fix is implemented in this commit.
Onebox used to work great for my site, but last week (I’m pretty sure after I upgraded to 4.4) it stopped working so nicely:
The Iframely previews look ok except for the oEmbed HTML — it looks weird.
This seems relevant: https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-wordpress-4-4/
I guess there’s a plugin to disable the new embed functionality, but I doubt many people are going to think of doing (or want to do) that.
Sure, we should support both earlier WordPress and WordPress 4.4 here @techapj can you add to your list?
The above WordPress onebox looks good on try:
It’s broken here on meta because http://sixprizes.com (WordPress blog) does not have SSL enabled, hence causing this error:
Mixed Content: The page at 'https://meta.discourse.org/t/onebox-broken-for-wordpress-4-4-sites/36765/2' was loaded over HTTPS, but requested an insecure resource 'http://sixprizes.com/2015/12/15/silver-surfer-back-to-back-runner-up-reports-a-fiery-standout-and-some-potential-plays/embed/'. This request has been blocked; the content must be served over HTTPS.
@AdamCapriola If your Discourse instance has SSL enabled than the accompanying WordPress blog should also have SSL enabled for embeds to work properly.
Oh, huh. Maybe they are working. The only other link I’d showed up like this and I assumed something was broken:
I guess the height is just off (the title and except aren’t shown — featured image is too big). Is that a WordPress issue?
Also http://blog.discourse.org is latest WordPress so we can test with that too.
We’re supposed to onebox URLs in the form
http://blog.discourse.org/2015/12/discourse-selected-for-mozilla-open-source-support-program/
Where it is
http://example.com/yyyy/mm/slug/
Because we assume they are WordPress..
Why isn’t that happening, @techapj?
Currently we were only oneboxing WordPress links with ../yyyy/mm/dd/.. permalinks, just added support for ../yyyy/mm/.. permalinks too:
https://github.com/discourse/onebox/commit/f66b171cc79e067022d457d62a0883b33383c9c2
Posts from http://blog.discourse.org are still not getting oneboxed because we are not providing oEmbed endpoint, will modify our WordPress theme to include oEmbed endpoint for posts.
Seems like it.. Here is the WP iframe source: “Build-A-Bat” — Crafting Crobat for Competitive Play, Meta Updates, and Rogue Highlights — SixPrizes
Notice that there is no max-width CSS property on image, and the iframe height is fixed height="338".
Hmm. Yeah idk why the height is wrong. The image size is actually ok. When I try to embed the post in WordPress it looks fine.
Either way, the blockquoted link above the embed should be hidden, right?
blockquote.wp-embedded-content {
display: none;
}
Height appears to be 338 for anything (notice the whitespace below this embed):
It resizes inside of WordPress posts though (visit that link and watch the page load). So maybe there’s something going on in Discourse preventing it from resizing correctly?
We absolutely do not want embedded variable height content as it destroys our infinite scrolling – ask @techapj about Twitter embeds for this reason. If it is variable height, it cannot be allowed.
Got it. So I guess for consistency we want to enforce WordPress links as they behaved previously then? (OpenGraph instead of oEmbed)
Is that possible or is this in the hands of the WP install?
It needs to behave like Twitter where we grab the content and render it. We cannot have alien Iframes of varying height ruining all scrolling.
Okay, I just fixed this issue via
https://github.com/discourse/onebox/commit/1b8bef8f96a4353cdfa6bc67da87d6750d5d31bf
Now in case of WordPress embeds onebox will use OpenGraph data instead of oEmbed (so as to avoid weird iframes).
Here’s the above WordPress link with OpenGraph data: