VideoPress: fix legacy admin crash on video upload/delete (base-ui ref-merge) by CGastrell · Pull Request #49340 · Automattic/jetpack

CGastrell · 2026-06-02T13:49:09Z

Proposed changes

The legacy VideoPress admin dashboard threw an uncaught TypeError from @base-ui/react@1.4.1's useMergedRefs / useRenderElement path on every video upload or delete, crashing the React tree and leaving the admin unresponsive. This was a regression from #48909 (27bf601935), which migrated UpgradeTrigger from ContextualUpgradeTrigger to a @wordpress/ui Notice compound tree.

Root cause. In UpgradeTrigger, the Notice.Description child was mounted conditionally:

{ description && <Notice.Description>{ description }</Notice.Description> }

description derives from hasUsedVideo (= hasVideos), which flips on upload/delete. Mounting/unmounting that child changes the Notice.Root subtree shape across renders. base-ui@1.4.1's useRenderElement conditionally swaps between two different ref-merge hook functions (useMergedRefs vs useMergedRefsN, separate useRef slots) depending on subtree shape, so the changing shape misaligns the stored fork-ref and didChange reads .refs off null. Crash.

The modern wp-build dashboard's equivalent (src/dashboard/components/overview/free-tier-notice.tsx) uses the same @wordpress/ui Notice but never crashes because it always renders <Notice.Description> (static, never conditional).

The fix. Make the Notice.Root children shape invariant across the hasVideos flip: always render <Notice.Description>, varying only its text — mirroring free-tier-notice.tsx. No more &&-gated direct child of Notice.Root.

projects/packages/videopress/src/client/admin/components/admin-page/index.tsx — UpgradeTrigger now renders <Notice.Description> unconditionally.

Empty-description edge case. Before the first upload on a free site, description was previously '' — that's why it was conditional (an empty <Notice.Description> would render an empty styled row). Rather than gating the child (which reintroduces the crash) or rendering blank, I gave the no-videos branch a sensible non-empty fallback nudge:

const description = hasUsedVideo
    ? __( 'You have used your free video upload', 'jetpack-videopress-pkg' )
    : __( 'The free plan includes one video upload.', 'jetpack-videopress-pkg' );

This keeps the children shape constant in both states while never rendering an empty row. (.upgrade-trigger SCSS only sets a margin-top on Notice.Root; Notice.Description carries its own internal spacing, so a blank one would have looked broken — hence the copy, not an empty string.)

This keeps the JETPACK-1543 @wordpress/ui Notice migration — it does not revert #48909.

Related product discussion/links

VIDP-245
Regressed by Componentry: migrate ContextualUpgradeTrigger to @wordpress/ui Notice #48909 (27bf601935)

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

No. Analytics (jetpack_videopress_upgrade_trigger_link_click) are unchanged.

Testing instructions

The legacy dashboard renders by default — the modern dashboard is gated behind apply_filters( 'rsm_jetpack_ui_modernization_videopress', false ) in src/class-admin-ui.php (default false, nothing in shipped code enables it). So the default VideoPress admin is the legacy/crashing one; no filter is needed to reproduce.

Note: the upgrade nudge only shows for sites without a VideoPress purchase (! hasVideoPressPurchase). A site with a VideoPress plan won't render UpgradeTrigger and can't reproduce this.

Fresh-connect Jetpack on a free-tier site (no VideoPress purchase) so UpgradeTrigger renders.
Open wp-admin/admin.php?page=jetpack-videopress.
Upload a video, then delete a video.

Before

The React tree crashes with TypeError: Cannot read properties of null (reading 'refs') (on delete) / ...undefined (reading 'length') (on upload). The admin becomes unresponsive.

After

Upload and delete complete without any crash.
The upgrade nudge renders correctly in both states:
- No videos yet: "The free plan includes one video upload." + Upgrade CTA.
- After a video exists: "You have used your free video upload" + Upgrade CTA.

