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:

5. Switch to the AMP version (?amp) and in master it should look erroneously as this (with less vertical height):

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:

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):

<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&amp;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&amp;key=..."
                class="contact-map"></iframe>
    </noscript>
</amp-iframe>

Proposed changelog entry for your changes:

• Improve rendering of Contact Info widget map in AMP.