Normalize page tabs onto shared minimal variant#48964
Conversation
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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:
If you have questions about anything, reach out in #jetpack-developers for guidance! Protect 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. |
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Code Coverage SummaryThis 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. 🤷 |
Migrate all page-level Tabs.List usages in Jetpack admin pages onto <Tabs.List variant="minimal"> + the shared .jp-admin-page-tabs--minimal wrapper modifier shipped in #48908. Delete the local SCSS blocks that were re-implementing what the new shared modifier now provides, plus the legacy default-variant alignment workarounds. - Scan / Newsletter / Search: were already variant="minimal" but each had a local SCSS block re-implementing the new shared modifier. - Protect / VideoPress: migrated from default to minimal variant. VideoPress had a 16-line workaround in DashboardLayout/style.scss specifically to hold default-variant tabs aligned with the page header — deleted, since minimal removes the need. - Newsletter also dropped its bespoke wrapper class jetpack-newsletter-page__tabs-row in favour of the shared jp-admin-page-tabs jp-admin-page-tabs--minimal. Refs #48160.
3bd9c1b to
61340f7
Compare
Verify the tabs normalization compiles cleanly against the 0.13 release. Bumps the five packages this PR touches: - packages/search (0.12.0 → 0.13.0) - packages/scan (0.11.0 → 0.13.0) - packages/newsletter (0.11.0 → 0.13.0) - packages/videopress (0.11.0 → 0.13.0) - plugins/protect (0.11.0 → 0.13.0) Plus the per-route package.json files under scan, newsletter, and videopress. Other Jetpack projects remain on 0.11.0 — the monorepo-wide bump is the scope of the foundation PR #48404 (in flight).
|
cc @dhasilva @kangzj @robertbpugh since you were dealing with VideoPress, Search and Podcast pages |
* Normalize page tabs onto shared minimal variant Migrate all page-level Tabs.List usages in Jetpack admin pages onto <Tabs.List variant="minimal"> + the shared .jp-admin-page-tabs--minimal wrapper modifier shipped in #48908. Delete the local SCSS blocks that were re-implementing what the new shared modifier now provides, plus the legacy default-variant alignment workarounds. - Scan / Newsletter / Search: were already variant="minimal" but each had a local SCSS block re-implementing the new shared modifier. - Protect / VideoPress: migrated from default to minimal variant. VideoPress had a 16-line workaround in DashboardLayout/style.scss specifically to hold default-variant tabs aligned with the page header — deleted, since minimal removes the need. - Newsletter also dropped its bespoke wrapper class jetpack-newsletter-page__tabs-row in favour of the shared jp-admin-page-tabs jp-admin-page-tabs--minimal. Refs #48160. * Bump @wordpress/ui to 0.13.0 across affected packages Verify the tabs normalization compiles cleanly against the 0.13 release. Bumps the five packages this PR touches: - packages/search (0.12.0 → 0.13.0) - packages/scan (0.11.0 → 0.13.0) - packages/newsletter (0.11.0 → 0.13.0) - packages/videopress (0.11.0 → 0.13.0) - plugins/protect (0.11.0 → 0.13.0) Plus the per-route package.json files under scan, newsletter, and videopress. Other Jetpack projects remain on 0.11.0 — the monorepo-wide bump is the scope of the foundation PR #48404 (in flight).
Fixes #48160
Proposed changes
Normalize all page-level
<Tabs.List>usages in Jetpack admin pages onto<Tabs.List variant="minimal">+ the shared.jp-admin-page-tabs--minimalwrapper modifier shipped in #48908. Delete the local SCSS blocks that were re-implementing what the new shared modifier now provides, plus the legacy default-variant alignment workarounds.variant="minimal"but each had a local SCSS block re-implementing what the new shared modifier does — local blocks deleted.DashboardLayout/style.scssspecifically to hold default-variant tabs aligned with the page header — deleted, since minimal removes the need entirely.jetpack-newsletter-page__tabs-rowin favour of the sharedjp-admin-page-tabs jp-admin-page-tabs--minimal.Diff stat: +27 / -77 lines (13 files, 5 of them changelog entries).
Related product discussion/links
.jp-admin-page-tabs--minimalinadmin-page-layout.scss.Does this pull request change what data or activity we track or use?
No.
Testing instructions
pnpm jetpack build packages/search packages/scan packages/newsletter packages/videopress plugins/protect), open the affected admin pages and confirm the page-level tab strip renders with the minimal variant (text-only labels, no rounded pill, tabs flush with the page title's start edge):rsm_jetpack_ui_modernization_newsletterfilter)rsm_jetpack_ui_modernization_videopressfilter)rsm_jetpack_ui_modernization_scanfilter)width: fit-contentvia the shared wrapper).Biggest visual deltas expected on Protect and VideoPress (both migrating default → minimal variant).
Out of scope (intentionally)
The following are not migrated in this PR — flagging so reviewers know what's deliberately excluded:
projects/plugins/jetpack/_inc/client/components/settings-nav-tabs/index.jsx— legacy settings page doesn't use AdminPage / the shared mixin yet. Waiting on PoC try: Reimplement Jetpack settings with @wordpress/ui (PoC, do not merge) #48181.variant="minimal"consumers in Forms + the Newsletter add-subscribers-modal — they don't sit at the page-header edge, so wrapper alignment isn't needed.projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx— separate slice (double-logo fix), tracked in a parallel PR.Screenshots
Before/after captures for the 4 visible admin pages (and Scan, captured with the modernization filter toggled locally). All shots at 1440×900.