VideoPress: fix the age gate in the block editor

[dhasilva]

Fixes #28375

Proposed changes

This issue was two independent bugs that presented as one. Both are fixed here.

1. The age gate's "Continue" button did nothing.

The editor renders the player inside Gutenberg's SandBox, and an iframe's sandbox flags are inherited by every nested browsing context — including the videopress.com player frame that hosts the age gate. Without allow-forms, the browser blocked the birth date submission outright:

Blocked form submission to '' because the form's frame is sandboxed
and the 'allow-forms' permission is not set.

This was unfixable from Jetpack until WordPress/gutenberg#76471 added an allowForms prop to SandBox. That PR is merged but not yet released, so SandBoxWithForms widens the component type locally to accept the prop. Module augmentation is not an option here — SandBoxProps is not re-exported from @wordpress/components' root and ./sandbox is not in the package exports map. Older versions ignore the unknown prop, so the age gate simply stays as blocked as it is today until the bundled version catches up. The comment on that cast says to delete it and pass allowForms directly once it does.

2. Lowering a video's rating left the age gate on screen.

use-sync-media keeps two parallel field lists: videoFieldsToUpdate (pushed to the VideoPress API on save) and invalidateEmbedResolutionFields (triggers invalidateResolution( 'getEmbedPreview', … )). rating was in the first and missing from the second, so the API took the new rating — a page reload showed the correct state — while the cached oEmbed preview kept serving HTML with the gate baked in. That also explains the original report that changing any other video attribute cleared it: title, privacy_setting, allow_download and display_embed are all on the invalidation list.

Worth noting for reviewers: the comment above that list mentions some fields are "handled indirectly by the VideoPress video URL". That is true for loop, autoplay, color and friends, which getVideoPressUrl puts in the query string so a change produces a different URL and misses the cache naturally. rating is not one of its args, so it had no implicit invalidation to fall back on — hence the explicit list entry rather than a URL change.

Related product discussion/links

• WordPress/gutenberg#76471 — the upstream allowForms prop this depends on.
• WordPress/gutenberg#48942 — the upstream issue that blocked this since 2023.

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

No.

Testing instructions

Fix 1 requires the Gutenberg plugin on trunk (or any build including gutenberg#76471). Without it the prop is silently ignored and the age gate stays blocked — that is the intended graceful degradation, not a regression.

Set up a video whose rating requires an age check:

• Add a VideoPress block to a post, open the block sidebar, and expand Privacy and rating.
• Set Rating to R and save the post. Reload the editor — the player should show "This video may display mature content" with MM / DD / YYYY fields and a Continue button.

Verify the form submits:

• Click the block to select it (the block overlay swallows clicks while it is unselected).
• Fill in a birth date over 17 years ago and click Continue.
• The gate should clear and the video should become playable. On trunk today it does nothing.
• Optional: inspect iframe.components-sandbox in the editor canvas. Its sandbox attribute should now read allow-scripts allow-same-origin allow-presentation allow-forms.

Verify the gate goes away when the rating is lowered:

• With the gate showing, set Rating back to G and save the post — the sync runs on a save transition, not on the dropdown change itself.
• The player should refresh on its own and drop the age gate, with no page reload.
• Before this change, the gate persisted until you changed some other video attribute or reloaded the page.

Automated coverage:

• jp test js packages/videopress — 642 tests pass. The new cases are "allows form submission so the age gate birth date can be sent" and, in use-sync-media, "refreshes the player when the rating changes" plus a negative control asserting fields the embed does not depend on do not trigger a refresh.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/videopress-editor-age-gate branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/videopress-editor-age-gate

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

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.
  
• ✅ Add a "[Status]" label (In Progress, Needs 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 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.tsx	56/81 (69.14%)	0.39%	0 💚
projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/index.ts	75/138 (54.35%)	4.35%	-6 💚

Full summary · PHP report · JS report

[CGastrell]

LGTM! Works!