AMP Support For Polls & Surveys

[jgcaruso]

This PR replaces poll js embed rendering with an amp-iframe when the page is being served via AMP.

Changes proposed in this Pull Request:

• convert crowdsignal poll shortcode and oembeds to an amp-iframe instead of a poll js embed (markup taken from what WordPress renders by default, with some changes to support iframe resizing)

Testing instructions:

The Official AMP plugin needs to be installed on your site (or test on WPCOM) OR AMP for WP – Accelerated Mobile Pages plugin

1. Add a Poll embed to a post (paste a poll url in an /embed block, or just in a new line on the page)
2. Add a Poll shortcode to a post [crowdsignal poll=10603231]
3. View the public post using the /amp endpoint and the poll should render correctly (as an iframe)
4. View the public post NOT using the /amp endpoint and the poll should render correctly (as a js embed)

Known issues

• if the amp-iframe is too close to the top of the page, it isn't allowed to render (an AMP rule, you will see an error stating this in the console if it happens)
• if there are a lot of amp-iframes on a page they may not all resize 🤷

Proposed changelog entry for your changes:

[roundhill]

I feel like we had this conversation about surveys, but any way we can have the amp-iframe autoresize? It gets cut off:

[jgcaruso]

Looks like there is support for resizing... involves changes to the amp-iframe and the content it is loading.
https://amp.dev/documentation/examples/components/amp-iframe/#resizable-iframe

I'll give this a try and see how it works.

[jgcaruso]

@roundhill thanks for asking about this again. I was able to add support to the poll iframe.

Might be able to do the same with our surveys. Just want to get you to test it on polls to make sure I'm on the right track 😄

See testing instructions for the Crowdsignal side changes that are required.

[CGastrell]

Ok, so, embedding a survey got me to reproduce the error you mentioned on slack? (p1600463017056500-slack-C9W0QF6KA)

First thing to notice is that the iframe is not resizing to show all the content:

Then noticed I can't submit the survey, but saw this error on the console:

This time I couldn't hard-hack a change URL on the form action attribute, but I guess we can pick it up from here to see how to fix the "form's frame is sandboxed and the 'allow-forms' permission is not set."

[jgcaruso]

Ok, so, embedding a survey got me to reproduce the error you mentioned on slack? (p1600463017056500-slack-C9W0QF6KA)

First thing to notice is that the iframe is not resizing to show all the content:

Then noticed I can't submit the survey, but saw this error on the console:

This time I couldn't hard-hack a change URL on the form action attribute, but I guess we can pick it up from here to see how to fix the "form's frame is sandboxed and the 'allow-forms' permission is not set."

Ah thanks for finding that! I was looking in the console but didn't notice anything, but maybe because its in an iframe theres a separate console (I feel like FF and Chrome expose those in different ways).

I can take it from there. sandbox and allow-forms is at least something I can research more to see what needs to be done to support them.

[jgcaruso]

Form submission is now working, but the survey resize doesn't seem 100% reliable.

Works well on a standard survey, but not working for the Start page... even though the js is executing (confirmed by putting in some console.log statements) but the amp-iframe seems to be ignoring the resize requests.