Description
What's the issue?
Embedding WordPress posts in AMP WordPress content does not work. The issue described here has three parts.
iframe Resizing
WordPress post embeds are designed to securely render WordPress post excerpts in iframes that size themselves to the appropriate dimensions. This is achieved by sending a height message from the wp-embed-template.js script running in the embed template. The WordPress site hosting the embed includes the file wp-embed.js, which receives this height message and resizes the iframe accordingly.
AMP allows the inclusion of iframes with specific attributes, and a specific way to communicate resizing to the host. But this way does not work with the embed mechanism of WordPress because the message passed by the WordPress embed does not correspond to the message sent by the AMP iframe.
Same-origin embeds
The second part of the issue is that it is not possible to add WordPress embeds with the same origin (i.e. on the same site) since same origin iframes are not allowed in AMP if they also need to run scripts, which they do in order to resize properly.
Navigation
The third part of the problem arises when clicking on links inside the embedded iframe. In WordPress, all clicks on links are intercepted and the associated URL is sent in a message to the parent window. Then, the parent window follows the URL if the host is the same as the host of the URL being embedded. In AMP this approach does not work, even if the amp-iframe contains the allow-popups-to-escape-sandbox and allow-top-navigation-by-user-activation attributes.
Solution
The ideal solution for the embedding of WordPress posts on the same origin would be to avoid the iframe altogether, and just inline the embed content template directly into the host page. To achieve this we would need:
- Convert the embed template to AMP.
- Scope the CSS to only apply to the embed content.
- A way to block all styles from being inherited into the embed content's wrapper element.
This can be achieved by attaching the embed content as a shadow DOM. (The WordPress embed template can be served as an AMP document on the same origin.) However, this is not available for us to do in AMP since it requires a custom script. So there needs to be custom AMP extension for handling WordPress embeds.
For WordPress post embeds that are not on the same origin we can continue to use an iframe but handle the WordPress-specific messages posted from the iframe’d window.
How do we reproduce the issue?
- Spin off a WordPress install locally
- Install and activate the AMP Plugin for WordPress
- Configure the plugin in Paired Mode
- Create a post
- Add a link to a WordPress post
- Switch to the AMP version of the page
What browsers are affected?
All.
Which AMP version is affected?
All.