VideoPress: Migrate edit-video-details to unified header with breadcrumbs by CGastrell · Pull Request #47641 · Automattic/jetpack

CGastrell · 2026-03-17T22:24:06Z

Proposed changes

Migrates the VideoPress edit-video-details page to the unified admin header pattern, replacing the custom Header and GoBackLink components with standard AdminPage breadcrumbs + actions.

This is a continuation of the admin page header normalization effort (#47313) and follows the same breadcrumbs pattern established in Boost's cache debug log page.

Before:

After:

Changes

Breadcrumbs navigation: Replace custom Header (VideoPress wordmark logo + chevron + text) and GoBackLink (arrow + "Go back") with admin-ui breadcrumbs: Jetpack bolt icon + "VideoPress" link → "Edit" heading (shortened from "Edit video details" for better mobile fit)
Save button in content area: Move the primary "Save changes" button from the header into the content area below the description fields, keeping only the kebab actions menu in the header
Compact action buttons: Use size="compact" on the kebab menu button, consistent with Update AdminPage header action buttons to use compact size #47679
Button consistency: Switch Button from @automattic/jetpack-components to @wordpress/components (with variant="primary") for consistent styling across admin pages — also applied to VideoDetailsActions
Subtitle: Add the same "Professional quality, ad-free video hosting." tagline shown on the main VideoPress dashboard page
JITM placement: Move #jp-admin-notices slot from above AdminPage into the page content area (inside Container/Col), following the pattern from Fix admin notices and JITMs rendering inside page headers #47558 by @vianasw
CSS cleanup: Remove stale .header-wrapper, .logo-button, .header-content, .breadcrumb, .back-link, .buttons styles and the .jp-admin-page-header override

Other information

Generate changelog entries for this PR (using AI).

Related product discussion/links

Part of the Jetpack admin page header normalization initiative
Main PR: Normalize admin page headers with unified AdminHeader wrapping @wordpress/admin-ui #47313
JITM fix pattern: Fix admin notices and JITMs rendering inside page headers #47558
Compact action buttons: Update AdminPage header action buttons to use compact size #47679

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

No.

Testing instructions

Go to Jetpack → VideoPress (wp-admin/admin.php?page=jetpack-videopress)
Click "Edit video details" on any video
Verify the header shows:
- Jetpack bolt icon + "VideoPress" (as a clickable breadcrumb link) / "Edit"
- Subtitle: "Professional quality, ad-free video hosting."
- Kebab (⋮) actions menu on the right (compact size)
Verify the "Save changes" button appears below the description field in the content area
Click the "VideoPress" breadcrumb link — should navigate back to the main dashboard (preserving pagination if applicable)
Verify the main VideoPress dashboard page still renders correctly with its unified header

JITM testing (optional)

Add a fake JITM via mu-plugin (see #47558 for the snippet) and verify it renders below the header, not inside it.

github-actions · 2026-03-17T22:25:22Z

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

bin/jetpack-downloader test jetpack update/normalize-videopress-edit-details-header

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-03-17T22:25:24Z

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: March 31, 2026
- Code freeze: March 31, 2026

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

jp-launch-control · 2026-03-17T22:41:28Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx	0/34 (0.00%)	0.00%	-6 💚

Full summary · PHP report · JS report

_{Coverage check overridden by

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR
.}

vianasw · 2026-03-18T15:07:18Z

It's working well on desktop but the breadcrumbs are not rendering properly on mobile:

simison · 2026-03-19T13:47:21Z

How much does it help if we swap copy on mobile to "Edit" instead of "Edit video details" and "Save" instead of "Save changes"? Latter copy could work for desktop, too.

projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx

…ith breadcrumbs Replace the custom Header and GoBackLink components with the standard AdminPage breadcrumbs + actions pattern (matching Boost cache debug log). - Use admin-ui breadcrumbs: Jetpack bolt + VideoPress link / Edit video details heading - Pass Save + Actions as array to AdminPage actions prop - Switch Button to @wordpress/components for consistent styling - Add subTitle matching the main VideoPress dashboard page - Move JITM slot inside AdminPage content (following #47558 pattern) - Remove stale header/back-link/buttons CSS and .jp-admin-page-header override Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add size="compact" to the kebab menu button in VideoDetailsActions, consistent with the compact header action buttons from #47679. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move the Save changes button from the header actions into the Infos component below the description fields, freeing header space on mobile. Shorten the breadcrumb label from "Edit video details" to "Edit". Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add missing key prop to VideoDetailsActions in headerActions array - Change isLoading to isBusy on Save button (correct @wordpress/components Button prop) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Remove fullWidth and weight props (not valid @wordpress/components Button props) - Add CSS rule in dropdown to handle full-width button layout instead Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CGastrell self-assigned this Mar 17, 2026

github-actions bot added the [Package] VideoPress label Mar 17, 2026

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Mar 17, 2026

github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Mar 17, 2026

CGastrell added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Mar 18, 2026

simison reviewed Mar 19, 2026

View reviewed changes

projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx Outdated Show resolved Hide resolved

simison reviewed Mar 19, 2026

View reviewed changes

projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx Show resolved Hide resolved

CGastrell force-pushed the update/normalize-videopress-edit-details-header branch from 99acdcf to 694f6c4 Compare March 19, 2026 18:32

CGastrell requested a review from simison March 19, 2026 19:08

CGastrell and others added 4 commits March 23, 2026 15:12

changelog

ddc2079

VideoPress: Use compact size for video details actions button

b68d00d

Add size="compact" to the kebab menu button in VideoDetailsActions, consistent with the compact header action buttons from #47679. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CGastrell force-pushed the update/normalize-videopress-edit-details-header branch from 694f6c4 to 838b67b Compare March 23, 2026 18:14

CGastrell and others added 2 commits March 23, 2026 17:21

VideoPress: fix invalid DOM props on dropdown action buttons

db2c851

- Remove fullWidth and weight props (not valid @wordpress/components Button props) - Add CSS rule in dropdown to handle full-width button layout instead Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CGastrell merged commit 2e51581 into trunk Mar 23, 2026
73 checks passed

CGastrell deleted the update/normalize-videopress-edit-details-header branch March 23, 2026 21:36

github-actions bot added this to the jetpack/15.7 milestone Mar 23, 2026

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Mar 23, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VideoPress: Migrate edit-video-details to unified header with breadcrumbs#47641

VideoPress: Migrate edit-video-details to unified header with breadcrumbs#47641
CGastrell merged 6 commits intotrunkfrom
update/normalize-videopress-edit-details-header

CGastrell commented Mar 17, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

jp-launch-control bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

vianasw commented Mar 18, 2026

Uh oh!

simison commented Mar 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

CGastrell commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Changes

Other information

Related product discussion/links

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

Testing instructions

JITM testing (optional)

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

vianasw commented Mar 18, 2026

Uh oh!

simison commented Mar 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CGastrell commented Mar 17, 2026 •

edited

Loading

github-actions bot commented Mar 17, 2026 •

edited

Loading

github-actions bot commented Mar 17, 2026 •

edited

Loading

jp-launch-control bot commented Mar 17, 2026 •

edited

Loading