From 48e023114c9092fe1e904ebc926f0a76bf2b7bcb Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 01:26:45 -0300
Subject: [PATCH 01/13] Add AdminHeader component to jetpack-components for
 unified admin page headers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-header/index.tsx         | 41 ++++++++++++++
 .../components/admin-header/style.module.scss | 53 +++++++++++++++++++
 .../components/admin-header/types.ts          | 33 ++++++++++++
 projects/js-packages/components/index.ts      |  1 +
 4 files changed, 128 insertions(+)
 create mode 100644 projects/js-packages/components/components/admin-header/index.tsx
 create mode 100644 projects/js-packages/components/components/admin-header/style.module.scss
 create mode 100644 projects/js-packages/components/components/admin-header/types.ts

diff --git a/projects/js-packages/components/components/admin-header/index.tsx b/projects/js-packages/components/components/admin-header/index.tsx
new file mode 100644
index 000000000000..b578c433da13
--- /dev/null
+++ b/projects/js-packages/components/components/admin-header/index.tsx
@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import styles from './style.module.scss';
+import type { AdminHeaderProps } from './types.ts';
+import type { FC } from 'react';
+
+/**
+ * Unified admin page header component.
+ *
+ * Renders a sticky header with logo, product title, optional tagline,
+ * actions, and tabs. Follows the `@wordpress/admin-ui` Page header pattern.
+ *
+ * @param {AdminHeaderProps} props - Component properties.
+ * @return {ReactNode} AdminHeader component.
+ */
+const AdminHeader: FC< AdminHeaderProps > = ( {
+	logo,
+	title,
+	tagline,
+	actions,
+	tabs,
+	className,
+} ) => {
+	return (
+		<header className={ clsx( styles[ 'admin-header' ], className ) }>
+			<div className={ styles[ 'admin-header__title-row' ] }>
+				<div className={ styles[ 'admin-header__title' ] }>
+					<span className={ styles[ 'admin-header__logo' ] }>
+						{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
+					</span>
+					<h1 className={ styles[ 'admin-header__product-name' ] }>{ title }</h1>
+				</div>
+				{ actions && <div className={ styles[ 'admin-header__actions' ] }>{ actions }</div> }
+			</div>
+			{ tagline && <p className={ styles[ 'admin-header__tagline' ] }>{ tagline }</p> }
+			{ tabs }
+		</header>
+	);
+};
+
+export default AdminHeader;
diff --git a/projects/js-packages/components/components/admin-header/style.module.scss b/projects/js-packages/components/components/admin-header/style.module.scss
new file mode 100644
index 000000000000..6cff7b2b9bf7
--- /dev/null
+++ b/projects/js-packages/components/components/admin-header/style.module.scss
@@ -0,0 +1,53 @@
+.admin-header {
+	padding: 16px 24px;
+	border-bottom: 1px solid #e0e0e0;
+	background: #fff;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+.admin-header__title-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.admin-header__title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0; // allow truncation
+}
+
+.admin-header__logo {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.admin-header__product-name {
+	font-size: 15px;
+	font-weight: 500;
+	line-height: 32px;
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.admin-header__tagline {
+	margin: 4px 0 0;
+	font-size: 13px;
+	line-height: 1.4;
+	color: #757575;
+}
+
+.admin-header__actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
diff --git a/projects/js-packages/components/components/admin-header/types.ts b/projects/js-packages/components/components/admin-header/types.ts
new file mode 100644
index 000000000000..8fe76df341f2
--- /dev/null
+++ b/projects/js-packages/components/components/admin-header/types.ts
@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export type AdminHeaderProps = {
+	/**
+	 * Custom logo element. Defaults to JetpackLogo icon (bolt only).
+	 */
+	logo?: ReactNode;
+
+	/**
+	 * Product title displayed next to the logo.
+	 */
+	title: string;
+
+	/**
+	 * Optional tagline displayed below the title row.
+	 */
+	tagline?: string;
+
+	/**
+	 * Optional action elements (buttons, links) displayed on the right side of the header.
+	 */
+	actions?: ReactNode;
+
+	/**
+	 * Optional tab navigation displayed below the title/tagline.
+	 */
+	tabs?: ReactNode;
+
+	/**
+	 * Additional CSS class name.
+	 */
+	className?: string;
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 5b2df114305e..9c9946a12b4e 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -34,6 +34,7 @@ export { default as NumberSlider } from './components/number-slider/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';
+export { default as AdminHeader } from './components/admin-header/index.tsx';
 export { default as DecorativeCard } from './components/decorative-card/index.tsx';
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';

From a9c29d9259e998d106bc0ef162f651ba83425d1a Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 01:26:54 -0300
Subject: [PATCH 02/13] Add unified header props to AdminPage with
 backward-compatible legacy fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-page/index.tsx           | 54 ++++++++++++-------
 .../components/components/admin-page/types.ts | 29 +++++++++-
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index c543af519dc6..5745de92ec18 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -2,6 +2,7 @@ import restApi from '@automattic/jetpack-api';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
+import AdminHeader from '../admin-header/index.tsx';
 import JetpackFooter from '../jetpack-footer/index.tsx';
 import JetpackLogo from '../jetpack-logo/index.tsx';
 import Col from '../layout/col/index.tsx';
@@ -32,6 +33,11 @@ const AdminPage: FC< AdminPageProps > = ( {
 	apiNonce = '',
 	optionalMenuItems,
 	header,
+	title,
+	tagline,
+	logo,
+	actions,
+	tabs,
 } ) => {
 	useEffect( () => {
 		restApi.setApiRoot( apiRoot );
@@ -62,25 +68,35 @@ const AdminPage: FC< AdminPageProps > = ( {
 
 	return (
 		<div className={ rootClassName }>
-			{ showHeader && (
-				<Container horizontalSpacing={ 5 }>
-					<Col className={ clsx( styles[ 'admin-page-header' ], 'jp-admin-page-header' ) }>
-						{ header ? header : <JetpackLogo /> }
-						{ sandboxedDomain && (
-							<code
-								className={ styles[ 'sandbox-domain-badge' ] }
-								onClick={ testConnection }
-								onKeyDown={ testConnection }
-								// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-								role="button"
-								tabIndex={ 0 }
-								title={ `Sandboxing via ${ sandboxedDomain }. Click to test connection.` }
-							>
-								API Sandboxed
-							</code>
-						) }
-					</Col>
-				</Container>
+			{ showHeader && title ? (
+				<AdminHeader
+					logo={ logo }
+					title={ title }
+					tagline={ tagline }
+					actions={ actions }
+					tabs={ tabs }
+				/>
+			) : (
+				showHeader && (
+					<Container horizontalSpacing={ 5 }>
+						<Col className={ clsx( styles[ 'admin-page-header' ], 'jp-admin-page-header' ) }>
+							{ header ? header : <JetpackLogo /> }
+							{ sandboxedDomain && (
+								<code
+									className={ styles[ 'sandbox-domain-badge' ] }
+									onClick={ testConnection }
+									onKeyDown={ testConnection }
+									// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+									role="button"
+									tabIndex={ 0 }
+									title={ `Sandboxing via ${ sandboxedDomain }. Click to test connection.` }
+								>
+									API Sandboxed
+								</code>
+							) }
+						</Col>
+					</Container>
+				)
 			) }
 			<Container fluid horizontalSpacing={ 0 }>
 				<Col>{ children }</Col>
diff --git a/projects/js-packages/components/components/admin-page/types.ts b/projects/js-packages/components/components/admin-page/types.ts
index 7e9e6ad59bf3..9d7219dec823 100644
--- a/projects/js-packages/components/components/admin-page/types.ts
+++ b/projects/js-packages/components/components/admin-page/types.ts
@@ -18,10 +18,37 @@ export type AdminPageProps = {
 	showHeader?: boolean;
 
 	/**
-	 * Custom header. Optional
+	 * Custom header. Optional.
+	 * @deprecated Use `title` and `tagline` props instead for the unified header.
 	 */
 	header?: ReactNode;
 
+	/**
+	 * Product title displayed in the unified header (e.g. "Social", "Backup").
+	 * When provided, renders the new AdminHeader instead of the legacy header slot.
+	 */
+	title?: string;
+
+	/**
+	 * Optional tagline displayed below the title in the unified header.
+	 */
+	tagline?: string;
+
+	/**
+	 * Custom logo element for the unified header. Defaults to JetpackLogo icon.
+	 */
+	logo?: ReactNode;
+
+	/**
+	 * Action elements displayed on the right side of the unified header.
+	 */
+	actions?: ReactNode;
+
+	/**
+	 * Tab navigation displayed below the title/tagline in the unified header.
+	 */
+	tabs?: ReactNode;
+
 	/**
 	 * Whether or not to display the Footer
 	 */

From 3a0292618a4f8d74718304606c4a2f9754d0a3aa Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 01:27:02 -0300
Subject: [PATCH 03/13] Migrate publicize admin page to use unified AdminHeader
 via title prop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../_inc/components/admin-page/index.tsx      | 26 +++++++--
 .../admin-page/test/page-header.test.jsx      | 58 -------------------
 2 files changed, 22 insertions(+), 62 deletions(-)
 delete mode 100644 projects/packages/publicize/_inc/components/admin-page/test/page-header.test.jsx

diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx
index c10b78feb15b..ca15dae8a312 100644
--- a/projects/packages/publicize/_inc/components/admin-page/index.tsx
+++ b/projects/packages/publicize/_inc/components/admin-page/index.tsx
@@ -8,6 +8,7 @@ import {
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import {
+	getMyJetpackUrl,
 	isJetpackSelfHostedSite,
 	isSimpleSite,
 	siteHasFeature,
@@ -15,13 +16,13 @@ import {
 } from '@automattic/jetpack-script-data';
 import { shouldUseInternalLinks } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { createInterpolateElement, useState, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { store as socialStore } from '../../social-store';
 import { features, getSocialScriptData, hasSocialPaidFeatures } from '../../utils';
 import ConnectionScreen from './connection-screen';
 import Header from './header';
 import InfoSection from './info-section';
-import AdminPageHeader from './page-header';
 import './styles.module.scss';
 import PricingPage from './pricing-page';
 import SupportSection from './support-section';
@@ -65,7 +66,8 @@ export const SocialAdminPage = () => {
 		return (
 			<AdminPage
 				moduleName={ moduleName }
-				showHeader={ false }
+				title={ __( 'Social', 'jetpack-publicize-pkg' ) }
+				showHeader={ true }
 				showBackground={ false }
 				useInternalLinks={ shouldUseInternalLinks() }
 			>
@@ -78,10 +80,26 @@ export const SocialAdminPage = () => {
 		);
 	}
 
+	const licenseAction =
+		! hasSocialPaidFeatures() && isJetpackSite
+			? createInterpolateElement(
+					__(
+						'Already have an existing plan or license key? <a>Click here to get started</a>',
+						'jetpack-publicize-pkg'
+					),
+					{
+						a: <a href={ getMyJetpackUrl( '#/add-license' ) } />,
+					}
+			  )
+			: null;
+
 	return (
 		<AdminPage
 			moduleName={ moduleName }
-			header={ <AdminPageHeader /> }
+			title={ __( 'Social', 'jetpack-publicize-pkg' ) }
+			// should we add a tagline? Page seems already crowded
+			// tagline={ __( 'Share your posts with your social media network.', 'jetpack-publicize-pkg' ) }
+			actions={ licenseAction }
 			showFooter={ isJetpackSite }
 			useInternalLinks={ shouldUseInternalLinks() }
 		>
diff --git a/projects/packages/publicize/_inc/components/admin-page/test/page-header.test.jsx b/projects/packages/publicize/_inc/components/admin-page/test/page-header.test.jsx
deleted file mode 100644
index f74f6e861369..000000000000
--- a/projects/packages/publicize/_inc/components/admin-page/test/page-header.test.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { clearMockedScriptData, mockScriptData } from '../../../utils/test-utils';
-import AdminPageHeader from '../page-header';
-
-describe( 'AdminPageHeader', () => {
-	beforeEach( () => {
-		mockScriptData();
-	} );
-
-	afterEach( () => {
-		clearMockedScriptData();
-	} );
-	it( 'should show license text when no paid features and is Jetpack site', () => {
-		render( <AdminPageHeader /> );
-		expect(
-			screen.getByText( /Already have an existing plan or license key\?/i )
-		).toBeInTheDocument();
-		expect( screen.getByRole( 'link' ) ).toHaveAttribute(
-			'href',
-			expect.stringContaining( 'admin.php?page=my-jetpack#/add-license' )
-		);
-	} );
-
-	it( 'should not show license text when has paid features', () => {
-		mockScriptData( {
-			site: {
-				plan: {
-					features: {
-						active: [ 'social-enhanced-publishing' ],
-					},
-				},
-			},
-		} );
-		render( <AdminPageHeader /> );
-		expect(
-			screen.queryByText( /Already have an existing plan or license key\?/i )
-		).not.toBeInTheDocument();
-		clearMockedScriptData();
-	} );
-
-	it( 'should not show license text when not a Jetpack site', () => {
-		mockScriptData( {
-			site: {
-				host: 'wpcom',
-				plan: {
-					features: {
-						active: [ 'social-enhanced-publishing' ],
-					},
-				},
-			},
-		} );
-		render( <AdminPageHeader /> );
-		expect(
-			screen.queryByText( /Already have an existing plan or license key\?/i )
-		).not.toBeInTheDocument();
-		clearMockedScriptData();
-	} );
-} );

From d4664258bb70b5af63dc43e8dd8279ed186a0821 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 01:32:32 -0300
Subject: [PATCH 04/13] Refactor AdminHeader to use VStack/HStack/Heading
 matching @wordpress/admin-ui pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-header/index.tsx         | 50 +++++++++++++------
 .../components/admin-header/style.module.scss | 45 ++---------------
 .../components/admin-header/types.ts          | 14 +++++-
 3 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/projects/js-packages/components/components/admin-header/index.tsx b/projects/js-packages/components/components/admin-header/index.tsx
index b578c433da13..346904ff5bf2 100644
--- a/projects/js-packages/components/components/admin-header/index.tsx
+++ b/projects/js-packages/components/components/admin-header/index.tsx
@@ -1,3 +1,8 @@
+import {
+	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
 import clsx from 'clsx';
 import JetpackLogo from '../jetpack-logo/index.tsx';
 import styles from './style.module.scss';
@@ -7,7 +12,7 @@ import type { FC } from 'react';
 /**
  * Unified admin page header component.
  *
- * Renders a sticky header with logo, product title, optional tagline,
+ * Renders a sticky header with logo, product title, optional subtitle,
  * actions, and tabs. Follows the `@wordpress/admin-ui` Page header pattern.
  *
  * @param {AdminHeaderProps} props - Component properties.
@@ -16,25 +21,40 @@ import type { FC } from 'react';
 const AdminHeader: FC< AdminHeaderProps > = ( {
 	logo,
 	title,
-	tagline,
+	subTitle,
 	actions,
-	tabs,
+	tabs = null,
 	className,
+	breadcrumbs = null,
+	badges = null,
 } ) => {
+	const classes = clsx( styles[ 'admin-header' ], className );
 	return (
-		<header className={ clsx( styles[ 'admin-header' ], className ) }>
-			<div className={ styles[ 'admin-header__title-row' ] }>
-				<div className={ styles[ 'admin-header__title' ] }>
-					<span className={ styles[ 'admin-header__logo' ] }>
-						{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
-					</span>
-					<h1 className={ styles[ 'admin-header__product-name' ] }>{ title }</h1>
-				</div>
-				{ actions && <div className={ styles[ 'admin-header__actions' ] }>{ actions }</div> }
-			</div>
-			{ tagline && <p className={ styles[ 'admin-header__tagline' ] }>{ tagline }</p> }
+		<VStack className={ classes } as="header">
+			<HStack justify="space-between" spacing={ 2 }>
+				<HStack spacing={ 2 } justify="left">
+					{ title && (
+						<HStack spacing={ 2 } justify="left">
+							{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
+							<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+								{ title }
+							</Heading>
+						</HStack>
+					) }
+					{ breadcrumbs }
+					{ badges }
+				</HStack>
+				<HStack
+					style={ { width: 'auto', flexShrink: 0 } }
+					spacing={ 2 }
+					className="admin-ui-page__header-actions"
+				>
+					{ actions }
+				</HStack>
+			</HStack>
+			{ subTitle && <p className={ styles[ 'admin-header-subtitle' ] }>{ subTitle }</p> }
 			{ tabs }
-		</header>
+		</VStack>
 	);
 };
 
diff --git a/projects/js-packages/components/components/admin-header/style.module.scss b/projects/js-packages/components/components/admin-header/style.module.scss
index 6cff7b2b9bf7..57710993684f 100644
--- a/projects/js-packages/components/components/admin-header/style.module.scss
+++ b/projects/js-packages/components/components/admin-header/style.module.scss
@@ -7,47 +7,10 @@
 	z-index: 1;
 }
 
-.admin-header__title-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.admin-header__title {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0; // allow truncation
-}
-
-.admin-header__logo {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-}
-
-.admin-header__product-name {
-	font-size: 15px;
-	font-weight: 500;
-	line-height: 32px;
-	margin: 0;
-	padding: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.admin-header__tagline {
-	margin: 4px 0 0;
+.admin-header .admin-header-subtitle {
+	padding-block-end: 8px;
+	color: #757575;
 	font-size: 13px;
 	line-height: 1.4;
-	color: #757575;
-}
-
-.admin-header__actions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
+	margin: 0;
 }
diff --git a/projects/js-packages/components/components/admin-header/types.ts b/projects/js-packages/components/components/admin-header/types.ts
index 8fe76df341f2..cd2940a4b5b8 100644
--- a/projects/js-packages/components/components/admin-header/types.ts
+++ b/projects/js-packages/components/components/admin-header/types.ts
@@ -12,9 +12,19 @@ export type AdminHeaderProps = {
 	title: string;
 
 	/**
-	 * Optional tagline displayed below the title row.
+	 * Optional subtitle displayed below the title row.
 	 */
-	tagline?: string;
+	subTitle?: string;
+
+	/**
+	 * Optional breadcrumb elements displayed next to the title.
+	 */
+	breadcrumbs?: ReactNode;
+
+	/**
+	 * Optional badge elements displayed next to the title.
+	 */
+	badges?: ReactNode;
 
 	/**
 	 * Optional action elements (buttons, links) displayed on the right side of the header.

From 26e75cd45a9ce7daff508de84793b24121519efe Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 01:32:40 -0300
Subject: [PATCH 05/13] Rename tagline prop to subTitle across AdminPage and
 publicize for admin-ui alignment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../js-packages/components/components/admin-page/index.tsx    | 4 ++--
 .../js-packages/components/components/admin-page/types.ts     | 2 +-
 .../packages/publicize/_inc/components/admin-page/index.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index 5745de92ec18..d0bad43689b2 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -34,7 +34,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 	optionalMenuItems,
 	header,
 	title,
-	tagline,
+	subTitle,
 	logo,
 	actions,
 	tabs,
@@ -72,7 +72,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 				<AdminHeader
 					logo={ logo }
 					title={ title }
-					tagline={ tagline }
+					subTitle={ subTitle }
 					actions={ actions }
 					tabs={ tabs }
 				/>
diff --git a/projects/js-packages/components/components/admin-page/types.ts b/projects/js-packages/components/components/admin-page/types.ts
index 9d7219dec823..a93767c9e63c 100644
--- a/projects/js-packages/components/components/admin-page/types.ts
+++ b/projects/js-packages/components/components/admin-page/types.ts
@@ -32,7 +32,7 @@ export type AdminPageProps = {
 	/**
 	 * Optional tagline displayed below the title in the unified header.
 	 */
-	tagline?: string;
+	subTitle?: string;
 
 	/**
 	 * Custom logo element for the unified header. Defaults to JetpackLogo icon.
diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx
index ca15dae8a312..c692bc892416 100644
--- a/projects/packages/publicize/_inc/components/admin-page/index.tsx
+++ b/projects/packages/publicize/_inc/components/admin-page/index.tsx
@@ -97,8 +97,8 @@ export const SocialAdminPage = () => {
 		<AdminPage
 			moduleName={ moduleName }
 			title={ __( 'Social', 'jetpack-publicize-pkg' ) }
-			// should we add a tagline? Page seems already crowded
-			// tagline={ __( 'Share your posts with your social media network.', 'jetpack-publicize-pkg' ) }
+			// should we add a subTitle? Page seems already crowded
+			// subTitle={ __( 'Share your posts with your social media network.', 'jetpack-publicize-pkg' ) }
 			actions={ licenseAction }
 			showFooter={ isJetpackSite }
 			useInternalLinks={ shouldUseInternalLinks() }

From e44672a1bd2e427eb222964adf345d5b4390e476 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 02:08:28 -0300
Subject: [PATCH 06/13] Add @wordpress/admin-ui dependency to
 jetpack-components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 pnpm-lock.yaml                               | 3 +++
 projects/js-packages/components/package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9db70934e007..6320b407a48e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -536,6 +536,9 @@ importers:
       '@babel/runtime':
         specifier: ^7
         version: 7.28.6
+      '@wordpress/admin-ui':
+        specifier: 1.8.0
+        version: 1.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/browserslist-config':
         specifier: 6.40.0
         version: 6.40.0
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index a349d5d31e40..1713f5b0eeb3 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -53,6 +53,7 @@
 		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/number-formatters": "workspace:*",
 		"@babel/runtime": "^7",
+		"@wordpress/admin-ui": "1.8.0",
 		"@wordpress/browserslist-config": "6.40.0",
 		"@wordpress/components": "32.2.0",
 		"@wordpress/compose": "7.40.0",

From 9c6bbaccbc5a89256521b5ac30551515cc29e374 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 02:08:51 -0300
Subject: [PATCH 07/13] Refactor AdminHeader to wrap @wordpress/admin-ui Page
 component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-header/index.tsx         | 53 +++++++++----------
 .../components/admin-header/style.module.scss |  3 +-
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/projects/js-packages/components/components/admin-header/index.tsx b/projects/js-packages/components/components/admin-header/index.tsx
index 346904ff5bf2..e896d011b636 100644
--- a/projects/js-packages/components/components/admin-header/index.tsx
+++ b/projects/js-packages/components/components/admin-header/index.tsx
@@ -1,7 +1,7 @@
+import { Page } from '@wordpress/admin-ui';
 import {
-	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import clsx from 'clsx';
 import JetpackLogo from '../jetpack-logo/index.tsx';
@@ -13,7 +13,7 @@ import type { FC } from 'react';
  * Unified admin page header component.
  *
  * Renders a sticky header with logo, product title, optional subtitle,
- * actions, and tabs. Follows the `@wordpress/admin-ui` Page header pattern.
+ * actions, and tabs. Wraps the `@wordpress/admin-ui` Page component.
  *
  * @param {AdminHeaderProps} props - Component properties.
  * @return {ReactNode} AdminHeader component.
@@ -29,32 +29,31 @@ const AdminHeader: FC< AdminHeaderProps > = ( {
 	badges = null,
 } ) => {
 	const classes = clsx( styles[ 'admin-header' ], className );
+
+	// While admin-ui Page has a title prop, it fails to render both the logo and
+	// text. Internally it tries to accommodate both inside Heading.
+	// Composing here with Heading as it is on admin-ui Page.
+	const composedTitle = title ? (
+		<HStack spacing={ 2 } justify="left">
+			{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
+			<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+				{ title }
+			</Heading>
+		</HStack>
+	) : undefined;
+
 	return (
-		<VStack className={ classes } as="header">
-			<HStack justify="space-between" spacing={ 2 }>
-				<HStack spacing={ 2 } justify="left">
-					{ title && (
-						<HStack spacing={ 2 } justify="left">
-							{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
-							<Heading as="h2" level={ 3 } weight={ 500 } truncate>
-								{ title }
-							</Heading>
-						</HStack>
-					) }
-					{ breadcrumbs }
-					{ badges }
-				</HStack>
-				<HStack
-					style={ { width: 'auto', flexShrink: 0 } }
-					spacing={ 2 }
-					className="admin-ui-page__header-actions"
-				>
-					{ actions }
-				</HStack>
-			</HStack>
-			{ subTitle && <p className={ styles[ 'admin-header-subtitle' ] }>{ subTitle }</p> }
+		<Page
+			className={ classes }
+			title={ composedTitle }
+			subTitle={ subTitle }
+			actions={ actions }
+			breadcrumbs={ breadcrumbs }
+			badges={ badges }
+			showSidebarToggle={ false }
+		>
 			{ tabs }
-		</VStack>
+		</Page>
 	);
 };
 
diff --git a/projects/js-packages/components/components/admin-header/style.module.scss b/projects/js-packages/components/components/admin-header/style.module.scss
index 57710993684f..d57162ee328d 100644
--- a/projects/js-packages/components/components/admin-header/style.module.scss
+++ b/projects/js-packages/components/components/admin-header/style.module.scss
@@ -7,7 +7,8 @@
 	z-index: 1;
 }
 
-.admin-header .admin-header-subtitle {
+/* stylelint-disable-next-line selector-class-pattern */
+.admin-header :global(.admin-ui-page__header-subtitle) {
 	padding-block-end: 8px;
 	color: #757575;
 	font-size: 13px;

From 3ed2b64cbefcf3650024e87696c0921dbd142a33 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 02:10:42 -0300
Subject: [PATCH 08/13] Remove unused AdminHeader style.module.scss, styles
 come from admin-ui.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-header/index.tsx           |  4 +---
 .../components/admin-header/style.module.scss   | 17 -----------------
 2 files changed, 1 insertion(+), 20 deletions(-)
 delete mode 100644 projects/js-packages/components/components/admin-header/style.module.scss

diff --git a/projects/js-packages/components/components/admin-header/index.tsx b/projects/js-packages/components/components/admin-header/index.tsx
index e896d011b636..a6a763e5eac7 100644
--- a/projects/js-packages/components/components/admin-header/index.tsx
+++ b/projects/js-packages/components/components/admin-header/index.tsx
@@ -3,9 +3,7 @@ import {
 	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
-import clsx from 'clsx';
 import JetpackLogo from '../jetpack-logo/index.tsx';
-import styles from './style.module.scss';
 import type { AdminHeaderProps } from './types.ts';
 import type { FC } from 'react';
 
@@ -28,7 +26,7 @@ const AdminHeader: FC< AdminHeaderProps > = ( {
 	breadcrumbs = null,
 	badges = null,
 } ) => {
-	const classes = clsx( styles[ 'admin-header' ], className );
+	const classes = className;
 
 	// While admin-ui Page has a title prop, it fails to render both the logo and
 	// text. Internally it tries to accommodate both inside Heading.
diff --git a/projects/js-packages/components/components/admin-header/style.module.scss b/projects/js-packages/components/components/admin-header/style.module.scss
deleted file mode 100644
index d57162ee328d..000000000000
--- a/projects/js-packages/components/components/admin-header/style.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.admin-header {
-	padding: 16px 24px;
-	border-bottom: 1px solid #e0e0e0;
-	background: #fff;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.admin-header :global(.admin-ui-page__header-subtitle) {
-	padding-block-end: 8px;
-	color: #757575;
-	font-size: 13px;
-	line-height: 1.4;
-	margin: 0;
-}

From 4c1729485b582eb7c3c726d0fdb78d4e731dcdf9 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 02:10:52 -0300
Subject: [PATCH 09/13] Delete unused publicize AdminPageHeader, replaced by
 unified AdminHeader.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../admin-page/page-header/index.jsx          | 34 -------------------
 .../components/admin-page/page-header/logo.js | 22 ------------
 .../admin-page/page-header/styles.module.scss | 10 ------
 3 files changed, 66 deletions(-)
 delete mode 100644 projects/packages/publicize/_inc/components/admin-page/page-header/index.jsx
 delete mode 100644 projects/packages/publicize/_inc/components/admin-page/page-header/logo.js
 delete mode 100644 projects/packages/publicize/_inc/components/admin-page/page-header/styles.module.scss

diff --git a/projects/packages/publicize/_inc/components/admin-page/page-header/index.jsx b/projects/packages/publicize/_inc/components/admin-page/page-header/index.jsx
deleted file mode 100644
index bbeb0c2ae4f2..000000000000
--- a/projects/packages/publicize/_inc/components/admin-page/page-header/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { getMyJetpackUrl, isJetpackSelfHostedSite } from '@automattic/jetpack-script-data';
-import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { hasSocialPaidFeatures } from '../../../utils';
-import Logo from './logo';
-import styles from './styles.module.scss';
-
-const AdminPageHeader = () => {
-	const isJetpackSite = isJetpackSelfHostedSite();
-
-	return (
-		<div className={ styles.header }>
-			<span className={ styles.logo }>
-				<Logo />
-			</span>
-
-			{ ! hasSocialPaidFeatures() && isJetpackSite && (
-				<p>
-					{ createInterpolateElement(
-						__(
-							'Already have an existing plan or license key? <a>Click here to get started</a>',
-							'jetpack-publicize-pkg'
-						),
-						{
-							a: <a href={ getMyJetpackUrl( '#/add-license' ) } />,
-						}
-					) }
-				</p>
-			) }
-		</div>
-	);
-};
-
-export default AdminPageHeader;
diff --git a/projects/packages/publicize/_inc/components/admin-page/page-header/logo.js b/projects/packages/publicize/_inc/components/admin-page/page-header/logo.js
deleted file mode 100644
index fa319c65f09a..000000000000
--- a/projects/packages/publicize/_inc/components/admin-page/page-header/logo.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const Logo = ( { height = 40 } ) => (
-	<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 40" height={ height }>
-		<path
-			d="M157.947 12.986c0 .569.115 1.041.347 1.417.231.367.54.67.925.912.396.24.849.438 1.36.593.52.154 1.06.298 1.619.433.753.183 1.49.386 2.213.608.733.221 1.384.53 1.953.925a4.352 4.352 0 0 1 1.373 1.519c.357.627.536 1.432.536 2.415 0 1.003-.188 1.87-.564 2.603a4.878 4.878 0 0 1-1.548 1.793c-.656.463-1.441.805-2.357 1.027-.916.232-1.919.347-3.008.347-.502 0-1.017-.033-1.548-.1-.52-.059-1.022-.14-1.504-.247a11.65 11.65 0 0 1-1.287-.361 4.923 4.923 0 0 1-.911-.405V24.31c.347.174.738.333 1.171.477.434.145.883.27 1.345.376.463.097.931.174 1.403.232.473.057.916.086 1.331.086.675 0 1.316-.058 1.923-.173a5.033 5.033 0 0 0 1.62-.579c.463-.27.829-.636 1.099-1.099.27-.472.405-1.06.405-1.764 0-.579-.121-1.056-.362-1.432a2.777 2.777 0 0 0-.94-.925 5.43 5.43 0 0 0-1.374-.608 27.818 27.818 0 0 0-1.619-.434 39.125 39.125 0 0 1-2.213-.578 7.22 7.22 0 0 1-1.923-.911 4.478 4.478 0 0 1-1.36-1.49c-.337-.607-.506-1.383-.506-2.328 0-.984.173-1.827.521-2.531a4.906 4.906 0 0 1 1.417-1.765 6.006 6.006 0 0 1 2.097-1.026 9.545 9.545 0 0 1 2.56-.333c1.031 0 1.991.101 2.878.304a13.37 13.37 0 0 1 2.458.766v2.184a16.7 16.7 0 0 0-2.487-.824 11.733 11.733 0 0 0-2.734-.333c-.732 0-1.369.082-1.909.246-.54.154-.988.38-1.345.68-.356.289-.621.646-.795 1.07-.174.414-.26.877-.26 1.388ZM181.965 20.362c0-.849-.106-1.6-.319-2.256-.202-.666-.491-1.225-.867-1.678a3.516 3.516 0 0 0-1.316-1.041 3.883 3.883 0 0 0-1.678-.362c-.607 0-1.167.12-1.677.362a3.635 3.635 0 0 0-1.331 1.041c-.366.453-.656 1.012-.868 1.678-.202.655-.303 1.407-.303 2.256 0 .839.101 1.59.303 2.256.212.655.506 1.21.882 1.663.376.453.82.8 1.331 1.041.511.232 1.07.347 1.678.347.607 0 1.161-.115 1.663-.347a3.72 3.72 0 0 0 1.316-1.041c.376-.453.665-1.008.867-1.663.213-.665.319-1.417.319-2.256Zm2.342 0c0 1.08-.154 2.063-.462 2.95-.309.887-.748 1.649-1.316 2.285a5.781 5.781 0 0 1-2.039 1.46c-.801.348-1.697.521-2.69.521-1.022 0-1.938-.173-2.748-.52a5.921 5.921 0 0 1-2.054-1.461c-.559-.636-.988-1.398-1.287-2.285-.299-.887-.448-1.87-.448-2.95 0-1.09.154-2.078.463-2.965.308-.887.742-1.649 1.301-2.285a5.826 5.826 0 0 1 2.054-1.475c.81-.347 1.711-.52 2.704-.52 1.012 0 1.924.173 2.733.52a5.66 5.66 0 0 1 2.054 1.475c.559.636.988 1.398 1.287 2.285.299.887.448 1.875.448 2.965ZM193.603 13.116c.665 0 1.302.073 1.909.217.608.135 1.128.328 1.562.579v1.865a12.518 12.518 0 0 0-1.678-.52 7.045 7.045 0 0 0-1.561-.174c-.56 0-1.114.092-1.664.275a3.823 3.823 0 0 0-1.475.911c-.434.415-.786.969-1.055 1.663-.261.685-.391 1.538-.391 2.56 0 .742.096 1.427.289 2.054.203.626.497 1.171.882 1.634.396.453.887.81 1.476 1.07.588.25 1.267.376 2.039.376.559 0 1.123-.058 1.692-.174a10.074 10.074 0 0 0 1.663-.52v1.865a3.898 3.898 0 0 1-.651.29c-.26.096-.549.178-.868.245a7.877 7.877 0 0 1-1.012.174 7.981 7.981 0 0 1-1.07.072c-.926 0-1.803-.14-2.632-.419a5.89 5.89 0 0 1-2.155-1.287c-.617-.579-1.104-1.311-1.461-2.198-.356-.887-.535-1.938-.535-3.153 0-.906.092-1.721.275-2.444.193-.723.453-1.36.781-1.91a5.928 5.928 0 0 1 1.142-1.402 6.524 6.524 0 0 1 1.403-.94 6.15 6.15 0 0 1 1.548-.535 7.253 7.253 0 0 1 1.547-.174ZM200.686 27.217v-13.74h2.242v13.74h-2.242Zm-.058-16.935V7.78h2.358v2.502h-2.358ZM215.318 25.698h-.058a4.682 4.682 0 0 1-.694.694 5.502 5.502 0 0 1-.969.608 6.271 6.271 0 0 1-1.2.42 5.84 5.84 0 0 1-1.389.158 5.354 5.354 0 0 1-1.836-.303 4.042 4.042 0 0 1-1.432-.854 4.057 4.057 0 0 1-.926-1.402c-.221-.55-.332-1.172-.332-1.866 0-.685.12-1.297.361-1.837.251-.54.598-.998 1.042-1.374a4.68 4.68 0 0 1 1.59-.867 6.704 6.704 0 0 1 2.069-.304c.713.01 1.373.072 1.981.188.607.116 1.147.26 1.62.434h.057v-.955a6.15 6.15 0 0 0-.072-.997 2.541 2.541 0 0 0-.246-.767c-.25-.463-.65-.844-1.2-1.143-.55-.308-1.292-.462-2.227-.462-.694 0-1.35.067-1.967.202-.607.125-1.215.304-1.822.535v-1.88c.231-.116.501-.222.81-.318.318-.106.65-.193.997-.26a9.388 9.388 0 0 1 1.1-.174c.385-.038.771-.058 1.157-.058 1.388 0 2.521.246 3.398.738.887.492 1.523 1.142 1.909 1.952.145.309.246.651.304 1.027.067.366.101.771.101 1.215v9.169h-1.88l-.246-1.519Zm-.116-4.512a17.448 17.448 0 0 0-1.475-.332 11.13 11.13 0 0 0-1.88-.174c-.954 0-1.701.202-2.241.607-.54.405-.81 1.027-.81 1.866 0 .424.067.795.202 1.114.135.318.318.583.55.795.241.202.52.357.839.463.327.096.675.144 1.041.144.482 0 .93-.067 1.345-.202a5.82 5.82 0 0 0 1.099-.506c.328-.193.603-.386.824-.579.232-.193.4-.342.506-.448v-2.748ZM221.794 27.217V6.276h2.241v20.94h-2.241Z"
-			fill="#000"
-		/>
-		<path
-			d="M20 40c11.047 0 20.002-8.955 20.002-20C40.002 8.952 31.047 0 20 0 8.955 0 0 8.955 0 20c0 11.047 8.955 20 20 20Z"
-			fill="#069E08"
-		/>
-		<path
-			d="M20.993 16.642V36.03l10-19.39h-10ZM18.97 23.321V3.97L9.008 23.321h9.962Z"
-			fill="#fff"
-		/>
-		<path
-			d="M51.642 33.206c-.574-.878-1.107-1.755-1.642-2.595 2.825-1.718 3.779-3.09 3.779-5.687v-15h-3.32V7.061h7.061v17.1c0 4.35-1.259 6.793-5.879 9.044ZM81.223 22.978c0 1.45 1.031 1.602 1.719 1.602.687 0 1.68-.23 2.442-.457v2.671c-1.07.344-2.176.61-3.703.61-1.832 0-3.97-.686-3.97-3.893v-7.863h-1.945v-2.71h1.946V8.93h3.511v4.008h4.427v2.71h-4.427v7.329ZM88.552 34.542V12.9h3.359v1.298c1.336-1.031 2.825-1.68 4.657-1.68 3.168 0 5.687 2.214 5.687 6.985 0 4.734-2.747 7.863-7.29 7.863-1.106 0-1.985-.152-2.901-.343v7.48h-3.512v.04ZM95.65 15.42c-1.031 0-2.328.496-3.55 1.565v7.367c.762.153 1.565.267 2.633.267 2.48 0 3.894-1.566 3.894-4.848 0-3.015-1.031-4.351-2.977-4.351ZM116.071 27.061h-3.282v-1.565h-.077c-1.145.878-2.558 1.832-4.657 1.832-1.832 0-3.817-1.336-3.817-4.047 0-3.625 3.091-4.313 5.267-4.618l3.091-.419v-.419c0-1.91-.763-2.52-2.558-2.52-.878 0-2.938.267-4.618.954l-.305-2.824c1.527-.535 3.626-.915 5.382-.915 3.435 0 5.649 1.374 5.649 5.458v9.083h-.075Zm-3.512-6.602-2.902.457c-.878.114-1.793.649-1.793 1.946 0 1.145.649 1.794 1.602 1.794 1.031 0 2.138-.61 3.091-1.298v-2.9h.002ZM130.575 26.604c-1.45.496-2.747.8-4.39.8-5.267 0-7.367-3.015-7.367-7.403 0-4.618 2.902-7.481 7.595-7.481 1.755 0 2.825.305 4.008.687v2.977c-1.031-.382-2.519-.801-3.969-.801-2.138 0-3.97 1.145-3.97 4.427 0 3.626 1.832 4.733 4.161 4.733 1.106 0 2.328-.23 3.969-.878v2.939h-.037ZM137.216 19.008c.306-.343.535-.687 4.962-6.07h4.58l-5.726 6.72 6.259 7.442h-4.58l-5.458-6.719V27.1h-3.51V7.062h3.512v11.946h-.039ZM73.13 26.603c-1.831.574-3.397.802-5.229.802-4.504 0-7.29-2.252-7.29-7.52 0-3.855 2.367-7.367 6.908-7.367 4.504 0 6.07 3.13 6.07 6.107 0 .992-.078 1.527-.115 2.099h-9.083c.077 3.09 1.832 3.816 4.465 3.816 1.45 0 2.748-.343 4.238-.878v2.939h.037v.002Zm-3.204-8.206c0-1.718-.573-3.207-2.443-3.207-1.755 0-2.824 1.259-3.054 3.207h5.497Z"
-			fill="#000"
-		/>
-	</svg>
-);
-
-export default Logo;
diff --git a/projects/packages/publicize/_inc/components/admin-page/page-header/styles.module.scss b/projects/packages/publicize/_inc/components/admin-page/page-header/styles.module.scss
deleted file mode 100644
index 05a64bb759a4..000000000000
--- a/projects/packages/publicize/_inc/components/admin-page/page-header/styles.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.header {
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	gap: calc(var(--horizontal-spacing) * 3);
-
-	.logo {
-		flex-shrink: 0;
-	}
-}

From 8f91ee2cc6bf2d25a4479898b0dee5d2563a8a06 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 02:17:49 -0300
Subject: [PATCH 10/13] Add changelog entries for jetpack-components and
 publicize.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/changelog/update-normalize-admin-page-headers  | 4 ++++
 .../publicize/changelog/update-normalize-admin-page-headers   | 4 ++++
 2 files changed, 8 insertions(+)
 create mode 100644 projects/js-packages/components/changelog/update-normalize-admin-page-headers
 create mode 100644 projects/packages/publicize/changelog/update-normalize-admin-page-headers

diff --git a/projects/js-packages/components/changelog/update-normalize-admin-page-headers b/projects/js-packages/components/changelog/update-normalize-admin-page-headers
new file mode 100644
index 000000000000..ad02bc7be2d0
--- /dev/null
+++ b/projects/js-packages/components/changelog/update-normalize-admin-page-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add AdminHeader component wrapping @wordpress/admin-ui Page for unified admin page headers.
diff --git a/projects/packages/publicize/changelog/update-normalize-admin-page-headers b/projects/packages/publicize/changelog/update-normalize-admin-page-headers
new file mode 100644
index 000000000000..179dd8abc914
--- /dev/null
+++ b/projects/packages/publicize/changelog/update-normalize-admin-page-headers
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Migrate admin page header to use unified AdminHeader component.

From b6aa07230a6ff65bfe2dbc225fe2d8a89a262b7f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 11:22:20 -0300
Subject: [PATCH 11/13] Address review feedback: fix deprecated prop name,
 export types, remove redundant props and comments.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 projects/js-packages/components/components/admin-page/types.ts | 2 +-
 projects/js-packages/components/index.ts                       | 1 +
 .../packages/publicize/_inc/components/admin-page/index.tsx    | 3 ---
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/projects/js-packages/components/components/admin-page/types.ts b/projects/js-packages/components/components/admin-page/types.ts
index a93767c9e63c..bec390ae496d 100644
--- a/projects/js-packages/components/components/admin-page/types.ts
+++ b/projects/js-packages/components/components/admin-page/types.ts
@@ -19,7 +19,7 @@ export type AdminPageProps = {
 
 	/**
 	 * Custom header. Optional.
-	 * @deprecated Use `title` and `tagline` props instead for the unified header.
+	 * @deprecated Use `title` and `subTitle` props instead for the unified header.
 	 */
 	header?: ReactNode;
 
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 9c9946a12b4e..7dc51e617bbc 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -35,6 +35,7 @@ export { default as AdminSection } from './components/admin-section/basic/index.
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';
 export { default as AdminHeader } from './components/admin-header/index.tsx';
+export type { AdminHeaderProps } from './components/admin-header/types.ts';
 export { default as DecorativeCard } from './components/decorative-card/index.tsx';
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx
index c692bc892416..cbe11e9f27c3 100644
--- a/projects/packages/publicize/_inc/components/admin-page/index.tsx
+++ b/projects/packages/publicize/_inc/components/admin-page/index.tsx
@@ -67,7 +67,6 @@ export const SocialAdminPage = () => {
 			<AdminPage
 				moduleName={ moduleName }
 				title={ __( 'Social', 'jetpack-publicize-pkg' ) }
-				showHeader={ true }
 				showBackground={ false }
 				useInternalLinks={ shouldUseInternalLinks() }
 			>
@@ -97,8 +96,6 @@ export const SocialAdminPage = () => {
 		<AdminPage
 			moduleName={ moduleName }
 			title={ __( 'Social', 'jetpack-publicize-pkg' ) }
-			// should we add a subTitle? Page seems already crowded
-			// subTitle={ __( 'Share your posts with your social media network.', 'jetpack-publicize-pkg' ) }
 			actions={ licenseAction }
 			showFooter={ isJetpackSite }
 			useInternalLinks={ shouldUseInternalLinks() }

From 04f321ed13e7d7c9ebb618510fdcd1ad0c5422a9 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 12:37:18 -0300
Subject: [PATCH 12/13] add subtitle as in design MVP

---
 .../packages/publicize/_inc/components/admin-page/index.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx
index cbe11e9f27c3..b0ef6e2d3ca1 100644
--- a/projects/packages/publicize/_inc/components/admin-page/index.tsx
+++ b/projects/packages/publicize/_inc/components/admin-page/index.tsx
@@ -67,6 +67,7 @@ export const SocialAdminPage = () => {
 			<AdminPage
 				moduleName={ moduleName }
 				title={ __( 'Social', 'jetpack-publicize-pkg' ) }
+				subTitle={ __( 'Publish once. Share everywhere.', 'jetpack-publicize-pkg' ) }
 				showBackground={ false }
 				useInternalLinks={ shouldUseInternalLinks() }
 			>
@@ -96,6 +97,7 @@ export const SocialAdminPage = () => {
 		<AdminPage
 			moduleName={ moduleName }
 			title={ __( 'Social', 'jetpack-publicize-pkg' ) }
+			subTitle={ __( 'Publish once. Share everywhere.', 'jetpack-publicize-pkg' ) }
 			actions={ licenseAction }
 			showFooter={ isJetpackSite }
 			useInternalLinks={ shouldUseInternalLinks() }

From 2985c115f5c18e1299296a5f218c566a09b6498c Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 25 Feb 2026 15:44:57 -0300
Subject: [PATCH 13/13] Bundle @wordpress/admin-ui CSS via proxy file to avoid
 DependencyExtractionPlugin externalization.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin-header/admin-ui-styles.css           | 8 ++++++++
 .../components/components/admin-header/index.tsx          | 1 +
 .../js-packages/components/tools/copy-scss-to-build.mjs   | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/components/components/admin-header/admin-ui-styles.css

diff --git a/projects/js-packages/components/components/admin-header/admin-ui-styles.css b/projects/js-packages/components/components/admin-header/admin-ui-styles.css
new file mode 100644
index 000000000000..b9b1bf26cef7
--- /dev/null
+++ b/projects/js-packages/components/components/admin-header/admin-ui-styles.css
@@ -0,0 +1,8 @@
+/* Proxy file to import @wordpress/admin-ui styles.
+ *
+ * Importing the CSS via @import inside a .css file avoids the
+ * @wordpress/dependency-extraction-webpack-plugin externalization that
+ * breaks direct JS `import '@wordpress/admin-ui/build-style/style.css'`.
+ * css-loader resolves @import independently of the externals plugin.
+ */
+@import "@wordpress/admin-ui/build-style/style.css";
diff --git a/projects/js-packages/components/components/admin-header/index.tsx b/projects/js-packages/components/components/admin-header/index.tsx
index a6a763e5eac7..516729064504 100644
--- a/projects/js-packages/components/components/admin-header/index.tsx
+++ b/projects/js-packages/components/components/admin-header/index.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@wordpress/admin-ui';
+import './admin-ui-styles.css';
 import {
 	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
diff --git a/projects/js-packages/components/tools/copy-scss-to-build.mjs b/projects/js-packages/components/tools/copy-scss-to-build.mjs
index f2622ba37f5b..505e73b64612 100644
--- a/projects/js-packages/components/tools/copy-scss-to-build.mjs
+++ b/projects/js-packages/components/tools/copy-scss-to-build.mjs
@@ -50,7 +50,7 @@ async function main() {
 		return;
 	}
 
-	for await ( const filePath of fs.glob( '**/*.scss', {
+	for await ( const filePath of fs.glob( '**/*.{scss,css}', {
 		cwd: packageRoot,
 		exclude: Array.from( IGNORED_DIRS, dir => `**/${ dir }/**` ),
 	} ) ) {