AMP compatibility issues #9730
Labels
Comments
gravityrail
added
[Pri] Normal
AMP
[Type] Bug
|
This issue has been marked as stale. This happened because:
No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation. |
|
This should be fixed by #10945 |
|
@gravityrail The PR #10945 would only address a subset of the above, if anything. An audit of all of the modules' AMP compatibility needs to be done, and this issue I think could serve as an epic to that end. |
|
My bad, you're right. I mis-read this in my eagerness to close stale issues. |
|
Also needing improved compatibility is the Comments module. See AMP validation errors that are generated here: ampproject/amp-wp#1785 (comment) |
|
Adding to this, we'll also need to make sure our different blocks, especially those that use forms and JavaScript, can be used with AMP. |
|
As long as these have |
|
For social share, it is possible to style |
|
Just to link issues, for Related Posts see #9556. |
|
We should probably look at the output of our different blocks as well: The upcoming GIF block (scheduled for release tomorrow), for example, is very broken right now. |
This was referenced Feb 5, 2019
Opened #11318 to begin to address that. |
This was referenced Feb 16, 2019
jeherve
pushed a commit
that referenced
this issue
Feb 18, 2019
I noticed that when turning on the Asset CDN module that styles were broken in AMP responses. In looking at the AMP plugin's CSS manifest comment I saw that that the Dashicons were were way larger than expected: ``` 35249 B (90%): link#dashicons-css[rel=stylesheet][id=dashicons-css][href=https://c0.wp.com/c/5.0.3/wp-includes/css/dashicons.min.css][type=text/css][media=all] ``` This is due to the fact that the AMP plugin was loading the CSS from the remote URL as opposed to using the local copy. Recall that AMP requires all CSS to be inlined (except for CDN stylesheets). Also, AMP allows a max of 50KB. Since the `data:` URL for the Dashicons font is very large, the AMP plugin will instead try to reference the font file with `https:` instead of the `data:` URL. See previously in #9513. All of this to say, the Asset CDN is breaking this since it fetches the CSS from a remote location. And in the `style[amp-custom]` element I see unexpectedly: ```css @font-face{font-family:dashicons;src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAGYMAA4AAAAAowAAAQ..." ``` When there should instead be: ```css @font-face{font-family:dashicons;src:url("https://example.com/wp-includes/fonts/dashicons.woff") format("woff"); ``` The `data:` URL is causing the theme's stylesheet to be excluded: ``` The following stylesheets are too large to be included in style[amp-custom]: 23967 B (64%): link#twentyseventeen-parent-style-css[rel=stylesheet][id=twentyseventeen-parent-style-css][href=https://amp-jetpack-westonruter.pantheonsite.io/wp-content/themes/twentyseventeen/style.css?ver=1.1][type=text/css][media=all] Total excluded size: 23,967 bytes (64% of 37,093 total after tree shaking) ``` So the fix is simply to short-circuit the Asset CDN from doing its thing when the response will be an AMP page. As noted in the comments, the Asset CDN is not relevant in AMP because custom JS is not allowed and CSS is inlined. Note also that it is not suitable to use the `jetpack_force_disable_site_accelerator` filter for this because it will be applied before the `wp` action, which is the point at which the queried object is available and we know whether the response will be AMP or not. This is particularly important for AMP-first (native AMP) pages where there are no AMP-specific URLs. For more on that, see #11195. See #9730 which is the master issue for AMP compatibility. #### Changes proposed in this Pull Request: * Short-circuit Asset CDN module in AMP responses. #### Testing instructions: 0. Activate the Twenty Seventeen theme. 1. Activate the [AMP plugin](https://github.com/ampproject/amp-wp). 2. On the AMP settings screen, turn on Native mode. 3. Enable the Asset CDN module. 4. View the frontend and notice that the page looks broken in terms of styling, and the AMP CSS unexpectedly includes a `data:` URL for the font. 5. Switch to this branch and notice the styling is no longer broken and the AMP CSS no longer uses the `data:` URL for the Dashicons font. #### Proposed changelog entry for your changes: * Add AMP compatibility for the Asset CDN module.
|
FYI, element-level infinite scroll support is currently being worked on in AMP, see ampproject/amphtml#14060. It's experimentally available under This could potentially be used to make the Infinite Scroll module in Jetpack AMP compatible. I know that the Jetpack module is quite complex, making sure to enqueue scripts and calling the main query, etc. So this wouldn't be a one-stop solution, but perhaps this information is useful for people trying to replicate infinite scroll in their projects and looking at this GitHub repository. |
|
A lot of the complexity in the Infinite Scroll module is to deal with script dependencies. Since AMP doesn't allow custom scripts, then I believe a lot of the complexity would be minimized. |
|
Pull requests with the AMP label: https://github.com/Automattic/jetpack/pulls?q=is%3Apr+label%3AAMP I've going through the modules one-by-one to check them for AMP compatibility issues. Here's a table of the results I have so far, which I'll keep editing until I finish:
|
|
Thank you for that! |
|
I've finished the audit, except for the shortcode embeds Update: Premium modules now included. |
Tracking this at https://github.com/Automattic/wp-calypso/issues/31179 Good catch! |
|
/cc @jessefriedman (Following up on our chat) |
jeherve
pushed a commit
that referenced
this issue
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 Sep 3, 2019
jeherve
added
[Type] Task
and removed
[Type] Bug
|
This board aims to give us an overview of what needs to be done: Master issues:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From @westonruter:
The text was updated successfully, but these errors were encountered: