Automattic · CGastrell · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/newsletter/_inc/components/newsletter-page.scss b/projects/packages/newsletter/_inc/components/newsletter-page.scss
@@ -57,29 +57,6 @@ body.jetpack_page_jetpack-newsletter {
 		}
 	}
 
-	// Tabs row: sticks at the top of the body wrapper (which itself starts
-	// directly below the sticky page header), so the bar stays in view while
-	// the panel content scrolls underneath. The wrapper carries the
-	// full-width separator + inline padding while the nested `Tabs.List`
-	// keeps its native `width: fit-content` so the animated active-tab
-	// indicator slides smoothly between tabs.
-	// The selector mirrors admin-ui's
-	// `.admin-ui-page > :not(.admin-ui-page__header):not(.jetpack-footer) > *`
-	// rule so the `flex: 0 0 auto` here outweighs the `flex: 1 1 auto`
-	// admin-ui sprays across body-wrapper children. Without that boost the
-	// tabs row collapses to ~24px and the tab buttons clip out of view.
-	.admin-ui-page > :not(.admin-ui-page__header):not(.jetpack-footer) > .jetpack-newsletter-page__tabs-row {
-		background: var(--wpds-color-bg-surface-neutral-strong, #fff);
-		border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #e0e0e0);
-		box-sizing: border-box;
-		flex: 0 0 auto;
-		padding-inline: $jetpack-newsletter-inset;
-		position: sticky;
-		top: 0;
-		width: 100%;
-		z-index: 9;
-	}
-
 	.jetpack-newsletter-page__content--padded {
 		padding: $jetpack-newsletter-inset;
 	}

diff --git a/projects/packages/newsletter/_inc/components/newsletter-page.tsx b/projects/packages/newsletter/_inc/components/newsletter-page.tsx
@@ -123,10 +123,7 @@ export default function NewsletterPage( {
 		>
 			{ subscribersEnabled ? (
 				<Tabs.Root value={ activeTab } onValueChange={ onTabChange }>
-					{ /* Wrapper carries the full-width bottom border. The Tabs.List
-					     inside keeps its native `width: fit-content` so the
-					     animated active-tab indicator slides smoothly. */ }
-					<div className="jetpack-newsletter-page__tabs-row">
+					<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
 						<Tabs.List variant="minimal">
 							<Tabs.Tab value="subscribers">{ __( 'Subscribers', 'jetpack-newsletter' ) }</Tabs.Tab>
 							<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-newsletter' ) }</Tabs.Tab>

diff --git a/projects/packages/newsletter/changelog/normalize-tabs-minimal-variant b/projects/packages/newsletter/changelog/normalize-tabs-minimal-variant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Newsletter: Normalize page tabs onto shared minimal variant + jp-admin-page-tabs--minimal wrapper modifier; drop bespoke jetpack-newsletter-page__tabs-row class. Bump @wordpress/ui to 0.13.0.
diff --git a/projects/packages/newsletter/package.json b/projects/packages/newsletter/package.json
@@ -61,7 +61,7 @@
 		"@wordpress/primitives": "4.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0",
 		"debug": "4.4.3"
 	},

diff --git a/projects/packages/newsletter/routes/dashboard/package.json b/projects/packages/newsletter/routes/dashboard/package.json
@@ -23,7 +23,7 @@
 		"@wordpress/notices": "5.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0"
 	},
 	"route": {

diff --git a/projects/packages/scan/_inc/components/scan-page.tsx b/projects/packages/scan/_inc/components/scan-page.tsx
@@ -55,7 +55,7 @@ export default function ScanPage( { activeTab, children }: Props ): JSX.Element
 			actions={ headerActions }
 		>
 			<Tabs.Root value={ activeTab } onValueChange={ onTabChange }>
-				<div className="jp-admin-page-tabs">
+				<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
 					<Tabs.List variant="minimal">
 						<Tabs.Tab value="active">{ __( 'Active threats', 'jetpack-scan-page' ) }</Tabs.Tab>
 						<Tabs.Tab value="history">{ __( 'History', 'jetpack-scan-page' ) }</Tabs.Tab>

diff --git a/projects/packages/scan/changelog/normalize-tabs-minimal-variant b/projects/packages/scan/changelog/normalize-tabs-minimal-variant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Scan: Normalize page tabs onto shared minimal variant + jp-admin-page-tabs--minimal wrapper modifier. Bump @wordpress/ui to 0.13.0.
diff --git a/projects/packages/scan/package.json b/projects/packages/scan/package.json
@@ -57,7 +57,7 @@
 		"@wordpress/notices": "5.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0"
 	},
 	"devDependencies": {

diff --git a/projects/packages/scan/routes/index/package.json b/projects/packages/scan/routes/index/package.json
@@ -22,7 +22,7 @@
 		"@wordpress/notices": "5.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.13.0"
 	},
 	"route": {
 		"path": "/",

diff --git a/projects/packages/search/changelog/normalize-tabs-minimal-variant b/projects/packages/search/changelog/normalize-tabs-minimal-variant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Search: Normalize page tabs onto shared minimal variant + jp-admin-page-tabs--minimal wrapper modifier. Bump @wordpress/ui to 0.13.0.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
@@ -64,7 +64,7 @@
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/interactivity": "6.44.0",
 		"@wordpress/server-side-render": "6.20.0",
-		"@wordpress/ui": "0.12.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0",
 		"@wordpress/viewport": "6.44.0",
 		"clsx": "2.1.1",

diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx
@@ -206,7 +206,7 @@ export default function DashboardPage( { isLoading = false } ) {
 					handleLocalNoticeDismissClick={ handleLocalNoticeDismissClick }
 				/>
 				<Tabs.Root value={ activeTab } onValueChange={ handleTabChange }>
-					<div className="jp-admin-page-tabs">
+					<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
 						<Tabs.List variant="minimal">
 							<Tabs.Tab value="plan-usage">{ __( 'Plan & Usage', 'jetpack-search-pkg' ) }</Tabs.Tab>
 							<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-search-pkg' ) }</Tabs.Tab>

diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss b/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss
@@ -1,33 +1,6 @@
 @use "scss/variables";
 @use "scss/rna-styles";
 
-// Body-scoped to beat the `body.jetpack_page_jetpack-search`-prefixed rules
-// from `@automattic/jetpack-base-styles/admin-page-layout` on specificity.
-body.jetpack_page_jetpack-search .jp-search-dashboard-page {
-	// Make `<Tabs.Tab>` actually use its design token. `@wordpress/ui` declares
-	// `font-size: var(--wpds-typography-font-size-md)` inside `@layer
-	// wp-ui-components`, but wp-admin core ships an unlayered
-	// `button { font-size: inherit }` reset that wins over any layered rule —
-	// so the tab silently inherits 16px from its surrounding context instead
-	// of the 13px the token specifies. Re-applying the token from an
-	// unlayered selector lets the design system land as intended (tab text
-	// smaller than the 15px page title — visual hierarchy restored).
-	.jp-admin-page-tabs [role="tab"] {
-		font-size: var(--wpds-typography-font-size-md, 13px);
-	}
-
-	// Align the first tab's content edge with the page header's start.
-	// admin-ui's page header sits at padding-inline 2xl (24px). The shared
-	// `.jp-admin-page-tabs` wrapper adds only 8px (designed for the default
-	// <Tabs.Tab> which ships with padding-inline lg = 16px, so 8 + 16 = 24
-	// matches the header). With `variant="minimal"`, <Tabs.Tab> has 0 inline
-	// padding, so the wrapper has to provide the full 2xl itself to keep
-	// the first tab flush with the header content edge across all widths.
-	.jp-admin-page-tabs {
-		padding-inline: var(--wpds-dimension-padding-2xl, 24px);
-	}
-}
-
 #jp-search-dashboard {
 	color: variables.$black;
 	font-size: 16px;

diff --git a/projects/packages/videopress/changelog/normalize-tabs-minimal-variant b/projects/packages/videopress/changelog/normalize-tabs-minimal-variant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+VideoPress: Migrate dashboard tabs from default to minimal variant; align via shared jp-admin-page-tabs--minimal wrapper modifier. Bump @wordpress/ui to 0.13.0.
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
@@ -60,7 +60,7 @@
 		"@wordpress/notices": "5.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.3",

diff --git a/projects/packages/videopress/routes/library/package.json b/projects/packages/videopress/routes/library/package.json
@@ -10,7 +10,7 @@
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/route": "0.10.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.13.0"
 	},
 	"route": {
 		"path": "/library",

diff --git a/projects/packages/videopress/routes/overview/package.json b/projects/packages/videopress/routes/overview/package.json
@@ -14,7 +14,7 @@
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0"
 	},
 	"route": {

diff --git a/projects/packages/videopress/routes/settings/package.json b/projects/packages/videopress/routes/settings/package.json
@@ -9,7 +9,7 @@
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/route": "0.10.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.13.0"
 	},
 	"route": {
 		"path": "/settings",

diff --git a/projects/packages/videopress/routes/video/package.json b/projects/packages/videopress/routes/video/package.json
@@ -13,7 +13,7 @@
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/route": "0.10.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.13.0"
 	},
 	"route": {
 		"path": "/video/$id",

diff --git a/projects/packages/videopress/src/dashboard/components/DashboardLayout/style.scss b/projects/packages/videopress/src/dashboard/components/DashboardLayout/style.scss
@@ -25,21 +25,4 @@ body.jetpack_page_jetpack-videopress {
 		}
 	}
 
-	// Match the design-system default-variant Tabs (Storybook reference).
-	// We pair `<Tabs.List>` (no variant) with the canonical 16px per-tab inline
-	// padding — `admin-page-layout` would otherwise bump it to 24px to line the
-	// first tab up with the page-title edge. To keep that alignment, offset the
-	// tablist itself by the missing 8px so the first tab's text still starts at
-	// the page-header inline padding (8px tablist + 16px tab = 24px). The
-	// hairline lives on `.jp-admin-page-tabs` and still spans the full width.
-	.jp-admin-page-tabs {
-
-		[role="tablist"] {
-			padding-inline-start: 8px;
-		}
-
-		[role="tab"] {
-			padding-inline: var(--wpds-dimension-padding-lg);
-		}
-	}
 }
diff --git a/projects/packages/videopress/src/dashboard/components/DashboardTabs/index.tsx b/projects/packages/videopress/src/dashboard/components/DashboardTabs/index.tsx
@@ -22,8 +22,8 @@ export const TAB_PATHS: Record< DashboardTab, string > = {
  */
 export default function DashboardTabs() {
 	return (
-		<div className="jp-admin-page-tabs">
-			<Tabs.List>
+		<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
+			<Tabs.List variant="minimal">
 				<Tabs.Tab value="overview">{ __( 'Overview', 'jetpack-videopress-pkg' ) }</Tabs.Tab>
 				<Tabs.Tab value="library">{ __( 'Library', 'jetpack-videopress-pkg' ) }</Tabs.Tab>
 				<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-videopress-pkg' ) }</Tabs.Tab>

diff --git a/projects/plugins/protect/changelog/normalize-tabs-minimal-variant b/projects/plugins/protect/changelog/normalize-tabs-minimal-variant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Protect: Migrate page tabs from default to minimal variant; align via shared jp-admin-page-tabs--minimal wrapper modifier. Bump @wordpress/ui to 0.13.0.
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
@@ -40,7 +40,7 @@
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/icons": "12.2.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.44.0",
 		"camelize": "1.0.1",
 		"clsx": "2.1.1",

diff --git a/projects/plugins/protect/src/js/components/protect-app/index.jsx b/projects/plugins/protect/src/js/components/protect-app/index.jsx
@@ -94,8 +94,8 @@ const ProtectApp = () => {
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Tabs.Root ref={ tabsRootRef } value={ activeTab } onValueChange={ onValueChange }>
-				<div className="jp-admin-page-tabs">
-					<Tabs.List>
+				<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
+					<Tabs.List variant="minimal">
 						<Tabs.Tab value="scan">{ scanLabel }</Tabs.Tab>
 						<Tabs.Tab value="firewall">{ __( 'Firewall', 'jetpack-protect' ) }</Tabs.Tab>
 						<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-protect' ) }</Tabs.Tab>