VideoPress: migrate ProgressBar to @wordpress/components by dhasilva · Pull Request #48191 · Automattic/jetpack

dhasilva · 2026-04-19T19:38:34Z

Part of #48160

Proposed changes

Replace the custom ProgressBar from @automattic/jetpack-components with the native ProgressBar from @wordpress/components on VideoPress-related progress bars:
- VideoPress admin dashboard storage meter (packages/videopress · VideoStorageMeter).
- VideoPress thumbnail upload progress (packages/videopress · VideoThumbnail).
- Jetpack plugin VideoPress storage meters in Performance settings and the At-a-Glance dashboard card.
Convert the progress (0–1) prop to the WP value (0–100) prop, clamped to 100 to match the previous component's internal behavior.
Drop the progressBarClassName prop from VideoStorageMeter (only consumer was the admin page, which only used it for a background-color override that the WP default already provides).
Restore the previous bar dimensions with small scoped overrides: 12px height (storage meters), 3px height (thumbnail upload), 100% width (VideoPress admin storage meter). WP's default Track is 1.5px tall.
Clean up orphaned CSS after the prop removal.

Related product discussion/links

Parent issue: Jetpack UI Modernization #48160 (Jetpack UI Modernization)

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

No.

Testing instructions

VideoPress admin dashboard (packages/videopress)

Visit wp-admin/admin.php?page=jetpack-videopress on a site with a paid VideoPress plan and at least one uploaded video.
Confirm the storage meter renders under "High quality, ad-free video" with:
- a 12px-tall, full-width bar
- the percentage label above (e.g. "50% of 1 TB of cloud video storage")
Upload a new video via the video library. While uploading, confirm the thumbnail tile shows a thin (3px) progress bar beneath the "Uploading X%" label, and that it renders correctly in both card view and row view.

Jetpack plugin — Performance settings

Go to Jetpack → Settings → Writing → Media on a site with a paid VideoPress (non-unlimited) plan.
Confirm the VideoPress storage meter renders with a 12px bar and the "Using NGB of 1TB" label below.

Jetpack plugin — At-a-Glance dashboard card

Go to Jetpack → Dashboard on the same site configuration and ensure the VideoPress card shows the storage meter with a 12px bar and the "Using NGB of 1TB" label.

Regression checks

Visit the VideoPress admin dashboard on an Atomic site or on an unlimited-storage plan and confirm the storage meter is still hidden.
Confirm storybook stories for VideoStorageMeter and VideoThumbnail still render.

Before	After

Replaces the custom ProgressBar component from @automattic/jetpack-components with the native ProgressBar from @wordpress/components across VideoPress surfaces (admin dashboard storage meter, thumbnail upload progress) and the Jetpack plugin's VideoPress storage meters (performance settings and at-a- glance dashboard). Drops the now-unused progressBarClassName prop from VideoStorageMeter and cleans up the associated CSS overrides. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-19T19:39:19Z

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 update/videopress-progressbar branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/videopress-progressbar

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-04-19T19:39:45Z

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:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: May 5, 2026
- Code freeze: May 4, 2026

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

jp-launch-control · 2026-04-19T19:53:56Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

simison · 2026-04-19T20:32:03Z

+.meter > div {
+	height: 12px;
+	width: 100%;


What's the effect on design, and can we avoid this override?

Without the height, the default is 1.5px, barely visible. And the width is document here.

simison · 2026-04-19T20:32:19Z

+	> div {
+		height: 3px;
+	}


Can we avoid this and use component's default height?

Same as above

dhasilva added the [Status] Needs Review This PR is ready for review. label Apr 19, 2026

dhasilva self-assigned this Apr 19, 2026

github-actions bot added [Package] VideoPress [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Admin Page React-powered dashboard under the Jetpack menu labels Apr 19, 2026

dhasilva requested a review from a team April 19, 2026 20:15

simison reviewed Apr 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VideoPress: migrate ProgressBar to @wordpress/components#48191

VideoPress: migrate ProgressBar to @wordpress/components#48191
dhasilva wants to merge 1 commit intotrunkfrom
update/videopress-progressbar

dhasilva commented Apr 19, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 19, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 19, 2026 •

edited

Loading

Uh oh!

jp-launch-control bot commented Apr 19, 2026

Uh oh!

simison Apr 19, 2026

Uh oh!

dhasilva Apr 19, 2026

Uh oh!

simison Apr 19, 2026

Uh oh!

dhasilva Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dhasilva commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Related product discussion/links

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

Testing instructions

VideoPress admin dashboard (packages/videopress)

Jetpack plugin — Performance settings

Jetpack plugin — At-a-Glance dashboard card

Regression checks

Uh oh!

github-actions bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Apr 19, 2026

Code Coverage Summary

Uh oh!

simison Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

dhasilva Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

simison Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

dhasilva Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dhasilva commented Apr 19, 2026 •

edited

Loading

github-actions bot commented Apr 19, 2026 •

edited

Loading

github-actions bot commented Apr 19, 2026 •

edited

Loading