🤖 Generated with Claude Code

…merge The legacy VideoPress admin dashboard crashed with an uncaught TypeError from base-ui@1.4.1's useMergedRefs/useRenderElement path whenever a video was uploaded or deleted (regression from #48909, which migrated UpgradeTrigger to a @wordpress/ui Notice compound tree). UpgradeTrigger conditionally mounted <Notice.Description> based on hasUsedVideo (which flips on upload/delete). That changed the Notice.Root subtree shape across renders; base-ui@1.4.1's useRenderElement conditionally swaps between two different ref-merge hooks (separate useRef slots), so the shifting shape misaligned the stored fork-ref and didChange read .refs off null. Fix: always render <Notice.Description>, varying only its text — mirroring the modern dashboard's free-tier-notice.tsx, which uses the same Notice and never crashes because its Description is static. A non-empty fallback nudge covers the pre-first-upload case so we never render an empty styled row. Keeps the JETPACK-1543 @wordpress/ui Notice migration; does not revert #48909. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-06-02T13:49:56Z

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/vidp-245-videopress-upgradetrigger-base-ui-crash branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/vidp-245-videopress-upgradetrigger-base-ui-crash

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 · 2026-06-02T13:53:15Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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!

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Videopress plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

…-fold The previous fix put both translated strings as the two arms of an inline ternary. Terser folds `cond ? __('a',d) : __('b',d)` into a single `__(cond?'a':'b', d)`, whose msgid is no longer a string literal, so the i18n-check-webpack-plugin fails the production build (makepot can't extract it). Hoist each string to its own module-scope constant so the calls stay separate literal statements. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

jp-launch-control · 2026-06-02T14:05:56Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/videopress/src/client/admin/components/admin-page/index.tsx	0/26 (0.00%)	0.00%	2 ❤️‍🩹

Full summary · PHP report · JS report

obenland

Thank you!

obenland · 2026-06-02T19:46:50Z

+// If they live as the two arms of an inline ternary, terser folds them into a
+// single `__( cond ? 'a' : 'b', domain )`, which breaks string-literal POT
+// extraction (the i18n-check-webpack-plugin fails the production build).


Ugh, that's annoying, I ran into that today, too.

CGastrell self-assigned this Jun 2, 2026

CGastrell added [Status] Needs Review This PR is ready for review. [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Package] VideoPress labels Jun 2, 2026

github-actions Bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label Jun 2, 2026

CGastrell mentioned this pull request Jun 2, 2026

VideoPress admin: TypeError in @base-ui/react useMergedRefs on video delete/upload (regression from #48909) #49230

Closed

CGastrell requested a review from obenland June 2, 2026 17:42

obenland approved these changes Jun 2, 2026

View reviewed changes

CGastrell merged commit 807d99a into trunk Jun 3, 2026
76 checks passed

CGastrell deleted the fix/vidp-245-videopress-upgradetrigger-base-ui-crash branch June 3, 2026 12:35

github-actions Bot removed the [Status] Needs Review This PR is ready for review. label Jun 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VideoPress: fix legacy admin crash on video upload/delete (base-ui ref-merge)#49340

VideoPress: fix legacy admin crash on video upload/delete (base-ui ref-merge)#49340
CGastrell merged 2 commits into
trunkfrom
fix/vidp-245-videopress-upgradetrigger-base-ui-crash

CGastrell commented Jun 2, 2026

Uh oh!

github-actions Bot commented Jun 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 2, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Jun 2, 2026 •

edited

Loading

Uh oh!

obenland left a comment

Uh oh!

obenland Jun 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

CGastrell commented Jun 2, 2026

Proposed changes

Related product discussion/links

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

Testing instructions

Before

After

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

obenland left a comment

Choose a reason for hiding this comment

Uh oh!

obenland Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

jp-launch-control Bot commented Jun 2, 2026 •

edited

Loading