Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement SmartFrame embedding #21101

Merged
merged 11 commits into from
Sep 22, 2021
Merged

Implement SmartFrame embedding #21101

merged 11 commits into from
Sep 22, 2021

Conversation

alshakero
Copy link
Member

@alshakero alshakero commented Sep 15, 2021

Changes proposed in this Pull Request:

This PR adds support for SmartFrame embedding. It's heavily inspired by (more like shamelessly copies) gettyimages embedding logic. It adds support for:

  1. It adds a SmartFrame embedding block, you can test it by adding a "SmartFrame" block and use this URL to test.
  2. Smartframe URLs URLs using the embed block.
  3. SmartFrame shortcodes like [jetpack_smartframe script-id="6ae67829d1264ee0ea6071a788940eae" image-id="mantymetsa_1630927773870" width="100%" max-width="1412px"].
  4. SmartFrame embed code, it transforms it into a safe shortcode.
<script src="https://embed.smartframe.io/6ae67829d1264ee0ea6071a788940eae.js" data-image-id="mantymetsa_1630927773870" data-width="100%" data-max-width="1412px"></script>

Fixes #21062

Jetpack product discussion

Context here: p58i-b8R-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

  1. Apply D66901-code diff on your sandbox.
  2. Sandbox a site. Create a new post.
  3. Using the SmartFrame component, embed https://mikael-korpela.smartframe.io/p/mantymetsa_1630927773870/7673dc41a775fb845cc26acf24f1fe4f (you can add random query params to verify the regex catches any valid URL).
  4. Using the embed component, embed https://mikael-korpela.smartframe.io/p/mantymetsa_1630927773870/7673dc41a775fb845cc26acf24f1fe4f (you can add random query params to verify the regex catches any valid URL).
  5. Using the shortcode component, please test [jetpack_smartframe script-id="6ae67829d1264ee0ea6071a788940eae" image-id="mantymetsa_1630927773870" width="100%" max-width="1412px"]. Only script-id and image-id are required, and the embed should work without the rest.
  6. Using custom HTML block, use the embed code they provide <script src="https://embed.smartframe.io/6ae67829d1264ee0ea6071a788940eae.js" data-image-id="mantymetsa_1630927773870" data-width="100%" data-max-width="1412px"></script>

@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello alshakero! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D66901-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

@github-actions github-actions bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Feature] Shortcodes / Embeds Unit Tests labels Sep 15, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Sep 15, 2021

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ⚠️ All commits were linted before commit.
  • ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ 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 🤖


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.


Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.


Jetpack plugin:

  • Next scheduled release: October 5, 2021.
  • Scheduled code freeze: September 28, 2021.

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Sep 15, 2021
@alshakero alshakero marked this pull request as draft September 15, 2021 15:01
@alshakero alshakero marked this pull request as ready for review September 16, 2021 15:04
@alshakero alshakero added the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Sep 16, 2021
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR! I gave it a first pass below.

@jeherve jeherve removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Sep 16, 2021
@jeherve jeherve added this to the jetpack/10.2 milestone Sep 16, 2021
@alshakero
Copy link
Member Author

@jeherve Your feedback really shaped the PHP code up! Thank you so much. Addressed all.

@jeherve jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Sep 17, 2021
@jeherve
Copy link
Member

jeherve commented Sep 21, 2021

Is this ready for another review now?

@alshakero alshakero added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Sep 21, 2021
@alshakero
Copy link
Member Author

@jeherve Yes! Forgot to change the labels.

jeherve
jeherve previously approved these changes Sep 21, 2021
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tests well for me. 🚢

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Sep 21, 2021
jeherve
jeherve previously approved these changes Sep 21, 2021
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

approving again after our discussion in p1632232389218000-slack-CBG1CP4EN

@alshakero alshakero merged commit 086efee into master Sep 22, 2021
@alshakero alshakero deleted the add/smartframe-support branch September 22, 2021 11:04
@github-actions
Copy link
Contributor

Great news! One last step: head over to your WordPress.com diff, D66901-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

@alshakero
Copy link
Member Author

r232103-wpcom

@kraftbj kraftbj removed the [Status] Ready to Merge Go ahead, you can push that green button! label Sep 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhancement: investigate SmartFrame (GettyImages) embedding support
4 participants