Add noscript iframe fallbacks for amp-iframe for no-JS browsers #1913
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
swissspidy
approved these changes
Mar 1, 2019
jeherve
pushed a commit
to Automattic/jetpack
that referenced
this pull request
Mar 22, 2019
See #9730. #### Changes proposed in this Pull Request: Since AMP has built-in responsiveness, the Contact Info widget's map iframe with 600⨉216 dimensions can the actual height to be much less. For example, in Twenty Seventeen the sidebar is 325px wide. This results in the iframe being 117px high, since 325:117 has the same aspect ratio as 600:216. To fix, this PR explicitly uses AMP's `fixed-height` layout for the `amp-iframe` so that the height will always be 216px with the width being responsive. #### Testing instructions: 1. Activate Twenty Seventeen. 2. Install the AMP plugin and in the AMP settings switch to the paired mode. (You may also need to opt to hide the admin bar in AMP if there is too much CSS resulting.) 3. Add the Contact Info widget and click the checkbox to show the map (which requires a Google Maps API key). 4. Look at the frontend, and the non-AMP version should look like this: > <img width="358" alt="screen shot 2019-02-28 at 11 17 01" src="https://user-images.githubusercontent.com/134745/53592773-d2660c80-3b4b-11e9-9c9a-2cfae4e434ae.png"> 5. Switch to the AMP version (`?amp`) and in `master` it should look erroneously as this (with less vertical height): > <img width="353" alt="screen shot 2019-02-28 at 11 17 12" src="https://user-images.githubusercontent.com/134745/53592873-148f4e00-3b4c-11e9-8935-50425af128e1.png"> 6. Switch to this branch and in the AMP version it should look like the following, which is the same as the non-AMP version: > <img width="356" alt="screen shot 2019-02-28 at 11 25 43" src="https://user-images.githubusercontent.com/134745/53592925-2a047800-3b4c-11e9-8e31-c98e2b32c49e.png"> The HTML markup for AMP should look like this (after ampproject/amp-wp#1913, without which the `iframe` inside the `noscript` is also converted to `amp-iframe`): ```html <amp-iframe layout="fixed-height" width="auto" sandbox="allow-scripts allow-same-origin" height="216" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=3999+Mission+Boulevard%2CSan+Diego+CA+92109&key=..." class="contact-map"> <span placeholder>Loading map…</span> <noscript> <iframe width="600" height="216" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=3999+Mission+Boulevard%2CSan+Diego+CA+92109&key=..." class="contact-map"></iframe> </noscript> </amp-iframe> ``` #### Proposed changelog entry for your changes: * Improve rendering of Contact Info widget map in AMP.
4 tasks
This was referenced Aug 13, 2019
Closed
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a follow-up to #1861.
iframetoamp-iframe, automatically put the originaliframeinside of anoscriptelement inside or the replacementamp-iframe. This ensures that browsers that have JS turned off will still get the iframe rendering.iframeelements which are already inside ofamp-iframe > noscript.imgelements which are already inside ofamp-img > noscript.videoelements which are already inside ofamp-video > noscript.audioelements which are already inside ofamp-audio > noscript.