As an oEmbed provider, how can I vend a left-floating embed?

Hey there,

I’m one of the maintainers of the embeds component in WordPress and I’m happy to help you with this.

Wrapping iframes in paragraphs is caused by various built-in content filters like wpautop(). This could easily be be circumvented by wrapping the iframe in a <div>.

However, you are relying on the oEmbed discovery mechanism which is quite strict in WordPress. For example, it strips out anything but links, blockquotes, and iframes. That means the <div> trick wouldn’t work.

In addition to that, sandbox="allow-scripts" is applied to all iframes fetched via oEmbed discovery. That triggers a couple of browser security warnings when trying to interact with the Kindle preview iframe, which I’d consider a more serious issue.

Both could be solved by making the Kindle service a trusted provider, either by offering a WordPress plugin that does so or by adding it directly to WordPress core. In that case, you could open a ticket on WordPress Trac and provide answers to these questions. We would then consider adding it to the next release.

HTML of trusted providers isn’t filtered for security purposes, which means circumventing the paragraph wrapping is easily possible. Also, embedding is a bit faster because there’s no need to to the oEmbed discovery.

I hope this answers your question and we’ll see a trac ticket from you soon. If not, do not hesitate to correct me ??

Cheers,
Pascal

Thanks Pascal for getting back to me.

To clarify: we are not using discovery. We’re adding our oEmbed endpoint as a provider in class-oembed.php. We plan to submit this change as a patch to WordPress Core and we’ll make sure to follow the correct process when submitting this patch.

Your suggestion worked to some extent; wrapping the iframe into a div allows me to float it to the left.

Unfortunately, it messes up the visual editor. Since the embed is now floated, the editor’s wrapper (.wpview-wrap) has no height and is therefore hard to interact with; plus, there’s still an empty line before the text.

The actual post looks okay and has the markup we want. Is there any way we can fix the editor UX as well?

In that case I’d recommend opening a ticket on Trac for adding the oEmbed provider and a second ticket for the wpview bug, mentioning the first one.

That way the editor team can chime in and help finding a solution as I’m not that familiar with the wpview parts. Embeds aren’t usually floated and it’s possible that the wpview CSS could be easily adjusted to accommodate for that.

You can also join the WordPress Slack team to get some feedback on the editor part beforehand. There’s a dedicated #core-editor channel for that.

Thank you Pascal. We’ll keep iterating and reach out to #core-editor if needed.