jetpack
jetpack copied to clipboard
Add full AMP compatibility for Calendly block
See #14395.
~👉 Note this is currently blocked by an AMP bug which has been fixed upstream but is not yet in production. See https://github.com/ampproject/amphtml/issues/29398. In order to test this PR, you need to first opt-in to to the beta-channel
on the AMP Experiments page. The fix should be rolled out to AMP's production channel by September 22nd.~ The fix is now live.
Given post_content
as follows:
<!-- wp:heading -->
<h2>Link Style</h2>
<!-- /wp:heading -->
<!-- wp:jetpack/calendly {"style":"link","url":"https://calendly.com/aldrich-andrea"} -->
<div class="wp-block-jetpack-calendly"><!-- wp:jetpack/button {"element":"a","uniqueId":"calendly-widget-id","passthroughAttributes":{"url":"url"},"text":"Schedule time with me","url":"https://calendly.com/aldrich-andrea"} /--></div>
<!-- /wp:jetpack/calendly -->
<!-- wp:heading -->
<h2>Inline Style</h2>
<!-- /wp:heading -->
<!-- wp:jetpack/calendly {"url":"https://calendly.com/aldrich-andrea"} -->
<div class="wp-block-jetpack-calendly"></div>
<!-- /wp:jetpack/calendly -->
The Calendly link I obtained by doing a search, found on a Yale faculty page.
The blocks appear in the editor as:
The behavior of the block is made to have full parity with non-AMP, and the fallback behavior for when JS is disabled is also improved as seen in the following table:
State | Non-AMP | Non-AMP No JS 👎 | AMP Before 👎 | AMP After 👍 | Non-AMP No JS After 👍 |
---|---|---|---|---|---|
Closed | ![]() |
![]() |
![]() |
![]() |
![]() |
Opened | ![]() |
(Opens in new window; inline embed missing) | (Both links open new window) | ![]() |
(Both links open new window) |
Changes proposed in this Pull Request:
- Add full AMP compatibility for the Calendly block, and improve fallback behavior for when JavaScript is disabled.
Jetpack product discussion
Does this pull request change what data or activity we track or use?
Testing instructions:
- Activate AMP plugin.
- In AMP settings, select Transitional mode or Reader mode.
- Create post with the above
post_content
. - Compare block in AMP and non-AMP.
Proposed changelog entry for your changes:
- Add full AMP compatibility for the Calendly block, and improve fallback behavior for when JavaScript is disabled.
Scheduled Jetpack release: October 6, 2020. Scheduled code freeze: September 29, 2020
E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-17216
Thank you for the great PR description!
When this PR is ready for review, please apply the [Status] Needs Review
label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.
Generated by :no_entry_sign: dangerJS against ea82199586e64a59a8129a6100f5cba5ea4c44a6
Thank you for your PR!
When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
- :white_check_mark: Include a description of your PR changes.
- :white_check_mark: Add testing instructions.
- :white_check_mark: Specify whether this PR includes any changes to data or privacy.
- :white_check_mark: Add changelog entries to affected projects
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation :robot:
The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.