From 80409d2930e3e5e0672ecedb50aa3e4679a95be4 Mon Sep 17 00:00:00 2001
From: Filipe Varela <filipe@automattic.com>
Date: Thu, 14 May 2026 16:45:48 +0100
Subject: [PATCH 01/11] Social: modernize Add-account modal +
 connected-accounts onto WPDS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Round out PR 2's chassis Overview card and the legacy/chassis-shared
Add-account modal so they share one disclosure-row visual language:

- `ServiceItem` (modal) and `ConnectionInfo` (Overview) collapse onto a
  single flat-row `Collapsible.Trigger` with a CSS-rotate chevron — each
  list now lives inside a single `Card.Root` with edge-to-edge dividers
  between rows. Inline Connect / Reconnect / Disconnect controls keep
  their click handlers via a narrow `stopPropagation` wrapper.
- Custom Mastodon/Bluesky inputs swap raw `<input>`/`<label>` pairs for
  `__experimentalInputControl`. Manage-modal footer text uses WPDS `Text`
  with `body-sm`; the MarkAsShared info tooltip and the modal-context
  one move from `IconTooltip` to WPDS `Tooltip` (z-index bumped above
  the Modal portal so the popup is visible).
- `Tooltip.Provider delay={0}` mounted at the chassis page and the
  modal so every info-icon tooltip in Social opens immediately.
- New `size="medium"` variant on `ConnectionIcon` (32×32 avatar +
  16×16 service icon) for the chassis Overview rows; default `small`
  preserves existing call sites.
- `Disconnect` button → `size="compact" tone="neutral"`; in-row Connect
  button → `size="compact"` so it sits flush against the row height.
- Handle text drops to neutral foreground (`tone="neutral"` on
  `<Link>`), 14px / 500 weight, with the network name beneath in
  `--wpds-color-fg-content-neutral-weak`.
- SCSS pass replaces hard-coded gaps / paddings / focus widths with
  `--wpds-dimension-*`, `--wpds-typography-*`, and
  `--wpds-color-fg-content-neutral-weak` tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../_inc/components/connection-icon/index.tsx |   7 +
 .../connection-icon/styles.module.scss        |  52 +++--
 .../connection-management/connection-info.tsx | 105 ++++++----
 .../connection-management/connection-name.tsx |   7 +-
 .../connection-management/disconnect.tsx      |   3 +-
 .../connection-management/style.module.scss   | 186 ++++++++++------
 .../manage-connections-modal/index.tsx        |  93 ++++----
 .../_inc/components/overview-tab/index.tsx    |  14 +-
 .../_inc/components/overview-tab/style.scss   |  25 +++
 .../_inc/components/services/connect-form.tsx |   1 +
 .../components/services/custom-inputs.tsx     | 127 +++++------
 .../services/service-connection-info.tsx      |  42 +++-
 .../_inc/components/services/service-item.tsx |  68 +++---
 .../components/services/services-list.tsx     |  25 ++-
 .../components/services/style.module.scss     | 198 ++++++++++--------
 .../publicize/_inc/components/social-page.tsx |  46 ++--
 .../update-social-modernization-modal-wpds    |   4 +
 .../update-social-modernization-modal-wpds    |   3 +
 .../update-social-modernization-modal-wpds    |   4 +
 19 files changed, 619 insertions(+), 391 deletions(-)
 create mode 100644 projects/packages/publicize/changelog/update-social-modernization-modal-wpds
 create mode 100644 projects/plugins/jetpack/changelog/update-social-modernization-modal-wpds
 create mode 100644 projects/plugins/social/changelog/update-social-modernization-modal-wpds

diff --git a/projects/packages/publicize/_inc/components/connection-icon/index.tsx b/projects/packages/publicize/_inc/components/connection-icon/index.tsx
index 451da6654ed6..f51d8bcbff62 100644
--- a/projects/packages/publicize/_inc/components/connection-icon/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-icon/index.tsx
@@ -27,6 +27,11 @@ export type ConnectionIconProps = {
 	profilePicture: string;
 	disabled?: boolean;
 	className?: string;
+	// Visual size of the avatar + overlapping service icon. `small` (default)
+	// is 28×28 avatar + 14×14 service icon for compact rows / dataviews;
+	// `medium` is 32×32 avatar + 16×16 service icon for roomier rows such as
+	// the chassis Overview "Connected accounts" list.
+	size?: 'small' | 'medium';
 };
 
 /**
@@ -40,6 +45,7 @@ export function ConnectionIcon( {
 	profilePicture,
 	disabled,
 	className,
+	size = 'small',
 }: ConnectionIconProps ) {
 	const [ imageErrorFor, setImageErrorFor ] = useState( null );
 
@@ -55,6 +61,7 @@ export function ConnectionIcon( {
 		<div
 			className={ clsx(
 				styles.wrapper,
+				styles[ size ],
 				{
 					[ styles.disabled ]: disabled,
 				},
diff --git a/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss b/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
index 8b5c7eabdba3..822dad1a6f6b 100644
--- a/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
+++ b/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
@@ -1,10 +1,8 @@
 .wrapper {
-	position: relative;
-	width: 28px;
-	height: 28px;
+	align-items: center;
 	display: flex;
 	justify-content: center;
-	align-items: center;
+	position: relative;
 
 	&.disabled {
 		opacity: 0.4;
@@ -12,20 +10,48 @@
 
 	img,
 	.avatar {
+		background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
 		border-radius: 50%;
-		border: 2px solid #fff;
-		background-color: #fff;
-		width: 24px;
-		height: 24px;
 	}
 
 	.social-icon {
-		position: absolute;
+		background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
+		border-radius: var(--wpds-border-radius-sm, 2px);
 		inset-block-end: 0;
 		inset-inline-end: 0;
-		width: 14px;
-		height: 14px;
-		border-radius: 2px;
-		background-color: #fff;
+		position: absolute;
+	}
+
+	&.small {
+		block-size: 28px;
+		inline-size: 28px;
+
+		img,
+		.avatar {
+			block-size: 24px;
+			border: 2px solid var(--wpds-color-bg-surface-neutral-strong, #fff);
+			inline-size: 24px;
+		}
+
+		.social-icon {
+			block-size: 14px;
+			inline-size: 14px;
+		}
+	}
+
+	&.medium {
+		block-size: 32px;
+		inline-size: 32px;
+
+		img,
+		.avatar {
+			block-size: 32px;
+			inline-size: 32px;
+		}
+
+		.social-icon {
+			block-size: 16px;
+			inline-size: 16px;
+		}
 	}
 }
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
index cd0f9059aa2c..ff8b80b31c2b 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
@@ -1,10 +1,9 @@
-import { IconTooltip, Text } from '@automattic/jetpack-components';
-import { Panel, PanelBody } from '@wordpress/components';
+import { Text } from '@automattic/jetpack-components';
 import { useSelect } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import { Button } from '@wordpress/ui';
-import { useReducer } from 'react';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronDown, info } from '@wordpress/icons';
+import { Collapsible, Tooltip } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import ConnectionIcon from '../connection-icon';
 import { XNotice } from '../services/x-notice';
@@ -14,11 +13,14 @@ import { ConnectionTemplateEditor } from './connection-template';
 import { Disconnect } from './disconnect';
 import { MarkAsShared } from './mark-as-shared';
 import styles from './style.module.scss';
+import type { SyntheticEvent } from 'react';
 
 type ConnectionInfoProps = ConnectionStatusProps & {
 	canMarkAsShared: boolean;
 };
 
+const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
+
 /**
  * Connection info component
  *
@@ -27,52 +29,81 @@ type ConnectionInfoProps = ConnectionStatusProps & {
  * @return React element
  */
 export function ConnectionInfo( { connection, service, canMarkAsShared }: ConnectionInfoProps ) {
-	const [ isPanelOpen, togglePanel ] = useReducer( state => ! state, false );
+	const [ isPanelOpen, setIsPanelOpen ] = useState( false );
+
+	const { canManageConnection, isUnsupported } = useSelect(
+		select => {
+			const { canUserManageConnection, getServicesBy } = select( socialStore );
 
-	const canManageConnection = useSelect(
-		select => select( socialStore ).canUserManageConnection( connection ),
+			return {
+				canManageConnection: canUserManageConnection( connection ),
+				isUnsupported: getServicesBy( 'status', 'unsupported' ).some(
+					( { id } ) => id === connection.service_name
+				),
+			};
+		},
 		[ connection ]
 	);
 
+	const hasStatus =
+		connection.status === 'broken' || connection.status === 'must_reauth' || isUnsupported;
+
+	const markAsSharedHelp = __(
+		'If enabled, the connection will be available to all administrators, editors, and authors.',
+		'jetpack-publicize-pkg'
+	);
+
 	return (
-		<>
-			<div className={ styles[ 'connection-item' ] }>
+		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
+			<Collapsible.Trigger
+				className={ styles[ 'connection-row' ] }
+				nativeButton={ false }
+				render={ <div /> }
+			>
 				<ConnectionIcon
 					serviceName={ connection.service_name }
 					label={ connection.display_name }
 					profilePicture={ connection.profile_picture }
+					size="medium"
 				/>
 				<div className={ styles[ 'connection-name-wrapper' ] }>
 					<div className={ styles[ 'connection-item-name' ] }>
 						<ConnectionName connection={ connection } />
 					</div>
-					<ConnectionStatus connection={ connection } service={ service } />
+					{ hasStatus ? (
+						<div
+							className={ styles[ 'connection-status-wrap' ] }
+							onClick={ stopPropagation }
+							onKeyDown={ stopPropagation }
+							role="presentation"
+						>
+							<ConnectionStatus connection={ connection } service={ service } />
+						</div>
+					) : (
+						<span className={ styles[ 'connection-network' ] }>{ service?.label }</span>
+					) }
 				</div>
-				<Button
-					size={ 'small' }
-					className={ styles[ 'learn-more' ] }
-					variant="minimal"
-					onClick={ togglePanel }
-					aria-label={
-						isPanelOpen
-							? __( 'Close panel', 'jetpack-publicize-pkg' )
-							: _x( 'Open panel', 'Accessibility label', 'jetpack-publicize-pkg' )
-					}
-				>
-					{ <Icon className={ styles.chevron } icon={ isPanelOpen ? chevronUp : chevronDown } /> }
-				</Button>
-			</div>
-			<Panel className={ styles[ 'connection-panel' ] }>
-				<PanelBody opened={ isPanelOpen } onToggle={ togglePanel }>
+				<Icon className={ styles.chevron } icon={ chevronDown } />
+			</Collapsible.Trigger>
+			<Collapsible.Panel className={ styles[ 'connection-panel' ] }>
+				<div className={ styles[ 'connection-panel-inner' ] }>
 					{ canMarkAsShared && (
 						<div className={ styles[ 'mark-shared-wrap' ] }>
 							<MarkAsShared connection={ connection } />
-							<IconTooltip>
-								{ __(
-									'If enabled, the connection will be available to all administrators, editors, and authors.',
-									'jetpack-publicize-pkg'
-								) }
-							</IconTooltip>
+							<Tooltip.Root>
+								<Tooltip.Trigger
+									render={
+										<button
+											type="button"
+											className={ styles[ 'mark-shared-help' ] }
+											aria-label={ markAsSharedHelp }
+										>
+											<Icon icon={ info } size={ 18 } />
+										</button>
+									}
+								/>
+								<Tooltip.Popup sideOffset={ 8 }>{ markAsSharedHelp }</Tooltip.Popup>
+							</Tooltip.Root>
 						</div>
 					) }
 					<div className={ styles[ 'connection-template-wrap' ] }>
@@ -86,8 +117,8 @@ export function ConnectionInfo( { connection, service, canMarkAsShared }: Connec
 						</Text>
 					) }
 					{ service?.id === 'x' && <XNotice /> }
-				</PanelBody>
-			</Panel>
-		</>
+				</div>
+			</Collapsible.Panel>
+		</Collapsible.Root>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
index 4188ee85115f..3bd988fad2f1 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
@@ -30,7 +30,12 @@ export function ConnectionName( { connection }: ConnectionNameProps ) {
 			{ ! connection.profile_link ? (
 				<span className={ styles[ 'profile-link' ] }>{ connection.display_name }</span>
 			) : (
-				<Link openInNewTab className={ styles[ 'profile-link' ] } href={ connection.profile_link }>
+				<Link
+					openInNewTab
+					tone="neutral"
+					className={ styles[ 'profile-link' ] }
+					href={ connection.profile_link }
+				>
 					{ connection.display_name }
 				</Link>
 			) }
diff --git a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
index 004718654d52..b169dadf2cc2 100644
--- a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
@@ -94,7 +94,8 @@ export function Disconnect( { connection, variant = 'outline' }: DisconnectProps
 				</Link>
 			) : (
 				<Button
-					size="small"
+					size="compact"
+					tone="neutral"
 					variant={ variant }
 					onClick={ toggleConfirm }
 					disabled={ isDisconnecting }
diff --git a/projects/packages/publicize/_inc/components/connection-management/style.module.scss b/projects/packages/publicize/_inc/components/connection-management/style.module.scss
index 2b5b309ecb31..0a8fc58bf078 100644
--- a/projects/packages/publicize/_inc/components/connection-management/style.module.scss
+++ b/projects/packages/publicize/_inc/components/connection-management/style.module.scss
@@ -1,10 +1,10 @@
 .wrapper {
+	align-items: start;
 	display: flex;
 	flex-direction: column;
-	align-items: start;
-	gap: 1.5rem;
+	gap: var(--wpds-dimension-gap-xl, 24px);
+	padding-top: var(--wpds-dimension-padding-lg, 16px);
 	width: 100%;
-	padding-top: 1rem;
 
 	> h3 {
 		margin-block: 0;
@@ -12,8 +12,8 @@
 }
 
 .connection-name {
-	display: flex;
 	align-items: center;
+	display: flex;
 
 	:global(.components-spinner) {
 		margin-top: 0;
@@ -23,8 +23,6 @@
 	.profile-link:global(.components-external-link) {
 		color: inherit;
 		text-decoration: none;
-		font-size: 1rem;
-		font-weight: 400;
 
 		>svg {
 			vertical-align: bottom;
@@ -45,96 +43,154 @@
 }
 
 .confirmDialog span {
-	font-size: 15px;
+	font-size: var(--wpds-typography-font-size-lg, 15px);
 }
 
+.description {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: 0.875rem;
+}
 
-.mark-shared-wrap {
+.connection-list {
 	display: flex;
-	gap: 0.5rem;
+	flex-direction: column;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
 
-	border-top: 1px solid var(--jp-gray-5);
-	padding-top: 1rem;
+	*[inert="true"] {
+		opacity: 0.7;
+	}
 
-	margin-bottom: 1rem;
+	// Every row gets a top border so the first row also sits below a
+	// divider line that separates it from the surrounding Card.Header
+	// (or whatever chrome wraps the list).
+	.connection-list-item {
+		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
+		margin: 0;
+	}
 }
 
-.connection-template-wrap {
-	margin-bottom: 1.5rem;
+// Flat row that doubles as the Collapsible.Trigger. Click anywhere on the
+// row (outside of the name link / status actions) toggles the disclosure;
+// the chevron rotates 180° via `[data-panel-open]` set by Base UI.
+.connection-row {
+	align-items: center;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: flex;
+	gap: var(--wpds-dimension-gap-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+	width: 100%;
 
-	&:empty {
-		margin-bottom: 0;
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
 	}
 }
 
-.connection-panel.connection-panel {
-	border: 0;
-	margin-left: 3rem;
+.connection-name-wrapper {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-xs, 4px);
+	min-width: 0;
+}
 
-	:global(.components-panel__body) {
-		border-top: 0;
-		border-bottom: 0;
-		padding: 0;
-	}
+.connection-item-name {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: 0.875rem;
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+}
 
-	:global(.components-panel__body.is-opened) {
-		margin-top: 1rem;
-	}
+.connection-network {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+}
 
-	.description {
-		font-size: 14px;
-		color: var(--jp-gray-50);
+.connection-status-wrap {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-xs, 4px);
+}
+
+.chevron {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	flex-shrink: 0;
+	transition: rotate 0.15s ease-out;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
 	}
 }
 
-.connection-list {
-	outline: 1px solid var(--jp-gray-5);
-	border-radius: 4px;
-	margin: 0;
-	width: 100%;
+.connection-row[data-panel-open] {
 
-	*[inert="true"] {
-		opacity: 0.7;
+	.chevron {
+		rotate: 180deg;
 	}
+}
 
-	.connection-list-item {
-		margin-bottom: 0;
-		padding: 1rem;
+// Collapsible.Panel — collapses to height 0 with a smooth height transition.
+// `--collapsible-panel-height` is supplied by Base UI so we mirror what the
+// WPDS CollapsibleCard.Content rule does.
+.connection-panel {
+	height: var(--collapsible-panel-height);
+	overflow: hidden;
 
-		&:not(:last-child) {
-			border-bottom: 1px solid var(--jp-gray-5);
-		}
+	&[hidden]:not([hidden="until-found"]) {
+		display: none;
 	}
 
-	.connection-item {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
+	&[data-ending-style],
+	&[data-starting-style] {
+		height: 0;
 	}
 
-	.connection-item-name {
-		font-size: 1rem;
-		font-weight: 400;
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-out;
 	}
+}
+
+.connection-panel-inner {
+	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
+}
 
-	.learn-more {
+.mark-shared-wrap {
+	align-items: center;
+	display: flex;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+	padding-bottom: var(--wpds-dimension-padding-lg, 16px);
+}
 
-		&:global(.components-button) {
-			padding-inline: 6px;
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
+.mark-shared-help {
+	align-items: center;
+	background: transparent;
+	border: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	padding: 0;
+	width: 24px;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	}
 
-			span {
-				display: flex;
-			}
-		}
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: var(--wpds-border-width-focus, 2px);
 	}
 }
 
-.connection-name-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	flex: 1;
+.connection-template-wrap {
+	margin-bottom: var(--wpds-dimension-gap-xl, 24px);
+
+	&:empty {
+		margin-bottom: 0;
+	}
 }
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
index 582524c00db8..9c64a3d1b65c 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
@@ -1,14 +1,9 @@
-import {
-	getRedirectUrl,
-	Text,
-	ThemeProvider,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
+import { getRedirectUrl, ThemeProvider, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text, Tooltip } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store } from '../../social-store';
@@ -44,51 +39,49 @@ export const ManageConnectionsModal = () => {
 	const canMarkAsShared = useUserCanShareConnection();
 
 	return (
-		<Modal
-			className={ clsx( styles.modal, {
-				[ styles.small ]: isSmall,
-			} ) }
-			onRequestClose={ closeModal }
-			title={ title }
-		>
-			{
-				//Use IIFE to avoid nested ternary
-				( () => {
-					if ( hasKeyringResult ) {
+		<Tooltip.Provider delay={ 0 }>
+			<Modal
+				className={ clsx( styles.modal, {
+					[ styles.small ]: isSmall,
+				} ) }
+				onRequestClose={ closeModal }
+				title={ title }
+			>
+				{
+					//Use IIFE to avoid nested ternary
+					( () => {
+						if ( hasKeyringResult ) {
+							return (
+								<ConfirmationForm
+									keyringResult={ keyringResult }
+									onComplete={ closeModal }
+									canMarkAsShared={ canMarkAsShared }
+								/>
+							);
+						}
+
 						return (
-							<ConfirmationForm
-								keyringResult={ keyringResult }
-								onComplete={ closeModal }
-								canMarkAsShared={ canMarkAsShared }
-							/>
+							<>
+								<ServicesList />
+								<Text variant="body-sm" render={ <p className={ styles[ 'manual-share' ] } /> }>
+									{ __(
+										'Want to share to other networks? Use our Manual Sharing feature from the editor.',
+										'jetpack-publicize-pkg'
+									) }
+									&nbsp;
+									<Link
+										openInNewTab
+										href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
+									>
+										{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
+									</Link>
+								</Text>
+							</>
 						);
-					}
-
-					return (
-						<>
-							<ServicesList />
-							<div className={ styles[ 'manual-share' ] }>
-								<em>
-									<Text>
-										{ __(
-											`Want to share to other networks? Use our Manual Sharing feature from the editor.`,
-											'jetpack-publicize-pkg'
-										) }
-										&nbsp;
-										<Link
-											openInNewTab
-											href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
-										>
-											{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
-										</Link>
-									</Text>
-								</em>
-							</div>
-						</>
-					);
-				} )()
-			}
-		</Modal>
+					} )()
+				}
+			</Modal>
+		</Tooltip.Provider>
 	);
 };
 
diff --git a/projects/packages/publicize/_inc/components/overview-tab/index.tsx b/projects/packages/publicize/_inc/components/overview-tab/index.tsx
index cce24d2e7919..4251757c8e50 100644
--- a/projects/packages/publicize/_inc/components/overview-tab/index.tsx
+++ b/projects/packages/publicize/_inc/components/overview-tab/index.tsx
@@ -82,13 +82,21 @@ export default function OverviewTab(): JSX.Element {
 			{ ! hasConnections && <ThemedConnectionsModal /> }
 			<Card.Root>
 				{ hasConnections && (
-					<Card.Header>
+					<Card.Header className="jetpack-social-overview__accounts-card-header">
 						<Card.Title>{ __( 'Connected accounts', 'jetpack-publicize-pkg' ) }</Card.Title>
 					</Card.Header>
 				) }
-				<Card.Content>
+				<Card.Content
+					className={
+						hasConnections ? 'jetpack-social-overview__accounts-card-content' : undefined
+					}
+				>
 					{ hasConnections ? (
-						<ConnectionManagement hideConnectButton hideHeading />
+						<ConnectionManagement
+							hideConnectButton
+							hideHeading
+							className="jetpack-social-overview__connections-wrapper"
+						/>
 					) : (
 						<NoConnectionsEmptyState />
 					) }
diff --git a/projects/packages/publicize/_inc/components/overview-tab/style.scss b/projects/packages/publicize/_inc/components/overview-tab/style.scss
index 24d809ca8fa1..637bd1fb5b2e 100644
--- a/projects/packages/publicize/_inc/components/overview-tab/style.scss
+++ b/projects/packages/publicize/_inc/components/overview-tab/style.scss
@@ -32,3 +32,28 @@
 .jetpack-social-jitm-card:empty {
 	display: none;
 }
+
+// Tighten just the Card.Header's bottom padding so the divider sits
+// visually equidistant from the title text and the first row's content.
+// The 20px lands the divider symmetrically once the title's line-height
+// padding is accounted for — pure 16px reads as tighter above than below.
+// The top padding stays at Card.Header's default 24px so the title still
+// has comfortable headroom from the card edge.
+.jetpack-social-overview__accounts-card-header {
+	padding-block-end: var(--wpds-dimension-padding-xl, 20px);
+}
+
+// Strip the Card.Content padding when the body is the flat connections
+// list — the list rows own their own paddings and need to extend edge to
+// edge of the outer Card, with thin separators between them.
+.jetpack-social-overview__accounts-card-content {
+	padding: 0;
+}
+
+// ConnectionManagement's own `.wrapper` ships a `padding-top: 16px` that
+// makes sense for the standalone admin context but is double-padding
+// inside the chassis Card. Zero it here (doubled-class selector for a
+// safe specificity bump over the package-internal `.wrapper` rule).
+.jetpack-social-overview__connections-wrapper.jetpack-social-overview__connections-wrapper {
+	padding-top: 0;
+}
diff --git a/projects/packages/publicize/_inc/components/services/connect-form.tsx b/projects/packages/publicize/_inc/components/services/connect-form.tsx
index 94600acded6a..8e98ebaaa901 100644
--- a/projects/packages/publicize/_inc/components/services/connect-form.tsx
+++ b/projects/packages/publicize/_inc/components/services/connect-form.tsx
@@ -94,6 +94,7 @@ export function ConnectForm( {
 			<div className={ styles[ 'fields-wrapper' ] }>
 				<Button
 					variant={ hasConnections ? 'outline' : 'solid' }
+					size={ displayInputs ? 'default' : 'compact' }
 					type="submit"
 					disabled={ isFetchingServicesList }
 				>
diff --git a/projects/packages/publicize/_inc/components/services/custom-inputs.tsx b/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
index 7a081e5425bf..44dae765cf60 100644
--- a/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
+++ b/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
@@ -1,13 +1,15 @@
-import { Notice } from '@wordpress/components';
+import {
+	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	Notice,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { createInterpolateElement, useCallback, useId, useState } from '@wordpress/element';
+import { createInterpolateElement, useCallback, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { store } from '../../social-store';
 import styles from './style.module.scss';
 import { SupportedService } from './types';
-import type { ChangeEvent } from 'react';
 
 type CustomInputsProps = {
 	service: SupportedService;
@@ -20,7 +22,6 @@ type CustomInputsProps = {
  * @return {import('react').ReactNode} Custom inputs component
  */
 export function CustomInputs( { service }: CustomInputsProps ) {
-	const id = useId();
 	const [ handleError, setHandleError ] = useState< string | null >( null );
 
 	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
@@ -46,21 +47,16 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 		return true;
 	}, [] );
 
-	const handleBskyHandleChange = useCallback(
-		( event: ChangeEvent< HTMLInputElement > ) => {
-			validateBskyHandle( event.target.value );
-		},
+	const onBskyHandleChange = useCallback(
+		( value?: string ) => validateBskyHandle( value ?? '' ),
 		[ validateBskyHandle ]
 	);
 
 	if ( 'mastodon' === service.id ) {
 		return (
 			<div className={ styles[ 'fields-item' ] }>
-				<label htmlFor={ `${ id }-handle` }>
-					{ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
-				</label>
-				<input
-					id={ `${ id }-handle` }
+				<InputControl
+					__next40pxDefaultSize
 					required
 					type="text"
 					name="instance"
@@ -68,26 +64,49 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 					autoCapitalize="off"
 					autoCorrect="off"
 					spellCheck="false"
-					aria-label={ __( 'Mastodon handle', 'jetpack-publicize-pkg' ) }
-					aria-describedby={ `${ id }-handle-description` }
-					placeholder={ '@mastodon@mastodon.social' }
+					label={ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
+					placeholder="@mastodon@mastodon.social"
+					help={ __(
+						'You can find the handle in your Mastodon profile.',
+						'jetpack-publicize-pkg'
+					) }
 				/>
-				<p className="description" id={ `${ id }-handle-description` }>
-					{ __( 'You can find the handle in your Mastodon profile.', 'jetpack-publicize-pkg' ) }
-				</p>
 			</div>
 		);
 	}
 
 	if ( 'bluesky' === service.id ) {
+		const bskyHandleHelp = handleError ? (
+			<span className={ styles[ 'error-text' ] }>{ handleError }</span>
+		) : (
+			<>
+				{ __( 'You can find the handle in your Bluesky profile.', 'jetpack-publicize-pkg' ) }
+				&nbsp;
+				{ createInterpolateElement(
+					sprintf(
+						/* translators: %s is the bluesky handle suffix like .bsky.social */
+						__(
+							'This can either be %s or just the domain name if you are using a custom domain.',
+							'jetpack-publicize-pkg'
+						),
+						'<strong>username.bsky.social</strong>'
+					),
+					{
+						strong: <strong />,
+					}
+				) }
+			</>
+		);
+
 		return (
 			<>
-				<div className={ styles[ 'fields-item' ] }>
-					<label htmlFor={ `${ id }-handle` }>
-						{ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
-					</label>
-					<input
-						id={ `${ id }-handle` }
+				<div
+					className={ clsx( styles[ 'fields-item' ], {
+						[ styles[ 'fields-item-error' ] ]: Boolean( handleError ),
+					} ) }
+				>
+					<InputControl
+						__next40pxDefaultSize
 						required
 						type="text"
 						name="handle"
@@ -100,46 +119,19 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						autoCapitalize="off"
 						autoCorrect="off"
 						spellCheck="false"
-						aria-label={ __( 'Bluesky handle', 'jetpack-publicize-pkg' ) }
-						aria-describedby={ `${ id }-handle-description` }
-						placeholder={ 'username.bsky.social' }
-						onChange={ handleBskyHandleChange }
-						className={ handleError ? styles.error : undefined }
-					/>
-					<p
-						className={ clsx( 'description', handleError && styles[ 'error-text' ] ) }
-						id={ `${ id }-handle-description` }
-					>
-						{ handleError || (
-							<>
-								{ __(
-									'You can find the handle in your Bluesky profile.',
-									'jetpack-publicize-pkg'
-								) }
-								&nbsp;
-								{ createInterpolateElement(
-									sprintf(
-										/* translators: %s is the bluesky handle suffix like .bsky.social */
-										__(
-											'This can either be %s or just the domain name if you are using a custom domain.',
-											'jetpack-publicize-pkg'
-										),
-										'<strong>username.bsky.social</strong>'
-									),
-									{
-										strong: <strong />,
-									}
-								) }
-							</>
+						label={ _x(
+							'Handle',
+							'The handle of a social media account.',
+							'jetpack-publicize-pkg'
 						) }
-					</p>
+						placeholder="username.bsky.social"
+						onChange={ onBskyHandleChange }
+						help={ bskyHandleHelp }
+					/>
 				</div>
 				<div className={ styles[ 'fields-item' ] }>
-					<label htmlFor={ `${ id }-password` }>
-						{ __( 'App password', 'jetpack-publicize-pkg' ) }
-					</label>
-					<input
-						id={ `${ id }-password` }
+					<InputControl
+						__next40pxDefaultSize
 						required
 						type="password"
 						name="app_password"
@@ -147,12 +139,9 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						autoCapitalize="off"
 						autoCorrect="off"
 						spellCheck="false"
-						aria-label={ __( 'App password', 'jetpack-publicize-pkg' ) }
-						aria-describedby={ `${ id }-password-description` }
-						placeholder={ 'xxxx-xxxx-xxxx-xxxx' }
-					/>
-					<p className="description" id={ `${ id }-password-description` }>
-						{ createInterpolateElement(
+						label={ __( 'App password', 'jetpack-publicize-pkg' ) }
+						placeholder="xxxx-xxxx-xxxx-xxxx"
+						help={ createInterpolateElement(
 							__(
 								'App password is needed to safely connect your account. App password is different from your account password. You can <link>generate it in Bluesky</link>.',
 								'jetpack-publicize-pkg'
@@ -167,7 +156,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 								),
 							}
 						) }
-					</p>
+					/>
 					{ reconnectingAccount?.service_name === 'bluesky' && (
 						<Notice status="error" isDismissible={ false }>
 							{ __(
diff --git a/projects/packages/publicize/_inc/components/services/service-connection-info.tsx b/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
index ac92f63bf649..6ccdebef1f71 100644
--- a/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
@@ -1,6 +1,8 @@
-import { IconTooltip, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import { Tooltip } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import ConnectionIcon from '../connection-icon';
@@ -54,15 +56,39 @@ export const ServiceConnectionInfo = ( {
 						}
 
 						if ( canMarkAsShared ) {
+							const markAsSharedHelp = __(
+								'If enabled, the connection will be available to all administrators, editors, and authors.',
+								'jetpack-publicize-pkg'
+							);
+
 							return (
 								<div className={ styles[ 'mark-shared-wrap' ] }>
 									<MarkAsShared connection={ conn } />
-									<IconTooltip placement="top" inline={ false } shift>
-										{ __(
-											'If enabled, the connection will be available to all administrators, editors, and authors.',
-											'jetpack-publicize-pkg'
-										) }
-									</IconTooltip>
+									<Tooltip.Root>
+										<Tooltip.Trigger
+											render={
+												<button
+													type="button"
+													className={ styles[ 'mark-shared-help' ] }
+													aria-label={ markAsSharedHelp }
+												>
+													<Icon icon={ info } size={ 18 } />
+												</button>
+											}
+										/>
+										{ /*
+										 * The WPDS Tooltip positioner defaults to
+										 * `z-index: var(--wp-ui-tooltip-z-index, initial)`,
+										 * which falls back to `auto`. Inside the
+										 * wp-components Modal (z-index ~100000), the
+										 * popup ends up behind the modal frame. Pin
+										 * the popup above the modal so the tooltip
+										 * is visible when hovering inside the modal.
+										 */ }
+										<Tooltip.Popup sideOffset={ 8 } style={ { zIndex: 100001 } }>
+											{ markAsSharedHelp }
+										</Tooltip.Popup>
+									</Tooltip.Root>
 								</div>
 							);
 						}
@@ -87,7 +113,7 @@ export const ServiceConnectionInfo = ( {
 					} )( connection ) }
 				</div>
 				<div className={ styles[ 'connection-actions' ] }>
-					<Disconnect connection={ connection } variant="minimal" />
+					<Disconnect connection={ connection } variant="outline" />
 				</div>
 			</div>
 			<ConnectionTemplateEditor connection={ connection } />
diff --git a/projects/packages/publicize/_inc/components/services/service-item.tsx b/projects/packages/publicize/_inc/components/services/service-item.tsx
index a3196a8a2b5f..06e9b4fa28ba 100644
--- a/projects/packages/publicize/_inc/components/services/service-item.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-item.tsx
@@ -1,21 +1,27 @@
 import { useBreakpointMatch } from '@automattic/jetpack-components';
-import { Panel, PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useReducer, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import { Button } from '@wordpress/ui';
+import { Icon, chevronDown } from '@wordpress/icons';
+import { Collapsible } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { ConnectForm } from './connect-form';
 import { ServiceItemDetails, ServicesItemDetailsProps } from './service-item-details';
 import { ServiceItemNotice } from './service-item-notice';
 import { ServiceStatus } from './service-status';
 import styles from './style.module.scss';
+import type { SyntheticEvent } from 'react';
 
 export type ServicesItemProps = ServicesItemDetailsProps & {
 	isPanelDefaultOpen?: boolean;
 };
 
+// Stops a child click from bubbling up to the surrounding
+// `Collapsible.Trigger`, which would otherwise toggle the disclosure
+// when the user is trying to interact with an inline control (e.g.
+// the "Connect" button or the broken-connection reauth flow).
+const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
+
 /**
  * Service item component
  *
@@ -30,12 +36,13 @@ export function ServiceItem( {
 }: ServicesItemProps ) {
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
-	const [ isPanelOpen, togglePanel ] = useReducer( state => ! state, isPanelDefaultOpen );
-	const panelRef = useRef< HTMLDivElement >( null );
+	const [ isPanelOpen, setIsPanelOpen ] = useState( Boolean( isPanelDefaultOpen ) );
+	const togglePanel = useCallback( () => setIsPanelOpen( open => ! open ), [] );
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	useEffect( () => {
 		if ( isPanelDefaultOpen ) {
-			panelRef.current?.scrollIntoView( { block: 'center', behavior: 'smooth' } );
+			rowRef.current?.scrollIntoView( { block: 'center', behavior: 'smooth' } );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
@@ -68,9 +75,14 @@ export function ServiceItem( {
 			: _x( 'Fix connection', 'Fix social media connection', 'jetpack-publicize-pkg' );
 
 	return (
-		<div className={ styles[ 'service-item' ] }>
-			<div className={ styles[ 'service-item-info' ] }>
-				<div>
+		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
+			<Collapsible.Trigger
+				ref={ rowRef }
+				className={ styles[ 'service-row' ] }
+				nativeButton={ false }
+				render={ <div /> }
+			>
+				<div className={ styles[ 'service-row-icon' ] }>
 					<service.icon iconSize={ isSmall ? 36 : 48 } />
 				</div>
 				<div className={ styles[ 'service-basics' ] }>
@@ -86,8 +98,13 @@ export function ServiceItem( {
 						reauthConnections={ reauthConnections }
 					/>
 				</div>
-				<div className={ styles.actions }>
-					{ ! hideInitialConnectForm ? (
+				{ ! hideInitialConnectForm ? (
+					<div
+						className={ styles.actions }
+						onClick={ stopPropagation }
+						onKeyDown={ stopPropagation }
+						role="presentation"
+					>
 						<ConnectForm
 							service={ service }
 							isSmall={ isSmall }
@@ -97,21 +114,12 @@ export function ServiceItem( {
 							hasConnections={ serviceConnections.length > 0 }
 							buttonLabel={ hasOwnBrokenConnections ? buttonLabel : undefined }
 						/>
-					) : null }
-					<Button
-						size={ 'small' }
-						className={ styles[ 'learn-more' ] }
-						variant="minimal"
-						onClick={ togglePanel }
-						aria-label={ __( 'Learn more', 'jetpack-publicize-pkg' ) }
-					>
-						{ <Icon className={ styles.chevron } icon={ isPanelOpen ? chevronUp : chevronDown } /> }
-					</Button>
-				</div>
-			</div>
-
-			<Panel className={ styles[ 'service-panel' ] } ref={ panelRef }>
-				<PanelBody opened={ isPanelOpen } onToggle={ togglePanel }>
+					</div>
+				) : null }
+				<Icon className={ styles.chevron } icon={ chevronDown } />
+			</Collapsible.Trigger>
+			<Collapsible.Panel className={ styles[ 'service-panel' ] }>
+				<div className={ styles[ 'service-panel-inner' ] }>
 					<ServiceItemDetails service={ service } serviceConnections={ serviceConnections } />
 					<ServiceItemNotice service={ service } serviceConnections={ serviceConnections } />
 					{
@@ -128,8 +136,8 @@ export function ServiceItem( {
 							</div>
 						) : null
 					}
-				</PanelBody>
-			</Panel>
-		</div>
+				</div>
+			</Collapsible.Panel>
+		</Collapsible.Root>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/services/services-list.tsx b/projects/packages/publicize/_inc/components/services/services-list.tsx
index 1c0a877c6934..ba285255547d 100644
--- a/projects/packages/publicize/_inc/components/services/services-list.tsx
+++ b/projects/packages/publicize/_inc/components/services/services-list.tsx
@@ -1,5 +1,6 @@
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { Card } from '@wordpress/ui';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import { ServiceItem } from './service-item';
@@ -36,16 +37,18 @@ export function ServicesList() {
 	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
 
 	return (
-		<ul className={ styles.services }>
-			{ supportedServices.map( service => (
-				<li key={ service.id } className={ styles[ 'service-list-item' ] }>
-					<ServiceItem
-						service={ service }
-						serviceConnections={ connections[ service.id ] || [] }
-						isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
-					/>
-				</li>
-			) ) }
-		</ul>
+		<Card.Root>
+			<ul className={ styles.services }>
+				{ supportedServices.map( service => (
+					<li key={ service.id } className={ styles[ 'service-list-item' ] }>
+						<ServiceItem
+							service={ service }
+							serviceConnections={ connections[ service.id ] || [] }
+							isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
+						/>
+					</li>
+				) ) }
+			</ul>
+		</Card.Root>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/services/style.module.scss b/projects/packages/publicize/_inc/components/services/style.module.scss
index 3024f4b8ac22..2b40d4981280 100644
--- a/projects/packages/publicize/_inc/components/services/style.module.scss
+++ b/projects/packages/publicize/_inc/components/services/style.module.scss
@@ -1,87 +1,53 @@
 @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
 .services {
-	outline: 1px solid var(--jp-gray-5);
-	border-radius: 4px;
-
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	// Rows after the first get a top border so the dividers between
+	// them read as one continuous list. The first row sits flush with
+	// the Card.Root's own top edge — adding a border-top there would
+	// double up against the card's own border line.
 	.service-list-item {
-		margin-bottom: 0;
+		margin: 0;
 
-		&:not(:last-child) {
-			border-bottom: 1px solid var(--jp-gray-5);
+		&:not(:first-child) {
+			border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
 		}
 	}
 
-	.service-item {
-		padding: 0.75rem;
-
-		@include gb.break-small {
-			padding: 1rem;
-		}
-	}
-
-	.service-item-info {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
-
 	.service-basics {
-		flex: 1;
 		display: flex;
+		flex: 1;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: var(--wpds-dimension-gap-xs, 4px);
+		min-width: 0;
 	}
 
 	.heading {
-		display: flex;
-		gap: 1rem;
 		align-items: center;
+		display: flex;
+		gap: var(--wpds-dimension-gap-lg, 16px);
 	}
 
 	.title {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 600;
-		color: var(--jp-gray-80);
+		color: var(--wpds-color-fg-content-neutral, var(--jp-gray-80));
+		font-size: 0.875rem;
+		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		line-height: 1.4;
 	}
 
 	.description {
-		font-size: 14px;
-		color: var(--jp-gray-50);
+		color: var(--wpds-color-fg-content-neutral-weak, #757575);
+		font-size: var(--wpds-typography-font-size-md, 13px);
 	}
 
 	.actions {
 		display: flex;
-		gap: 0.5rem;
-	}
-
-	.learn-more {
-
-		&:global(.components-button) {
-			padding-inline: 6px;
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-
-			span {
-				display: flex;
-			}
-		}
-	}
-
-	.service-panel {
-		border: 0;
-
-		:global(.components-panel__body) {
-			border-top: 0;
-			border-bottom: 0;
-			padding: 0;
-		}
-
-		:global(.components-panel__body.is-opened) {
-			margin-top: 1rem;
-		}
+		gap: var(--wpds-dimension-gap-sm, 8px);
 	}
 
 	.active-connection {
@@ -108,6 +74,69 @@
 	}
 }
 
+// Flat clickable row used as the `Collapsible.Trigger` for each service.
+// Layout mirrors `.connection-row` in connection-management so the modal
+// and the chassis Overview share the same visual language.
+.service-row {
+	align-items: center;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: flex;
+	gap: var(--wpds-dimension-gap-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+	width: 100%;
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
+	}
+
+	&[data-panel-open] {
+
+		.chevron {
+			rotate: 180deg;
+		}
+	}
+}
+
+.service-row-icon {
+	flex-shrink: 0;
+}
+
+.chevron {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	flex-shrink: 0;
+	transition: rotate 0.15s ease-out;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+// Collapsible.Panel — height transition driven by `--collapsible-panel-height`
+// set by Base UI. Mirrors the WPDS CollapsibleCard.Content rule so the
+// services panels animate in/out at the same cadence.
+.service-panel {
+	height: var(--collapsible-panel-height);
+	overflow: hidden;
+
+	&[hidden]:not([hidden="until-found"]) {
+		display: none;
+	}
+
+	&[data-ending-style],
+	&[data-starting-style] {
+		height: 0;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-out;
+	}
+}
+
+.service-panel-inner {
+	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
+}
+
 .example-wrapper {
 	display: grid;
 	grid-auto-columns: minmax(0, 1fr);
@@ -200,6 +229,7 @@
 		flex-direction: column;
 		gap: 0.5rem;
 		flex-basis: 100%;
+		min-width: 220px;
 
 		@include gb.break-medium {
 			flex-basis: 50%;
@@ -212,34 +242,36 @@
 			}
 		}
 	}
-
-	label {
-		font-weight: 600;
-	}
-
-	input {
-		min-width: 220px;
-		height: auto;
-		font-size: var(--font-body);
-		line-height: 22px;
-		padding: var(--spacing-base) calc(var(--spacing-base) * 3); // To make the inputs of the same size as the Connect button
-
-		// Override the default input styles for small screens
-		@media (max-width: #{ (gb.$break-medium) }) {
-			padding: 0 8px;
-			font-size: 14px;
-		}
-
-		&.error {
-			border-color: var(--jp-red);
-			box-shadow: 0 0 0 1px var(--jp-red);
-		}
-	}
 }
 
 .mark-shared-wrap {
+	align-items: center;
 	display: flex;
-	gap: 0.5rem;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+}
+
+.mark-shared-help {
+	align-items: center;
+	background: transparent;
+	border: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	padding: 0;
+	width: 24px;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	}
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: var(--wpds-border-width-focus, 2px);
+	}
 }
 
 .error-text.error-text {
diff --git a/projects/packages/publicize/_inc/components/social-page.tsx b/projects/packages/publicize/_inc/components/social-page.tsx
index bb55a8eed396..06b3d01e2354 100644
--- a/projects/packages/publicize/_inc/components/social-page.tsx
+++ b/projects/packages/publicize/_inc/components/social-page.tsx
@@ -3,7 +3,7 @@ import { getSiteData } from '@automattic/jetpack-script-data';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from '@wordpress/route';
-import { Tabs } from '@wordpress/ui';
+import { Tabs, Tooltip } from '@wordpress/ui';
 // Define the `--color-facebook`, `--color-twitter`, ... custom properties
 // that `SocialServiceIcon` (and friends) consume to paint per-service
 // brand colours. The legacy `social-admin-page` webpack bundle inlines
@@ -67,24 +67,30 @@ export default function SocialPage( { activeTab, actions, children }: Props ): J
 	);
 
 	return (
-		<AdminPage
-			apiRoot={ getSiteData()?.rest_root }
-			apiNonce={ getSiteData()?.rest_nonce }
-			title={ PRODUCT_NAME }
-			subTitle={ SUBTITLES[ activeTab ]() }
-			actions={ actions }
-		>
-			<Tabs.Root className="jetpack-social-tabs" value={ activeTab } onValueChange={ onTabChange }>
-				<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
-					<Tabs.List variant="minimal">
-						<Tabs.Tab value="overview">{ __( 'Overview', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
-						<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
-					</Tabs.List>
-				</div>
-				<div className="jetpack-social-page__content jetpack-social-page__content--padded">
-					{ children }
-				</div>
-			</Tabs.Root>
-		</AdminPage>
+		<Tooltip.Provider delay={ 0 }>
+			<AdminPage
+				apiRoot={ getSiteData()?.rest_root }
+				apiNonce={ getSiteData()?.rest_nonce }
+				title={ PRODUCT_NAME }
+				subTitle={ SUBTITLES[ activeTab ]() }
+				actions={ actions }
+			>
+				<Tabs.Root
+					className="jetpack-social-tabs"
+					value={ activeTab }
+					onValueChange={ onTabChange }
+				>
+					<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
+						<Tabs.List variant="minimal">
+							<Tabs.Tab value="overview">{ __( 'Overview', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
+							<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
+						</Tabs.List>
+					</div>
+					<div className="jetpack-social-page__content jetpack-social-page__content--padded">
+						{ children }
+					</div>
+				</Tabs.Root>
+			</AdminPage>
+		</Tooltip.Provider>
 	);
 }
diff --git a/projects/packages/publicize/changelog/update-social-modernization-modal-wpds b/projects/packages/publicize/changelog/update-social-modernization-modal-wpds
new file mode 100644
index 000000000000..e9d7cd1167c0
--- /dev/null
+++ b/projects/packages/publicize/changelog/update-social-modernization-modal-wpds
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Refresh the connected-accounts list and the Add-account modal with the WordPress Design System: each row is now a single click-target that expands inline, the service avatars and inputs render with the new tokens, and tooltips open without delay.
diff --git a/projects/plugins/jetpack/changelog/update-social-modernization-modal-wpds b/projects/plugins/jetpack/changelog/update-social-modernization-modal-wpds
new file mode 100644
index 000000000000..07ec70267773
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-social-modernization-modal-wpds
@@ -0,0 +1,3 @@
+Significance: patch
+Type: other
+Comment: Dependencies: Update lock file to keep root requirements in sync.
diff --git a/projects/plugins/social/changelog/update-social-modernization-modal-wpds b/projects/plugins/social/changelog/update-social-modernization-modal-wpds
new file mode 100644
index 000000000000..c95ae24d87d1
--- /dev/null
+++ b/projects/plugins/social/changelog/update-social-modernization-modal-wpds
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Dependencies: Update lock file to keep root requirements in sync.

From bcf8c785d9a2586c31c33a983683468059383c27 Mon Sep 17 00:00:00 2001
From: Filipe Varela <filipe@automattic.com>
Date: Fri, 15 May 2026 10:52:16 +0100
Subject: [PATCH 02/11] Social: keep the legacy admin page rendering after WPDS
 migration

PR 2.5's WPDS imports made the legacy `social-admin-page.js` bundle
unusable on WP < 7.0 in two ways:

- `@wordpress/ui` pulls `wp-theme` (and `wp-private-apis` / `wp-notices`)
  through the dependency-extraction plugin. Those script handles ship
  via `WP_Build_Polyfills` for the chassis but were never registered
  on the legacy enqueue path, so WordPress silently dropped the
  script on WP 6.9.4 and the page rendered blank. Now
  `Social_Admin_Page::enqueue_admin_scripts()` calls
  `WP_Build_Polyfills::register('jetpack-social', SCRIPT_HANDLES)`
  with the same guard the chassis uses.
- `ConnectionInfo` and `ServiceConnectionInfo` now mount
  `Tooltip.Root` from `@wordpress/ui` for the MarkAsShared info icon.
  Without a `Tooltip.Provider` ancestor the primitive throws on mount
  and crashes the legacy React tree. The chassis page and the modal
  already provide one; this commit adds the same wrap at the legacy
  entry point (`entry-points/social-admin-page.tsx`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../publicize/_inc/entry-points/social-admin-page.tsx |  5 ++++-
 .../publicize/src/class-social-admin-page.php         | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx b/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
index 55353ca8d3b2..bace25b41a11 100644
--- a/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
+++ b/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
@@ -1,6 +1,7 @@
 import '../utils/public-path.js';
 import { ThemeProvider } from '@automattic/jetpack-components';
 import * as WPElement from '@wordpress/element';
+import { Tooltip } from '@wordpress/ui';
 import { SocialAdminPage } from '../components/admin-page';
 
 /**
@@ -15,7 +16,9 @@ function render() {
 
 	const component = (
 		<ThemeProvider targetDom={ document.body }>
-			<SocialAdminPage />
+			<Tooltip.Provider delay={ 0 }>
+				<SocialAdminPage />
+			</Tooltip.Provider>
 		</ThemeProvider>
 	);
 	WPElement.createRoot( container ).render( component );
diff --git a/projects/packages/publicize/src/class-social-admin-page.php b/projects/packages/publicize/src/class-social-admin-page.php
index 422a440bfd3f..342cdb8f9ded 100644
--- a/projects/packages/publicize/src/class-social-admin-page.php
+++ b/projects/packages/publicize/src/class-social-admin-page.php
@@ -184,6 +184,17 @@ public function enqueue_admin_scripts() {
 		wp_dequeue_script( 'jetpack-social' );
 		wp_dequeue_style( 'jetpack-social' );
 
+		// The legacy bundle pulls `wp-theme` / `wp-private-apis` through its
+		// `@wordpress/ui` imports. Those handles don't exist on WordPress < 7.0,
+		// so we use the same polyfill registry the chassis does — otherwise WP
+		// silently drops the script because of an unresolved dependency.
+		if ( class_exists( '\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills' ) ) {
+			\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::register(
+				'jetpack-social',
+				\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::SCRIPT_HANDLES
+			);
+		}
+
 		Assets::register_script(
 			'social-admin-page',
 			'../build/social-admin-page.js',

From b31ddf315f2c551d4b05a2cb8c82c36d3565f417 Mon Sep 17 00:00:00 2001
From: Filipe Varela <filipe@automattic.com>
Date: Fri, 15 May 2026 15:51:05 +0100
Subject: [PATCH 03/11] Social: keep block-editor sidebar + avatar sizing
 intact after WPDS migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two regressions from PR 2.5's WPDS migration surface together once both
fixes are in place:

- The block-editor publicize panel disappears on WordPress < 7.0.
  `block-editor-{jetpack,social}` pulls `wp-theme` /
  `wp-private-apis` through its `@wordpress/ui` imports — the same
  handles `Social_Admin_Page::enqueue_admin_scripts()` already
  polyfills for the legacy admin bundle. `Publicize_Assets::enqueue_block_editor_scripts()`
  now mirrors that registration so WP no longer silently drops the
  script when it can't resolve the deps.
- Avatars in the block-editor connections-toggle list render at their
  natural image size. PR 2.5 moved the default 28/24/14 sizing inside
  the new `&.small` / `&.medium` nested rules; when the scoped
  `.small` class doesn't reach the element through wp-components'
  `<Button icon={...}>` slot (the CSS-modules hash for the consumer
  bundle disagrees with the icon's), the wrapper and its `<img>`
  collapse to no constraints. Restore the 28/24/14 defaults on the
  bare `.wrapper` so the component renders sensibly regardless of
  whether the size class lands; `&.medium` stays as the only override.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../connection-icon/styles.module.scss        | 31 +++++++++----------
 .../publicize/src/class-publicize-assets.php  | 12 +++++++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss b/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
index 822dad1a6f6b..0dc9276b42c7 100644
--- a/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
+++ b/projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
@@ -1,6 +1,8 @@
 .wrapper {
 	align-items: center;
+	block-size: 28px;
 	display: flex;
+	inline-size: 28px;
 	justify-content: center;
 	position: relative;
 
@@ -11,34 +13,28 @@
 	img,
 	.avatar {
 		background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
+		block-size: 24px;
+		border: 2px solid var(--wpds-color-bg-surface-neutral-strong, #fff);
 		border-radius: 50%;
+		inline-size: 24px;
 	}
 
 	.social-icon {
 		background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
+		block-size: 14px;
 		border-radius: var(--wpds-border-radius-sm, 2px);
+		inline-size: 14px;
 		inset-block-end: 0;
 		inset-inline-end: 0;
 		position: absolute;
 	}
 
-	&.small {
-		block-size: 28px;
-		inline-size: 28px;
-
-		img,
-		.avatar {
-			block-size: 24px;
-			border: 2px solid var(--wpds-color-bg-surface-neutral-strong, #fff);
-			inline-size: 24px;
-		}
-
-		.social-icon {
-			block-size: 14px;
-			inline-size: 14px;
-		}
-	}
-
+	// Roomier variant for the chassis Overview "Connected accounts" list.
+	// Default (`size="small"`) is the 28/24/14 set above so any consumer
+	// that drops the prop — or that lands in a bundle context where the
+	// CSS-modules-scoped `.small` class doesn't reach the element (e.g.
+	// the block editor's `<Button icon={...}>` slot) — still renders at
+	// a sensible avatar size.
 	&.medium {
 		block-size: 32px;
 		inline-size: 32px;
@@ -46,6 +42,7 @@
 		img,
 		.avatar {
 			block-size: 32px;
+			border: 0;
 			inline-size: 32px;
 		}
 
diff --git a/projects/packages/publicize/src/class-publicize-assets.php b/projects/packages/publicize/src/class-publicize-assets.php
index 3d89e39e39df..f815b4179ee6 100644
--- a/projects/packages/publicize/src/class-publicize-assets.php
+++ b/projects/packages/publicize/src/class-publicize-assets.php
@@ -62,6 +62,18 @@ public static function enqueue_block_editor_scripts() {
 		wp_dequeue_script( 'jetpack-social-editor' );
 		wp_dequeue_style( 'jetpack-social-editor' );
 
+		// The block-editor bundle's dep tree includes `wp-theme` and
+		// `wp-private-apis` via its `@wordpress/ui` imports. Those handles
+		// don't exist on WordPress < 7.0, so we use the same polyfill
+		// registry the chassis does — otherwise WP silently drops the
+		// script and the Social sidebar disappears from the post editor.
+		if ( class_exists( '\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills' ) ) {
+			\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::register(
+				'jetpack-social',
+				\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::SCRIPT_HANDLES
+			);
+		}
+
 		Assets::register_script(
 			'jetpack-social-editor',
 			sprintf( '../build/%s.js', $script_to_load ),

From 5ecbf8ac3c278056de1fbb276da3f345d9d8d733 Mon Sep 17 00:00:00 2001
From: Filipe Varela <filipe@automattic.com>
Date: Mon, 18 May 2026 13:47:20 +0100
Subject: [PATCH 04/11] Social: free-plan upsell for per-connection message
 templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a Jetpack site doesn't qualify for per-connection message templates
(missing the `social-message-templates` sticker or the
`social-enhanced-publishing` paid plan), the disclosure panel used to
render nothing in that slot. Now it renders the same textarea, but
disabled, pre-filled with the site's default share message, and below
it a one-line upsell pointing at checkout with Social pre-selected:

> Showing your default share message. To customize it for this account,
> upgrade your plan.

The link uses WPDS `Link` (tone="brand", openInNewTab) so it picks up
the same accent colour and arrow indicator as the rest of the chassis,
and routes through a new `jetpack-social-per-connection-template-upsell`
Jetpack Redirect slug so its conversions are tracked separately from
the block-editor per-network-customization upsell. Click events reuse
the existing `jetpack_social_per_network_customization_upgrade_click`
Tracks name so the two surfaces aggregate in the same funnel.

Drive-by: `MessageTemplateEditor` gains a `showPlaceholders` prop so
the locked variant can hide the placeholders dropdown — there's nothing
to do with placeholders when the field is disabled.

Simple sites stay null (no upsell on WPCOM Simple, matching
`UpgradeNoticeCustomization`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../connection-template/index.tsx             | 91 ++++++++++++++++---
 .../tests/specs/connection-template.test.jsx  | 45 ++++++++-
 .../message-template-editor/index.tsx         | 15 ++-
 3 files changed, 131 insertions(+), 20 deletions(-)

diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
index 563fa4ef617b..e2f01d72f497 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
@@ -1,8 +1,17 @@
-import { siteHasFeature } from '@automattic/jetpack-script-data';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { isSimpleSite, siteHasFeature } from '@automattic/jetpack-script-data';
+import { getSiteFragment, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { useDebounce } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import { store as socialStore } from '../../../social-store';
 import { Connection } from '../../../social-store/types';
 import { features } from '../../../utils/constants';
@@ -25,28 +34,39 @@ const HELP_TEXT = __(
 	'jetpack-publicize-pkg'
 );
 
+const LABEL = __( 'Custom message for this connection', 'jetpack-publicize-pkg' );
+
+const NOOP = () => {};
+
 /**
  * Per-connection message template editor.
  *
- * Renders only when the site has the `social-message-templates` feature
- * AND the `social-enhanced-publishing` paid plan, AND the user can manage
- * the connection. Auto-saves through `updateConnectionById` after the user
- * pauses typing.
+ * Renders the live editor when the site has the `social-message-templates`
+ * feature AND the `social-enhanced-publishing` paid plan, AND the user can
+ * manage the connection. On Jetpack sites that don't qualify, renders a
+ * disabled-textarea variant with an Upgrade link instead, so free-plan users
+ * still see what unlocks with an upgrade.
  *
  * @param {ConnectionTemplateEditorProps} props - The component's props.
- * @return The rendered editor, or `null` when gated out.
+ * @return The rendered editor or its locked upsell variant.
  */
 export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps ) {
 	const { connection } = props;
 
-	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
-	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
-
-	const canManageConnection = useSelect(
-		select => select( socialStore ).canUserManageConnection( connection ),
+	const { canManageConnection, globalTemplate } = useSelect(
+		select => ( {
+			canManageConnection: select( socialStore ).canUserManageConnection( connection ),
+			globalTemplate: select( socialStore ).getSocialSettings().messageTemplate ?? '',
+		} ),
 		[ connection ]
 	);
 
+	const { recordEvent } = useAnalytics();
+
+	const onUpgradeClick = useCallback( () => {
+		recordEvent( 'jetpack_social_per_network_customization_upgrade_click' );
+	}, [ recordEvent ] );
+
 	const savedTemplate = connection.template ?? '';
 
 	const [ draft, setDraft ] = useState( savedTemplate );
@@ -83,14 +103,57 @@ export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps )
 		[ debouncedSave ]
 	);
 
-	if ( ! featureEnabled || ! planEnabled || ! canManageConnection ) {
+	if ( ! canManageConnection ) {
 		return null;
 	}
 
+	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
+	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
+
+	if ( ! featureEnabled || ! planEnabled ) {
+		if ( isSimpleSite() ) {
+			return null;
+		}
+
+		const upgradeUrl = getRedirectUrl( 'jetpack-social-per-connection-template-upsell', {
+			site: getSiteFragment() || '',
+			query: 'redirect_to=' + encodeURIComponent( window.location.href ),
+		} );
+
+		const upsellHelp = createInterpolateElement(
+			__(
+				'Showing your default share message. To customize it for this account, <a>upgrade your plan</a>.',
+				'jetpack-publicize-pkg'
+			),
+			{
+				a: (
+					<Link href={ upgradeUrl } onClick={ onUpgradeClick } openInNewTab>
+						{ null }
+					</Link>
+				),
+			}
+		);
+
+		return (
+			<div className={ styles.editor }>
+				<MessageTemplateEditor
+					label={ LABEL }
+					placeholder=""
+					helpText={ upsellHelp }
+					value={ globalTemplate }
+					onChange={ NOOP }
+					disabled
+					rows={ 3 }
+					showPlaceholders={ false }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div className={ styles.editor }>
 			<MessageTemplateEditor
-				label={ __( 'Custom message for this connection', 'jetpack-publicize-pkg' ) }
+				label={ LABEL }
 				placeholder={ PLACEHOLDER_TEXT }
 				helpText={ HELP_TEXT }
 				value={ draft }
diff --git a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
index 8e4149a414ce..36e0a6c936d9 100644
--- a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
+++ b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
@@ -17,6 +17,13 @@ const setupFeatures = ( ...active ) => {
 	} );
 };
 
+const setupGated = ( overrides = {} ) => {
+	mockScriptData( {
+		site: { plan: { features: { active: [] } }, ...overrides.site },
+		social: overrides.social,
+	} );
+};
+
 describe( 'ConnectionTemplateEditor', () => {
 	afterEach( () => {
 		clearMockedScriptData();
@@ -56,19 +63,49 @@ describe( 'ConnectionTemplateEditor', () => {
 		);
 	} );
 
-	test( 'renders nothing when the message-templates feature is off', () => {
+	test( 'renders the locked upsell variant when the message-templates feature is off', () => {
 		setupFeatures( 'social-enhanced-publishing' );
 		setup();
 
-		const { container } = render( <ConnectionTemplateEditor connection={ FB } /> );
+		render( <ConnectionTemplateEditor connection={ FB } /> );
 
-		expect( container ).toBeEmptyDOMElement();
+		const textarea = screen.getByRole( 'textbox', {
+			name: /Custom message for this connection/i,
+		} );
+		expect( textarea ).toBeDisabled();
+		expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
 	} );
 
-	test( 'renders nothing when the enhanced-publishing plan is off', () => {
+	test( 'renders the locked upsell variant when the enhanced-publishing plan is off', () => {
 		setupFeatures( 'social-message-templates' );
 		setup();
 
+		render( <ConnectionTemplateEditor connection={ FB } /> );
+
+		const textarea = screen.getByRole( 'textbox', {
+			name: /Custom message for this connection/i,
+		} );
+		expect( textarea ).toBeDisabled();
+		expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
+	} );
+
+	test( 'surfaces the global default message inside the locked textarea', () => {
+		setupGated( {
+			social: { settings: { messageTemplate: 'Read my latest: {url}' } },
+		} );
+		setup();
+
+		render( <ConnectionTemplateEditor connection={ FB } /> );
+
+		expect(
+			screen.getByRole( 'textbox', { name: /Custom message for this connection/i } )
+		).toHaveValue( 'Read my latest: {url}' );
+	} );
+
+	test( 'renders nothing on Simple sites when the editor is gated', () => {
+		setupGated( { site: { host: 'wpcom' } } );
+		setup();
+
 		const { container } = render( <ConnectionTemplateEditor connection={ FB } /> );
 
 		expect( container ).toBeEmptyDOMElement();
diff --git a/projects/packages/publicize/_inc/components/message-template-editor/index.tsx b/projects/packages/publicize/_inc/components/message-template-editor/index.tsx
index b399b81084ec..04e23d370b6d 100644
--- a/projects/packages/publicize/_inc/components/message-template-editor/index.tsx
+++ b/projects/packages/publicize/_inc/components/message-template-editor/index.tsx
@@ -20,6 +20,8 @@ export type MessageTemplateEditorProps = {
 	disabled?: boolean;
 	/** Number of textarea rows. Defaults to 4. */
 	rows?: number;
+	/** Whether to render the placeholders dropdown. Defaults to true. */
+	showPlaceholders?: boolean;
 };
 
 const getDefaultPlaceholder = () =>
@@ -57,7 +59,16 @@ const getDefaultHelpText = () =>
  * @return Element.
  */
 export function MessageTemplateEditor( props: MessageTemplateEditorProps ) {
-	const { value, onChange, label, placeholder, helpText, disabled, rows = 4 } = props;
+	const {
+		value,
+		onChange,
+		label,
+		placeholder,
+		helpText,
+		disabled,
+		rows = 4,
+		showPlaceholders = true,
+	} = props;
 	const resolvedLabel = label ?? __( 'Message template', 'jetpack-publicize-pkg' );
 	const resolvedPlaceholder = placeholder ?? getDefaultPlaceholder();
 	const resolvedHelpText = helpText ?? getDefaultHelpText();
@@ -74,7 +85,7 @@ export function MessageTemplateEditor( props: MessageTemplateEditorProps ) {
 				help={ resolvedHelpText }
 				__nextHasNoMarginBottom={ true }
 			/>
-			<PlaceholdersHelp />
+			{ showPlaceholders && <PlaceholdersHelp /> }
 		</div>
 	);
 }

From a9749fb581f0a89f23854dc8e106c31c12df58a1 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 21:56:43 -0300
Subject: [PATCH 05/11] Social: pin the connections modal height so expanding a
 row doesn't shift it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Add-account modal's services list sizes the WP Modal frame to its
content. Because the frame is vertically centered, expanding a disclosure
row past the frame's max-height grew the frame and re-centered it, so the
whole modal jumped upward.

Pin the frame to its full max-height while the services list is shown
(`height: 100%`, clamped by WordPress's existing `max-height`) so the frame
is a fixed size regardless of which rows are expanded — overflow now scrolls
inside the modal instead of resizing it. Scoped to `:not(.small)` so the
mobile full-screen modal is untouched, and to the services-list view so the
compact confirmation form keeps its natural content height.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../_inc/components/manage-connections-modal/index.tsx |  5 +++++
 .../manage-connections-modal/style.module.scss         | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
index 9c64a3d1b65c..5526f3ef606c 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
@@ -43,6 +43,11 @@ export const ManageConnectionsModal = () => {
 			<Modal
 				className={ clsx( styles.modal, {
 					[ styles.small ]: isSmall,
+					// Pin the frame to its max height while listing services so
+					// expanding a disclosure row scrolls inside the modal instead
+					// of resizing (and re-centering) the whole frame. The short
+					// confirmation view keeps its natural, content-sized height.
+					[ styles[ 'services-list' ] ]: ! hasKeyringResult,
 				} ) }
 				onRequestClose={ closeModal }
 				title={ title }
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss b/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
index ec74882421ee..b22777963f0b 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
@@ -2,6 +2,16 @@
 	width: 65rem;
 }
 
+// While the services list is shown (i.e. not the compact confirmation view),
+// occupy the full max-height the WP Modal allows so the frame stays a fixed
+// size as disclosure rows expand/collapse. Without this the frame is
+// content-sized and, being vertically centered, shifts upward when a row
+// expands past the max-height threshold. Mobile (`.small`) keeps WordPress's
+// full-screen treatment untouched.
+.modal.services-list:not(.small) {
+	height: 100%;
+}
+
 .connect-form {
 	display: grid;
 	gap: 0.5rem;

From 917577f97c249ffe5a614022c916c981d0d3a19c Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 22:28:40 -0300
Subject: [PATCH 06/11] Social: add ModernizationProvider/useIsModernized to
 gate the chassis UI

Introduces a React context (default false) provided once at the chassis
root in `social-page.tsx`. Shared connection/modal components will read
`useIsModernized()` to render their WPDS variants only inside the chassis;
the legacy admin page and block editor mount the same components without
the provider, so they keep the original UI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../publicize/_inc/components/social-page.tsx | 51 ++++++++++---------
 .../_inc/hooks/use-is-modernized/index.tsx    | 28 ++++++++++
 .../use-is-modernized/test/index.test.tsx     | 27 ++++++++++
 3 files changed, 82 insertions(+), 24 deletions(-)
 create mode 100644 projects/packages/publicize/_inc/hooks/use-is-modernized/index.tsx
 create mode 100644 projects/packages/publicize/_inc/hooks/use-is-modernized/test/index.test.tsx

diff --git a/projects/packages/publicize/_inc/components/social-page.tsx b/projects/packages/publicize/_inc/components/social-page.tsx
index 06b3d01e2354..86a300fe3f0f 100644
--- a/projects/packages/publicize/_inc/components/social-page.tsx
+++ b/projects/packages/publicize/_inc/components/social-page.tsx
@@ -4,6 +4,7 @@ import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from '@wordpress/route';
 import { Tabs, Tooltip } from '@wordpress/ui';
+import { ModernizationProvider } from '../hooks/use-is-modernized';
 // Define the `--color-facebook`, `--color-twitter`, ... custom properties
 // that `SocialServiceIcon` (and friends) consume to paint per-service
 // brand colours. The legacy `social-admin-page` webpack bundle inlines
@@ -67,30 +68,32 @@ export default function SocialPage( { activeTab, actions, children }: Props ): J
 	);
 
 	return (
-		<Tooltip.Provider delay={ 0 }>
-			<AdminPage
-				apiRoot={ getSiteData()?.rest_root }
-				apiNonce={ getSiteData()?.rest_nonce }
-				title={ PRODUCT_NAME }
-				subTitle={ SUBTITLES[ activeTab ]() }
-				actions={ actions }
-			>
-				<Tabs.Root
-					className="jetpack-social-tabs"
-					value={ activeTab }
-					onValueChange={ onTabChange }
+		<ModernizationProvider>
+			<Tooltip.Provider delay={ 0 }>
+				<AdminPage
+					apiRoot={ getSiteData()?.rest_root }
+					apiNonce={ getSiteData()?.rest_nonce }
+					title={ PRODUCT_NAME }
+					subTitle={ SUBTITLES[ activeTab ]() }
+					actions={ actions }
 				>
-					<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
-						<Tabs.List variant="minimal">
-							<Tabs.Tab value="overview">{ __( 'Overview', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
-							<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
-						</Tabs.List>
-					</div>
-					<div className="jetpack-social-page__content jetpack-social-page__content--padded">
-						{ children }
-					</div>
-				</Tabs.Root>
-			</AdminPage>
-		</Tooltip.Provider>
+					<Tabs.Root
+						className="jetpack-social-tabs"
+						value={ activeTab }
+						onValueChange={ onTabChange }
+					>
+						<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal">
+							<Tabs.List variant="minimal">
+								<Tabs.Tab value="overview">{ __( 'Overview', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
+								<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-publicize-pkg' ) }</Tabs.Tab>
+							</Tabs.List>
+						</div>
+						<div className="jetpack-social-page__content jetpack-social-page__content--padded">
+							{ children }
+						</div>
+					</Tabs.Root>
+				</AdminPage>
+			</Tooltip.Provider>
+		</ModernizationProvider>
 	);
 }
diff --git a/projects/packages/publicize/_inc/hooks/use-is-modernized/index.tsx b/projects/packages/publicize/_inc/hooks/use-is-modernized/index.tsx
new file mode 100644
index 000000000000..512783740418
--- /dev/null
+++ b/projects/packages/publicize/_inc/hooks/use-is-modernized/index.tsx
@@ -0,0 +1,28 @@
+import { createContext, useContext } from '@wordpress/element';
+import type { ReactNode } from 'react';
+
+const ModernizationContext = createContext( false );
+
+/**
+ * Marks its subtree as the modernized (chassis) Social UI so shared
+ * connection/modal components render their WPDS variants. The legacy admin
+ * page and the block editor mount these components without this provider, so
+ * they keep rendering the original UI.
+ *
+ * @param props          - Props.
+ * @param props.children - Subtree rendered with the modernized components.
+ * @return The provider element.
+ */
+export function ModernizationProvider( { children }: { children: ReactNode } ) {
+	return <ModernizationContext.Provider value={ true }>{ children }</ModernizationContext.Provider>;
+}
+
+/**
+ * Whether the current subtree is the modernized (chassis) Social UI. Defaults
+ * to false outside a ModernizationProvider (legacy admin page / block editor).
+ *
+ * @return True when rendered inside a ModernizationProvider.
+ */
+export function useIsModernized(): boolean {
+	return useContext( ModernizationContext );
+}
diff --git a/projects/packages/publicize/_inc/hooks/use-is-modernized/test/index.test.tsx b/projects/packages/publicize/_inc/hooks/use-is-modernized/test/index.test.tsx
new file mode 100644
index 000000000000..255671b90226
--- /dev/null
+++ b/projects/packages/publicize/_inc/hooks/use-is-modernized/test/index.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { ModernizationProvider, useIsModernized } from '..';
+
+/**
+ * Renders the resolved value of `useIsModernized()` as text for assertions.
+ *
+ * @return A span containing "true" or "false".
+ */
+function Probe() {
+	return <span>{ useIsModernized() ? 'true' : 'false' }</span>;
+}
+
+describe( 'useIsModernized', () => {
+	test( 'defaults to false with no provider (legacy / block editor)', () => {
+		render( <Probe /> );
+		expect( screen.getByText( 'false' ) ).toBeInTheDocument();
+	} );
+
+	test( 'is true inside a ModernizationProvider (chassis)', () => {
+		render(
+			<ModernizationProvider>
+				<Probe />
+			</ModernizationProvider>
+		);
+		expect( screen.getByText( 'true' ) ).toBeInTheDocument();
+	} );
+} );

From e014fbdcdfaaf0feae19d66d517504a8f1fe54b4 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 22:30:01 -0300
Subject: [PATCH 07/11] Social: revert shared connection/modal components to
 trunk

Reverts the WPDS modernization of the shared ConnectionInfo, the
Add-account modal, the services list/items, custom inputs, and the
per-connection template upsell back to their trunk versions, plus the
connection-template test. The legacy admin page and block editor render
these directly, so they now match trunk exactly and the previously
failing connection-management specs pass again. The modern variants are
reintroduced as chassis-only copies in a following commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../connection-management/connection-info.tsx | 105 ++++------
 .../connection-management/connection-name.tsx |   7 +-
 .../connection-template/index.tsx             |  91 ++------
 .../connection-management/disconnect.tsx      |   3 +-
 .../connection-management/style.module.scss   | 186 ++++++----------
 .../tests/specs/connection-template.test.jsx  |  45 +---
 .../manage-connections-modal/index.tsx        |  98 ++++-----
 .../style.module.scss                         |  10 -
 .../_inc/components/services/connect-form.tsx |   1 -
 .../components/services/custom-inputs.tsx     | 127 ++++++-----
 .../services/service-connection-info.tsx      |  42 +---
 .../_inc/components/services/service-item.tsx |  68 +++---
 .../components/services/services-list.tsx     |  25 +--
 .../components/services/style.module.scss     | 198 ++++++++----------
 14 files changed, 373 insertions(+), 633 deletions(-)

diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
index ff8b80b31c2b..cd0f9059aa2c 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-info.tsx
@@ -1,9 +1,10 @@
-import { Text } from '@automattic/jetpack-components';
+import { IconTooltip, Text } from '@automattic/jetpack-components';
+import { Panel, PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Icon, chevronDown, info } from '@wordpress/icons';
-import { Collapsible, Tooltip } from '@wordpress/ui';
+import { __, _x } from '@wordpress/i18n';
+import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
+import { Button } from '@wordpress/ui';
+import { useReducer } from 'react';
 import { store as socialStore } from '../../social-store';
 import ConnectionIcon from '../connection-icon';
 import { XNotice } from '../services/x-notice';
@@ -13,14 +14,11 @@ import { ConnectionTemplateEditor } from './connection-template';
 import { Disconnect } from './disconnect';
 import { MarkAsShared } from './mark-as-shared';
 import styles from './style.module.scss';
-import type { SyntheticEvent } from 'react';
 
 type ConnectionInfoProps = ConnectionStatusProps & {
 	canMarkAsShared: boolean;
 };
 
-const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
-
 /**
  * Connection info component
  *
@@ -29,81 +27,52 @@ const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
  * @return React element
  */
 export function ConnectionInfo( { connection, service, canMarkAsShared }: ConnectionInfoProps ) {
-	const [ isPanelOpen, setIsPanelOpen ] = useState( false );
-
-	const { canManageConnection, isUnsupported } = useSelect(
-		select => {
-			const { canUserManageConnection, getServicesBy } = select( socialStore );
+	const [ isPanelOpen, togglePanel ] = useReducer( state => ! state, false );
 
-			return {
-				canManageConnection: canUserManageConnection( connection ),
-				isUnsupported: getServicesBy( 'status', 'unsupported' ).some(
-					( { id } ) => id === connection.service_name
-				),
-			};
-		},
+	const canManageConnection = useSelect(
+		select => select( socialStore ).canUserManageConnection( connection ),
 		[ connection ]
 	);
 
-	const hasStatus =
-		connection.status === 'broken' || connection.status === 'must_reauth' || isUnsupported;
-
-	const markAsSharedHelp = __(
-		'If enabled, the connection will be available to all administrators, editors, and authors.',
-		'jetpack-publicize-pkg'
-	);
-
 	return (
-		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
-			<Collapsible.Trigger
-				className={ styles[ 'connection-row' ] }
-				nativeButton={ false }
-				render={ <div /> }
-			>
+		<>
+			<div className={ styles[ 'connection-item' ] }>
 				<ConnectionIcon
 					serviceName={ connection.service_name }
 					label={ connection.display_name }
 					profilePicture={ connection.profile_picture }
-					size="medium"
 				/>
 				<div className={ styles[ 'connection-name-wrapper' ] }>
 					<div className={ styles[ 'connection-item-name' ] }>
 						<ConnectionName connection={ connection } />
 					</div>
-					{ hasStatus ? (
-						<div
-							className={ styles[ 'connection-status-wrap' ] }
-							onClick={ stopPropagation }
-							onKeyDown={ stopPropagation }
-							role="presentation"
-						>
-							<ConnectionStatus connection={ connection } service={ service } />
-						</div>
-					) : (
-						<span className={ styles[ 'connection-network' ] }>{ service?.label }</span>
-					) }
+					<ConnectionStatus connection={ connection } service={ service } />
 				</div>
-				<Icon className={ styles.chevron } icon={ chevronDown } />
-			</Collapsible.Trigger>
-			<Collapsible.Panel className={ styles[ 'connection-panel' ] }>
-				<div className={ styles[ 'connection-panel-inner' ] }>
+				<Button
+					size={ 'small' }
+					className={ styles[ 'learn-more' ] }
+					variant="minimal"
+					onClick={ togglePanel }
+					aria-label={
+						isPanelOpen
+							? __( 'Close panel', 'jetpack-publicize-pkg' )
+							: _x( 'Open panel', 'Accessibility label', 'jetpack-publicize-pkg' )
+					}
+				>
+					{ <Icon className={ styles.chevron } icon={ isPanelOpen ? chevronUp : chevronDown } /> }
+				</Button>
+			</div>
+			<Panel className={ styles[ 'connection-panel' ] }>
+				<PanelBody opened={ isPanelOpen } onToggle={ togglePanel }>
 					{ canMarkAsShared && (
 						<div className={ styles[ 'mark-shared-wrap' ] }>
 							<MarkAsShared connection={ connection } />
-							<Tooltip.Root>
-								<Tooltip.Trigger
-									render={
-										<button
-											type="button"
-											className={ styles[ 'mark-shared-help' ] }
-											aria-label={ markAsSharedHelp }
-										>
-											<Icon icon={ info } size={ 18 } />
-										</button>
-									}
-								/>
-								<Tooltip.Popup sideOffset={ 8 }>{ markAsSharedHelp }</Tooltip.Popup>
-							</Tooltip.Root>
+							<IconTooltip>
+								{ __(
+									'If enabled, the connection will be available to all administrators, editors, and authors.',
+									'jetpack-publicize-pkg'
+								) }
+							</IconTooltip>
 						</div>
 					) }
 					<div className={ styles[ 'connection-template-wrap' ] }>
@@ -117,8 +86,8 @@ export function ConnectionInfo( { connection, service, canMarkAsShared }: Connec
 						</Text>
 					) }
 					{ service?.id === 'x' && <XNotice /> }
-				</div>
-			</Collapsible.Panel>
-		</Collapsible.Root>
+				</PanelBody>
+			</Panel>
+		</>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
index 3bd988fad2f1..4188ee85115f 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
@@ -30,12 +30,7 @@ export function ConnectionName( { connection }: ConnectionNameProps ) {
 			{ ! connection.profile_link ? (
 				<span className={ styles[ 'profile-link' ] }>{ connection.display_name }</span>
 			) : (
-				<Link
-					openInNewTab
-					tone="neutral"
-					className={ styles[ 'profile-link' ] }
-					href={ connection.profile_link }
-				>
+				<Link openInNewTab className={ styles[ 'profile-link' ] } href={ connection.profile_link }>
 					{ connection.display_name }
 				</Link>
 			) }
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
index e2f01d72f497..563fa4ef617b 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
@@ -1,17 +1,8 @@
-import { getRedirectUrl } from '@automattic/jetpack-components';
-import { isSimpleSite, siteHasFeature } from '@automattic/jetpack-script-data';
-import { getSiteFragment, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { siteHasFeature } from '@automattic/jetpack-script-data';
 import { useDebounce } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	createInterpolateElement,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
 import { store as socialStore } from '../../../social-store';
 import { Connection } from '../../../social-store/types';
 import { features } from '../../../utils/constants';
@@ -34,39 +25,28 @@ const HELP_TEXT = __(
 	'jetpack-publicize-pkg'
 );
 
-const LABEL = __( 'Custom message for this connection', 'jetpack-publicize-pkg' );
-
-const NOOP = () => {};
-
 /**
  * Per-connection message template editor.
  *
- * Renders the live editor when the site has the `social-message-templates`
- * feature AND the `social-enhanced-publishing` paid plan, AND the user can
- * manage the connection. On Jetpack sites that don't qualify, renders a
- * disabled-textarea variant with an Upgrade link instead, so free-plan users
- * still see what unlocks with an upgrade.
+ * Renders only when the site has the `social-message-templates` feature
+ * AND the `social-enhanced-publishing` paid plan, AND the user can manage
+ * the connection. Auto-saves through `updateConnectionById` after the user
+ * pauses typing.
  *
  * @param {ConnectionTemplateEditorProps} props - The component's props.
- * @return The rendered editor or its locked upsell variant.
+ * @return The rendered editor, or `null` when gated out.
  */
 export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps ) {
 	const { connection } = props;
 
-	const { canManageConnection, globalTemplate } = useSelect(
-		select => ( {
-			canManageConnection: select( socialStore ).canUserManageConnection( connection ),
-			globalTemplate: select( socialStore ).getSocialSettings().messageTemplate ?? '',
-		} ),
+	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
+	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
+
+	const canManageConnection = useSelect(
+		select => select( socialStore ).canUserManageConnection( connection ),
 		[ connection ]
 	);
 
-	const { recordEvent } = useAnalytics();
-
-	const onUpgradeClick = useCallback( () => {
-		recordEvent( 'jetpack_social_per_network_customization_upgrade_click' );
-	}, [ recordEvent ] );
-
 	const savedTemplate = connection.template ?? '';
 
 	const [ draft, setDraft ] = useState( savedTemplate );
@@ -103,57 +83,14 @@ export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps )
 		[ debouncedSave ]
 	);
 
-	if ( ! canManageConnection ) {
+	if ( ! featureEnabled || ! planEnabled || ! canManageConnection ) {
 		return null;
 	}
 
-	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
-	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
-
-	if ( ! featureEnabled || ! planEnabled ) {
-		if ( isSimpleSite() ) {
-			return null;
-		}
-
-		const upgradeUrl = getRedirectUrl( 'jetpack-social-per-connection-template-upsell', {
-			site: getSiteFragment() || '',
-			query: 'redirect_to=' + encodeURIComponent( window.location.href ),
-		} );
-
-		const upsellHelp = createInterpolateElement(
-			__(
-				'Showing your default share message. To customize it for this account, <a>upgrade your plan</a>.',
-				'jetpack-publicize-pkg'
-			),
-			{
-				a: (
-					<Link href={ upgradeUrl } onClick={ onUpgradeClick } openInNewTab>
-						{ null }
-					</Link>
-				),
-			}
-		);
-
-		return (
-			<div className={ styles.editor }>
-				<MessageTemplateEditor
-					label={ LABEL }
-					placeholder=""
-					helpText={ upsellHelp }
-					value={ globalTemplate }
-					onChange={ NOOP }
-					disabled
-					rows={ 3 }
-					showPlaceholders={ false }
-				/>
-			</div>
-		);
-	}
-
 	return (
 		<div className={ styles.editor }>
 			<MessageTemplateEditor
-				label={ LABEL }
+				label={ __( 'Custom message for this connection', 'jetpack-publicize-pkg' ) }
 				placeholder={ PLACEHOLDER_TEXT }
 				helpText={ HELP_TEXT }
 				value={ draft }
diff --git a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
index b169dadf2cc2..004718654d52 100644
--- a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
@@ -94,8 +94,7 @@ export function Disconnect( { connection, variant = 'outline' }: DisconnectProps
 				</Link>
 			) : (
 				<Button
-					size="compact"
-					tone="neutral"
+					size="small"
 					variant={ variant }
 					onClick={ toggleConfirm }
 					disabled={ isDisconnecting }
diff --git a/projects/packages/publicize/_inc/components/connection-management/style.module.scss b/projects/packages/publicize/_inc/components/connection-management/style.module.scss
index 0a8fc58bf078..2b5b309ecb31 100644
--- a/projects/packages/publicize/_inc/components/connection-management/style.module.scss
+++ b/projects/packages/publicize/_inc/components/connection-management/style.module.scss
@@ -1,10 +1,10 @@
 .wrapper {
-	align-items: start;
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xl, 24px);
-	padding-top: var(--wpds-dimension-padding-lg, 16px);
+	align-items: start;
+	gap: 1.5rem;
 	width: 100%;
+	padding-top: 1rem;
 
 	> h3 {
 		margin-block: 0;
@@ -12,8 +12,8 @@
 }
 
 .connection-name {
-	align-items: center;
 	display: flex;
+	align-items: center;
 
 	:global(.components-spinner) {
 		margin-top: 0;
@@ -23,6 +23,8 @@
 	.profile-link:global(.components-external-link) {
 		color: inherit;
 		text-decoration: none;
+		font-size: 1rem;
+		font-weight: 400;
 
 		>svg {
 			vertical-align: bottom;
@@ -43,154 +45,96 @@
 }
 
 .confirmDialog span {
-	font-size: var(--wpds-typography-font-size-lg, 15px);
+	font-size: 15px;
 }
 
-.description {
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	font-size: 0.875rem;
-}
 
-.connection-list {
+.mark-shared-wrap {
 	display: flex;
-	flex-direction: column;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	width: 100%;
+	gap: 0.5rem;
 
-	*[inert="true"] {
-		opacity: 0.7;
-	}
+	border-top: 1px solid var(--jp-gray-5);
+	padding-top: 1rem;
 
-	// Every row gets a top border so the first row also sits below a
-	// divider line that separates it from the surrounding Card.Header
-	// (or whatever chrome wraps the list).
-	.connection-list-item {
-		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
-		margin: 0;
-	}
+	margin-bottom: 1rem;
 }
 
-// Flat row that doubles as the Collapsible.Trigger. Click anywhere on the
-// row (outside of the name link / status actions) toggles the disclosure;
-// the chevron rotates 180° via `[data-panel-open]` set by Base UI.
-.connection-row {
-	align-items: center;
-	cursor: var(--wpds-cursor-control, pointer);
-	display: flex;
-	gap: var(--wpds-dimension-gap-lg, 16px);
-	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
-	width: 100%;
+.connection-template-wrap {
+	margin-bottom: 1.5rem;
 
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
+	&:empty {
+		margin-bottom: 0;
 	}
 }
 
-.connection-name-wrapper {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
-	min-width: 0;
-}
-
-.connection-item-name {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	font-size: 0.875rem;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
-}
-
-.connection-network {
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	font-size: var(--wpds-typography-font-size-md, 13px);
-}
+.connection-panel.connection-panel {
+	border: 0;
+	margin-left: 3rem;
 
-.connection-status-wrap {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
-}
+	:global(.components-panel__body) {
+		border-top: 0;
+		border-bottom: 0;
+		padding: 0;
+	}
 
-.chevron {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	flex-shrink: 0;
-	transition: rotate 0.15s ease-out;
+	:global(.components-panel__body.is-opened) {
+		margin-top: 1rem;
+	}
 
-	@media (prefers-reduced-motion) {
-		transition: none;
+	.description {
+		font-size: 14px;
+		color: var(--jp-gray-50);
 	}
 }
 
-.connection-row[data-panel-open] {
+.connection-list {
+	outline: 1px solid var(--jp-gray-5);
+	border-radius: 4px;
+	margin: 0;
+	width: 100%;
 
-	.chevron {
-		rotate: 180deg;
+	*[inert="true"] {
+		opacity: 0.7;
 	}
-}
 
-// Collapsible.Panel — collapses to height 0 with a smooth height transition.
-// `--collapsible-panel-height` is supplied by Base UI so we mirror what the
-// WPDS CollapsibleCard.Content rule does.
-.connection-panel {
-	height: var(--collapsible-panel-height);
-	overflow: hidden;
+	.connection-list-item {
+		margin-bottom: 0;
+		padding: 1rem;
 
-	&[hidden]:not([hidden="until-found"]) {
-		display: none;
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--jp-gray-5);
+		}
 	}
 
-	&[data-ending-style],
-	&[data-starting-style] {
-		height: 0;
+	.connection-item {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
 	}
 
-	@media not (prefers-reduced-motion) {
-		transition: all 0.15s ease-out;
+	.connection-item-name {
+		font-size: 1rem;
+		font-weight: 400;
 	}
-}
-
-.connection-panel-inner {
-	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
-}
 
-.mark-shared-wrap {
-	align-items: center;
-	display: flex;
-	gap: var(--wpds-dimension-gap-sm, 8px);
-	padding-bottom: var(--wpds-dimension-padding-lg, 16px);
-}
+	.learn-more {
 
-.mark-shared-help {
-	align-items: center;
-	background: transparent;
-	border: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	cursor: var(--wpds-cursor-control, pointer);
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	padding: 0;
-	width: 24px;
-
-	&:hover,
-	&:focus-visible {
-		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	}
+		&:global(.components-button) {
+			padding-inline: 6px;
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
 
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: var(--wpds-border-width-focus, 2px);
+			span {
+				display: flex;
+			}
+		}
 	}
 }
 
-.connection-template-wrap {
-	margin-bottom: var(--wpds-dimension-gap-xl, 24px);
-
-	&:empty {
-		margin-bottom: 0;
-	}
+.connection-name-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	flex: 1;
 }
diff --git a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
index 36e0a6c936d9..8e4149a414ce 100644
--- a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
+++ b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
@@ -17,13 +17,6 @@ const setupFeatures = ( ...active ) => {
 	} );
 };
 
-const setupGated = ( overrides = {} ) => {
-	mockScriptData( {
-		site: { plan: { features: { active: [] } }, ...overrides.site },
-		social: overrides.social,
-	} );
-};
-
 describe( 'ConnectionTemplateEditor', () => {
 	afterEach( () => {
 		clearMockedScriptData();
@@ -63,49 +56,19 @@ describe( 'ConnectionTemplateEditor', () => {
 		);
 	} );
 
-	test( 'renders the locked upsell variant when the message-templates feature is off', () => {
+	test( 'renders nothing when the message-templates feature is off', () => {
 		setupFeatures( 'social-enhanced-publishing' );
 		setup();
 
-		render( <ConnectionTemplateEditor connection={ FB } /> );
+		const { container } = render( <ConnectionTemplateEditor connection={ FB } /> );
 
-		const textarea = screen.getByRole( 'textbox', {
-			name: /Custom message for this connection/i,
-		} );
-		expect( textarea ).toBeDisabled();
-		expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'renders the locked upsell variant when the enhanced-publishing plan is off', () => {
+	test( 'renders nothing when the enhanced-publishing plan is off', () => {
 		setupFeatures( 'social-message-templates' );
 		setup();
 
-		render( <ConnectionTemplateEditor connection={ FB } /> );
-
-		const textarea = screen.getByRole( 'textbox', {
-			name: /Custom message for this connection/i,
-		} );
-		expect( textarea ).toBeDisabled();
-		expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
-	} );
-
-	test( 'surfaces the global default message inside the locked textarea', () => {
-		setupGated( {
-			social: { settings: { messageTemplate: 'Read my latest: {url}' } },
-		} );
-		setup();
-
-		render( <ConnectionTemplateEditor connection={ FB } /> );
-
-		expect(
-			screen.getByRole( 'textbox', { name: /Custom message for this connection/i } )
-		).toHaveValue( 'Read my latest: {url}' );
-	} );
-
-	test( 'renders nothing on Simple sites when the editor is gated', () => {
-		setupGated( { site: { host: 'wpcom' } } );
-		setup();
-
 		const { container } = render( <ConnectionTemplateEditor connection={ FB } /> );
 
 		expect( container ).toBeEmptyDOMElement();
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
index 5526f3ef606c..582524c00db8 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
@@ -1,9 +1,14 @@
-import { getRedirectUrl, ThemeProvider, useBreakpointMatch } from '@automattic/jetpack-components';
+import {
+	getRedirectUrl,
+	Text,
+	ThemeProvider,
+	useBreakpointMatch,
+} from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Link, Text, Tooltip } from '@wordpress/ui';
+import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store } from '../../social-store';
@@ -39,54 +44,51 @@ export const ManageConnectionsModal = () => {
 	const canMarkAsShared = useUserCanShareConnection();
 
 	return (
-		<Tooltip.Provider delay={ 0 }>
-			<Modal
-				className={ clsx( styles.modal, {
-					[ styles.small ]: isSmall,
-					// Pin the frame to its max height while listing services so
-					// expanding a disclosure row scrolls inside the modal instead
-					// of resizing (and re-centering) the whole frame. The short
-					// confirmation view keeps its natural, content-sized height.
-					[ styles[ 'services-list' ] ]: ! hasKeyringResult,
-				} ) }
-				onRequestClose={ closeModal }
-				title={ title }
-			>
-				{
-					//Use IIFE to avoid nested ternary
-					( () => {
-						if ( hasKeyringResult ) {
-							return (
-								<ConfirmationForm
-									keyringResult={ keyringResult }
-									onComplete={ closeModal }
-									canMarkAsShared={ canMarkAsShared }
-								/>
-							);
-						}
-
+		<Modal
+			className={ clsx( styles.modal, {
+				[ styles.small ]: isSmall,
+			} ) }
+			onRequestClose={ closeModal }
+			title={ title }
+		>
+			{
+				//Use IIFE to avoid nested ternary
+				( () => {
+					if ( hasKeyringResult ) {
 						return (
-							<>
-								<ServicesList />
-								<Text variant="body-sm" render={ <p className={ styles[ 'manual-share' ] } /> }>
-									{ __(
-										'Want to share to other networks? Use our Manual Sharing feature from the editor.',
-										'jetpack-publicize-pkg'
-									) }
-									&nbsp;
-									<Link
-										openInNewTab
-										href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
-									>
-										{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
-									</Link>
-								</Text>
-							</>
+							<ConfirmationForm
+								keyringResult={ keyringResult }
+								onComplete={ closeModal }
+								canMarkAsShared={ canMarkAsShared }
+							/>
 						);
-					} )()
-				}
-			</Modal>
-		</Tooltip.Provider>
+					}
+
+					return (
+						<>
+							<ServicesList />
+							<div className={ styles[ 'manual-share' ] }>
+								<em>
+									<Text>
+										{ __(
+											`Want to share to other networks? Use our Manual Sharing feature from the editor.`,
+											'jetpack-publicize-pkg'
+										) }
+										&nbsp;
+										<Link
+											openInNewTab
+											href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
+										>
+											{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
+										</Link>
+									</Text>
+								</em>
+							</div>
+						</>
+					);
+				} )()
+			}
+		</Modal>
 	);
 };
 
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss b/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
index b22777963f0b..ec74882421ee 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/style.module.scss
@@ -2,16 +2,6 @@
 	width: 65rem;
 }
 
-// While the services list is shown (i.e. not the compact confirmation view),
-// occupy the full max-height the WP Modal allows so the frame stays a fixed
-// size as disclosure rows expand/collapse. Without this the frame is
-// content-sized and, being vertically centered, shifts upward when a row
-// expands past the max-height threshold. Mobile (`.small`) keeps WordPress's
-// full-screen treatment untouched.
-.modal.services-list:not(.small) {
-	height: 100%;
-}
-
 .connect-form {
 	display: grid;
 	gap: 0.5rem;
diff --git a/projects/packages/publicize/_inc/components/services/connect-form.tsx b/projects/packages/publicize/_inc/components/services/connect-form.tsx
index 8e98ebaaa901..94600acded6a 100644
--- a/projects/packages/publicize/_inc/components/services/connect-form.tsx
+++ b/projects/packages/publicize/_inc/components/services/connect-form.tsx
@@ -94,7 +94,6 @@ export function ConnectForm( {
 			<div className={ styles[ 'fields-wrapper' ] }>
 				<Button
 					variant={ hasConnections ? 'outline' : 'solid' }
-					size={ displayInputs ? 'default' : 'compact' }
 					type="submit"
 					disabled={ isFetchingServicesList }
 				>
diff --git a/projects/packages/publicize/_inc/components/services/custom-inputs.tsx b/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
index 44dae765cf60..7a081e5425bf 100644
--- a/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
+++ b/projects/packages/publicize/_inc/components/services/custom-inputs.tsx
@@ -1,15 +1,13 @@
-import {
-	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	Notice,
-} from '@wordpress/components';
+import { Notice } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { createInterpolateElement, useCallback, useState } from '@wordpress/element';
+import { createInterpolateElement, useCallback, useId, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { store } from '../../social-store';
 import styles from './style.module.scss';
 import { SupportedService } from './types';
+import type { ChangeEvent } from 'react';
 
 type CustomInputsProps = {
 	service: SupportedService;
@@ -22,6 +20,7 @@ type CustomInputsProps = {
  * @return {import('react').ReactNode} Custom inputs component
  */
 export function CustomInputs( { service }: CustomInputsProps ) {
+	const id = useId();
 	const [ handleError, setHandleError ] = useState< string | null >( null );
 
 	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
@@ -47,16 +46,21 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 		return true;
 	}, [] );
 
-	const onBskyHandleChange = useCallback(
-		( value?: string ) => validateBskyHandle( value ?? '' ),
+	const handleBskyHandleChange = useCallback(
+		( event: ChangeEvent< HTMLInputElement > ) => {
+			validateBskyHandle( event.target.value );
+		},
 		[ validateBskyHandle ]
 	);
 
 	if ( 'mastodon' === service.id ) {
 		return (
 			<div className={ styles[ 'fields-item' ] }>
-				<InputControl
-					__next40pxDefaultSize
+				<label htmlFor={ `${ id }-handle` }>
+					{ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
+				</label>
+				<input
+					id={ `${ id }-handle` }
 					required
 					type="text"
 					name="instance"
@@ -64,49 +68,26 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 					autoCapitalize="off"
 					autoCorrect="off"
 					spellCheck="false"
-					label={ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
-					placeholder="@mastodon@mastodon.social"
-					help={ __(
-						'You can find the handle in your Mastodon profile.',
-						'jetpack-publicize-pkg'
-					) }
+					aria-label={ __( 'Mastodon handle', 'jetpack-publicize-pkg' ) }
+					aria-describedby={ `${ id }-handle-description` }
+					placeholder={ '@mastodon@mastodon.social' }
 				/>
+				<p className="description" id={ `${ id }-handle-description` }>
+					{ __( 'You can find the handle in your Mastodon profile.', 'jetpack-publicize-pkg' ) }
+				</p>
 			</div>
 		);
 	}
 
 	if ( 'bluesky' === service.id ) {
-		const bskyHandleHelp = handleError ? (
-			<span className={ styles[ 'error-text' ] }>{ handleError }</span>
-		) : (
-			<>
-				{ __( 'You can find the handle in your Bluesky profile.', 'jetpack-publicize-pkg' ) }
-				&nbsp;
-				{ createInterpolateElement(
-					sprintf(
-						/* translators: %s is the bluesky handle suffix like .bsky.social */
-						__(
-							'This can either be %s or just the domain name if you are using a custom domain.',
-							'jetpack-publicize-pkg'
-						),
-						'<strong>username.bsky.social</strong>'
-					),
-					{
-						strong: <strong />,
-					}
-				) }
-			</>
-		);
-
 		return (
 			<>
-				<div
-					className={ clsx( styles[ 'fields-item' ], {
-						[ styles[ 'fields-item-error' ] ]: Boolean( handleError ),
-					} ) }
-				>
-					<InputControl
-						__next40pxDefaultSize
+				<div className={ styles[ 'fields-item' ] }>
+					<label htmlFor={ `${ id }-handle` }>
+						{ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
+					</label>
+					<input
+						id={ `${ id }-handle` }
 						required
 						type="text"
 						name="handle"
@@ -119,19 +100,46 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						autoCapitalize="off"
 						autoCorrect="off"
 						spellCheck="false"
-						label={ _x(
-							'Handle',
-							'The handle of a social media account.',
-							'jetpack-publicize-pkg'
-						) }
-						placeholder="username.bsky.social"
-						onChange={ onBskyHandleChange }
-						help={ bskyHandleHelp }
+						aria-label={ __( 'Bluesky handle', 'jetpack-publicize-pkg' ) }
+						aria-describedby={ `${ id }-handle-description` }
+						placeholder={ 'username.bsky.social' }
+						onChange={ handleBskyHandleChange }
+						className={ handleError ? styles.error : undefined }
 					/>
+					<p
+						className={ clsx( 'description', handleError && styles[ 'error-text' ] ) }
+						id={ `${ id }-handle-description` }
+					>
+						{ handleError || (
+							<>
+								{ __(
+									'You can find the handle in your Bluesky profile.',
+									'jetpack-publicize-pkg'
+								) }
+								&nbsp;
+								{ createInterpolateElement(
+									sprintf(
+										/* translators: %s is the bluesky handle suffix like .bsky.social */
+										__(
+											'This can either be %s or just the domain name if you are using a custom domain.',
+											'jetpack-publicize-pkg'
+										),
+										'<strong>username.bsky.social</strong>'
+									),
+									{
+										strong: <strong />,
+									}
+								) }
+							</>
+						) }
+					</p>
 				</div>
 				<div className={ styles[ 'fields-item' ] }>
-					<InputControl
-						__next40pxDefaultSize
+					<label htmlFor={ `${ id }-password` }>
+						{ __( 'App password', 'jetpack-publicize-pkg' ) }
+					</label>
+					<input
+						id={ `${ id }-password` }
 						required
 						type="password"
 						name="app_password"
@@ -139,9 +147,12 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						autoCapitalize="off"
 						autoCorrect="off"
 						spellCheck="false"
-						label={ __( 'App password', 'jetpack-publicize-pkg' ) }
-						placeholder="xxxx-xxxx-xxxx-xxxx"
-						help={ createInterpolateElement(
+						aria-label={ __( 'App password', 'jetpack-publicize-pkg' ) }
+						aria-describedby={ `${ id }-password-description` }
+						placeholder={ 'xxxx-xxxx-xxxx-xxxx' }
+					/>
+					<p className="description" id={ `${ id }-password-description` }>
+						{ createInterpolateElement(
 							__(
 								'App password is needed to safely connect your account. App password is different from your account password. You can <link>generate it in Bluesky</link>.',
 								'jetpack-publicize-pkg'
@@ -156,7 +167,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 								),
 							}
 						) }
-					/>
+					</p>
 					{ reconnectingAccount?.service_name === 'bluesky' && (
 						<Notice status="error" isDismissible={ false }>
 							{ __(
diff --git a/projects/packages/publicize/_inc/components/services/service-connection-info.tsx b/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
index 6ccdebef1f71..ac92f63bf649 100644
--- a/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-connection-info.tsx
@@ -1,8 +1,6 @@
-import { Text } from '@automattic/jetpack-components';
+import { IconTooltip, Text } from '@automattic/jetpack-components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
-import { Tooltip } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import ConnectionIcon from '../connection-icon';
@@ -56,39 +54,15 @@ export const ServiceConnectionInfo = ( {
 						}
 
 						if ( canMarkAsShared ) {
-							const markAsSharedHelp = __(
-								'If enabled, the connection will be available to all administrators, editors, and authors.',
-								'jetpack-publicize-pkg'
-							);
-
 							return (
 								<div className={ styles[ 'mark-shared-wrap' ] }>
 									<MarkAsShared connection={ conn } />
-									<Tooltip.Root>
-										<Tooltip.Trigger
-											render={
-												<button
-													type="button"
-													className={ styles[ 'mark-shared-help' ] }
-													aria-label={ markAsSharedHelp }
-												>
-													<Icon icon={ info } size={ 18 } />
-												</button>
-											}
-										/>
-										{ /*
-										 * The WPDS Tooltip positioner defaults to
-										 * `z-index: var(--wp-ui-tooltip-z-index, initial)`,
-										 * which falls back to `auto`. Inside the
-										 * wp-components Modal (z-index ~100000), the
-										 * popup ends up behind the modal frame. Pin
-										 * the popup above the modal so the tooltip
-										 * is visible when hovering inside the modal.
-										 */ }
-										<Tooltip.Popup sideOffset={ 8 } style={ { zIndex: 100001 } }>
-											{ markAsSharedHelp }
-										</Tooltip.Popup>
-									</Tooltip.Root>
+									<IconTooltip placement="top" inline={ false } shift>
+										{ __(
+											'If enabled, the connection will be available to all administrators, editors, and authors.',
+											'jetpack-publicize-pkg'
+										) }
+									</IconTooltip>
 								</div>
 							);
 						}
@@ -113,7 +87,7 @@ export const ServiceConnectionInfo = ( {
 					} )( connection ) }
 				</div>
 				<div className={ styles[ 'connection-actions' ] }>
-					<Disconnect connection={ connection } variant="outline" />
+					<Disconnect connection={ connection } variant="minimal" />
 				</div>
 			</div>
 			<ConnectionTemplateEditor connection={ connection } />
diff --git a/projects/packages/publicize/_inc/components/services/service-item.tsx b/projects/packages/publicize/_inc/components/services/service-item.tsx
index 06e9b4fa28ba..a3196a8a2b5f 100644
--- a/projects/packages/publicize/_inc/components/services/service-item.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-item.tsx
@@ -1,27 +1,21 @@
 import { useBreakpointMatch } from '@automattic/jetpack-components';
+import { Panel, PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useReducer, useRef } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Icon, chevronDown } from '@wordpress/icons';
-import { Collapsible } from '@wordpress/ui';
+import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
+import { Button } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { ConnectForm } from './connect-form';
 import { ServiceItemDetails, ServicesItemDetailsProps } from './service-item-details';
 import { ServiceItemNotice } from './service-item-notice';
 import { ServiceStatus } from './service-status';
 import styles from './style.module.scss';
-import type { SyntheticEvent } from 'react';
 
 export type ServicesItemProps = ServicesItemDetailsProps & {
 	isPanelDefaultOpen?: boolean;
 };
 
-// Stops a child click from bubbling up to the surrounding
-// `Collapsible.Trigger`, which would otherwise toggle the disclosure
-// when the user is trying to interact with an inline control (e.g.
-// the "Connect" button or the broken-connection reauth flow).
-const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
-
 /**
  * Service item component
  *
@@ -36,13 +30,12 @@ export function ServiceItem( {
 }: ServicesItemProps ) {
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
-	const [ isPanelOpen, setIsPanelOpen ] = useState( Boolean( isPanelDefaultOpen ) );
-	const togglePanel = useCallback( () => setIsPanelOpen( open => ! open ), [] );
-	const rowRef = useRef< HTMLDivElement >( null );
+	const [ isPanelOpen, togglePanel ] = useReducer( state => ! state, isPanelDefaultOpen );
+	const panelRef = useRef< HTMLDivElement >( null );
 
 	useEffect( () => {
 		if ( isPanelDefaultOpen ) {
-			rowRef.current?.scrollIntoView( { block: 'center', behavior: 'smooth' } );
+			panelRef.current?.scrollIntoView( { block: 'center', behavior: 'smooth' } );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
@@ -75,14 +68,9 @@ export function ServiceItem( {
 			: _x( 'Fix connection', 'Fix social media connection', 'jetpack-publicize-pkg' );
 
 	return (
-		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
-			<Collapsible.Trigger
-				ref={ rowRef }
-				className={ styles[ 'service-row' ] }
-				nativeButton={ false }
-				render={ <div /> }
-			>
-				<div className={ styles[ 'service-row-icon' ] }>
+		<div className={ styles[ 'service-item' ] }>
+			<div className={ styles[ 'service-item-info' ] }>
+				<div>
 					<service.icon iconSize={ isSmall ? 36 : 48 } />
 				</div>
 				<div className={ styles[ 'service-basics' ] }>
@@ -98,13 +86,8 @@ export function ServiceItem( {
 						reauthConnections={ reauthConnections }
 					/>
 				</div>
-				{ ! hideInitialConnectForm ? (
-					<div
-						className={ styles.actions }
-						onClick={ stopPropagation }
-						onKeyDown={ stopPropagation }
-						role="presentation"
-					>
+				<div className={ styles.actions }>
+					{ ! hideInitialConnectForm ? (
 						<ConnectForm
 							service={ service }
 							isSmall={ isSmall }
@@ -114,12 +97,21 @@ export function ServiceItem( {
 							hasConnections={ serviceConnections.length > 0 }
 							buttonLabel={ hasOwnBrokenConnections ? buttonLabel : undefined }
 						/>
-					</div>
-				) : null }
-				<Icon className={ styles.chevron } icon={ chevronDown } />
-			</Collapsible.Trigger>
-			<Collapsible.Panel className={ styles[ 'service-panel' ] }>
-				<div className={ styles[ 'service-panel-inner' ] }>
+					) : null }
+					<Button
+						size={ 'small' }
+						className={ styles[ 'learn-more' ] }
+						variant="minimal"
+						onClick={ togglePanel }
+						aria-label={ __( 'Learn more', 'jetpack-publicize-pkg' ) }
+					>
+						{ <Icon className={ styles.chevron } icon={ isPanelOpen ? chevronUp : chevronDown } /> }
+					</Button>
+				</div>
+			</div>
+
+			<Panel className={ styles[ 'service-panel' ] } ref={ panelRef }>
+				<PanelBody opened={ isPanelOpen } onToggle={ togglePanel }>
 					<ServiceItemDetails service={ service } serviceConnections={ serviceConnections } />
 					<ServiceItemNotice service={ service } serviceConnections={ serviceConnections } />
 					{
@@ -136,8 +128,8 @@ export function ServiceItem( {
 							</div>
 						) : null
 					}
-				</div>
-			</Collapsible.Panel>
-		</Collapsible.Root>
+				</PanelBody>
+			</Panel>
+		</div>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/services/services-list.tsx b/projects/packages/publicize/_inc/components/services/services-list.tsx
index ba285255547d..1c0a877c6934 100644
--- a/projects/packages/publicize/_inc/components/services/services-list.tsx
+++ b/projects/packages/publicize/_inc/components/services/services-list.tsx
@@ -1,6 +1,5 @@
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { Card } from '@wordpress/ui';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import { ServiceItem } from './service-item';
@@ -37,18 +36,16 @@ export function ServicesList() {
 	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
 
 	return (
-		<Card.Root>
-			<ul className={ styles.services }>
-				{ supportedServices.map( service => (
-					<li key={ service.id } className={ styles[ 'service-list-item' ] }>
-						<ServiceItem
-							service={ service }
-							serviceConnections={ connections[ service.id ] || [] }
-							isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
-						/>
-					</li>
-				) ) }
-			</ul>
-		</Card.Root>
+		<ul className={ styles.services }>
+			{ supportedServices.map( service => (
+				<li key={ service.id } className={ styles[ 'service-list-item' ] }>
+					<ServiceItem
+						service={ service }
+						serviceConnections={ connections[ service.id ] || [] }
+						isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
+					/>
+				</li>
+			) ) }
+		</ul>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/services/style.module.scss b/projects/packages/publicize/_inc/components/services/style.module.scss
index 2b40d4981280..3024f4b8ac22 100644
--- a/projects/packages/publicize/_inc/components/services/style.module.scss
+++ b/projects/packages/publicize/_inc/components/services/style.module.scss
@@ -1,53 +1,87 @@
 @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
 .services {
-	display: flex;
-	flex-direction: column;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-
-	// Rows after the first get a top border so the dividers between
-	// them read as one continuous list. The first row sits flush with
-	// the Card.Root's own top edge — adding a border-top there would
-	// double up against the card's own border line.
+	outline: 1px solid var(--jp-gray-5);
+	border-radius: 4px;
+
 	.service-list-item {
-		margin: 0;
+		margin-bottom: 0;
 
-		&:not(:first-child) {
-			border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--jp-gray-5);
 		}
 	}
 
-	.service-basics {
+	.service-item {
+		padding: 0.75rem;
+
+		@include gb.break-small {
+			padding: 1rem;
+		}
+	}
+
+	.service-item-info {
 		display: flex;
+		gap: 1rem;
+		align-items: center;
+	}
+
+	.service-basics {
 		flex: 1;
+		display: flex;
 		flex-direction: column;
-		gap: var(--wpds-dimension-gap-xs, 4px);
-		min-width: 0;
+		gap: 0.25rem;
 	}
 
 	.heading {
-		align-items: center;
 		display: flex;
-		gap: var(--wpds-dimension-gap-lg, 16px);
+		gap: 1rem;
+		align-items: center;
 	}
 
 	.title {
-		color: var(--wpds-color-fg-content-neutral, var(--jp-gray-80));
-		font-size: 0.875rem;
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
-		line-height: 1.4;
+		font-size: 16px;
+		line-height: 24px;
+		font-weight: 600;
+		color: var(--jp-gray-80);
 	}
 
 	.description {
-		color: var(--wpds-color-fg-content-neutral-weak, #757575);
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		font-size: 14px;
+		color: var(--jp-gray-50);
 	}
 
 	.actions {
 		display: flex;
-		gap: var(--wpds-dimension-gap-sm, 8px);
+		gap: 0.5rem;
+	}
+
+	.learn-more {
+
+		&:global(.components-button) {
+			padding-inline: 6px;
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+
+			span {
+				display: flex;
+			}
+		}
+	}
+
+	.service-panel {
+		border: 0;
+
+		:global(.components-panel__body) {
+			border-top: 0;
+			border-bottom: 0;
+			padding: 0;
+		}
+
+		:global(.components-panel__body.is-opened) {
+			margin-top: 1rem;
+		}
 	}
 
 	.active-connection {
@@ -74,69 +108,6 @@
 	}
 }
 
-// Flat clickable row used as the `Collapsible.Trigger` for each service.
-// Layout mirrors `.connection-row` in connection-management so the modal
-// and the chassis Overview share the same visual language.
-.service-row {
-	align-items: center;
-	cursor: var(--wpds-cursor-control, pointer);
-	display: flex;
-	gap: var(--wpds-dimension-gap-lg, 16px);
-	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
-	width: 100%;
-
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
-	}
-
-	&[data-panel-open] {
-
-		.chevron {
-			rotate: 180deg;
-		}
-	}
-}
-
-.service-row-icon {
-	flex-shrink: 0;
-}
-
-.chevron {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	flex-shrink: 0;
-	transition: rotate 0.15s ease-out;
-
-	@media (prefers-reduced-motion) {
-		transition: none;
-	}
-}
-
-// Collapsible.Panel — height transition driven by `--collapsible-panel-height`
-// set by Base UI. Mirrors the WPDS CollapsibleCard.Content rule so the
-// services panels animate in/out at the same cadence.
-.service-panel {
-	height: var(--collapsible-panel-height);
-	overflow: hidden;
-
-	&[hidden]:not([hidden="until-found"]) {
-		display: none;
-	}
-
-	&[data-ending-style],
-	&[data-starting-style] {
-		height: 0;
-	}
-
-	@media not (prefers-reduced-motion) {
-		transition: all 0.15s ease-out;
-	}
-}
-
-.service-panel-inner {
-	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
-}
-
 .example-wrapper {
 	display: grid;
 	grid-auto-columns: minmax(0, 1fr);
@@ -229,7 +200,6 @@
 		flex-direction: column;
 		gap: 0.5rem;
 		flex-basis: 100%;
-		min-width: 220px;
 
 		@include gb.break-medium {
 			flex-basis: 50%;
@@ -242,38 +212,36 @@
 			}
 		}
 	}
-}
-
-.mark-shared-wrap {
-	align-items: center;
-	display: flex;
-	gap: var(--wpds-dimension-gap-sm, 8px);
-}
 
-.mark-shared-help {
-	align-items: center;
-	background: transparent;
-	border: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	cursor: var(--wpds-cursor-control, pointer);
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	padding: 0;
-	width: 24px;
-
-	&:hover,
-	&:focus-visible {
-		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	label {
+		font-weight: 600;
 	}
 
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: var(--wpds-border-width-focus, 2px);
+	input {
+		min-width: 220px;
+		height: auto;
+		font-size: var(--font-body);
+		line-height: 22px;
+		padding: var(--spacing-base) calc(var(--spacing-base) * 3); // To make the inputs of the same size as the Connect button
+
+		// Override the default input styles for small screens
+		@media (max-width: #{ (gb.$break-medium) }) {
+			padding: 0 8px;
+			font-size: 14px;
+		}
+
+		&.error {
+			border-color: var(--jp-red);
+			box-shadow: 0 0 0 1px var(--jp-red);
+		}
 	}
 }
 
+.mark-shared-wrap {
+	display: flex;
+	gap: 0.5rem;
+}
+
 .error-text.error-text {
 	color: var(--jp-red);
 	font-style: italic;

From 69579fc5ba4fbc6bd270660ff0dee908bd2311a0 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 22:35:53 -0300
Subject: [PATCH 08/11] Social: revert legacy/block-editor WPDS polyfills now
 that gating is in place

Commits 8a1e85d and fe74066 added WP_Build_Polyfills registration to the
legacy admin bundle and the block-editor bundle, plus a Tooltip.Provider
at the legacy entry point, solely to keep the WPDS components that had
leaked into those bundles working on WP < 7.0. With the modernization
gated out of the legacy/block-editor surfaces the leaked `wp-theme`
handle is gone, so these match trunk again and the extra registration is
dead weight. Reverted to trunk.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../_inc/entry-points/social-admin-page.tsx          |  5 +----
 .../publicize/src/class-publicize-assets.php         | 12 ------------
 .../publicize/src/class-social-admin-page.php        | 11 -----------
 3 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx b/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
index bace25b41a11..55353ca8d3b2 100644
--- a/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
+++ b/projects/packages/publicize/_inc/entry-points/social-admin-page.tsx
@@ -1,7 +1,6 @@
 import '../utils/public-path.js';
 import { ThemeProvider } from '@automattic/jetpack-components';
 import * as WPElement from '@wordpress/element';
-import { Tooltip } from '@wordpress/ui';
 import { SocialAdminPage } from '../components/admin-page';
 
 /**
@@ -16,9 +15,7 @@ function render() {
 
 	const component = (
 		<ThemeProvider targetDom={ document.body }>
-			<Tooltip.Provider delay={ 0 }>
-				<SocialAdminPage />
-			</Tooltip.Provider>
+			<SocialAdminPage />
 		</ThemeProvider>
 	);
 	WPElement.createRoot( container ).render( component );
diff --git a/projects/packages/publicize/src/class-publicize-assets.php b/projects/packages/publicize/src/class-publicize-assets.php
index f815b4179ee6..3d89e39e39df 100644
--- a/projects/packages/publicize/src/class-publicize-assets.php
+++ b/projects/packages/publicize/src/class-publicize-assets.php
@@ -62,18 +62,6 @@ public static function enqueue_block_editor_scripts() {
 		wp_dequeue_script( 'jetpack-social-editor' );
 		wp_dequeue_style( 'jetpack-social-editor' );
 
-		// The block-editor bundle's dep tree includes `wp-theme` and
-		// `wp-private-apis` via its `@wordpress/ui` imports. Those handles
-		// don't exist on WordPress < 7.0, so we use the same polyfill
-		// registry the chassis does — otherwise WP silently drops the
-		// script and the Social sidebar disappears from the post editor.
-		if ( class_exists( '\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills' ) ) {
-			\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::register(
-				'jetpack-social',
-				\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::SCRIPT_HANDLES
-			);
-		}
-
 		Assets::register_script(
 			'jetpack-social-editor',
 			sprintf( '../build/%s.js', $script_to_load ),
diff --git a/projects/packages/publicize/src/class-social-admin-page.php b/projects/packages/publicize/src/class-social-admin-page.php
index 342cdb8f9ded..422a440bfd3f 100644
--- a/projects/packages/publicize/src/class-social-admin-page.php
+++ b/projects/packages/publicize/src/class-social-admin-page.php
@@ -184,17 +184,6 @@ public function enqueue_admin_scripts() {
 		wp_dequeue_script( 'jetpack-social' );
 		wp_dequeue_style( 'jetpack-social' );
 
-		// The legacy bundle pulls `wp-theme` / `wp-private-apis` through its
-		// `@wordpress/ui` imports. Those handles don't exist on WordPress < 7.0,
-		// so we use the same polyfill registry the chassis does — otherwise WP
-		// silently drops the script because of an unresolved dependency.
-		if ( class_exists( '\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills' ) ) {
-			\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::register(
-				'jetpack-social',
-				\Automattic\Jetpack\WP_Build_Polyfills\WP_Build_Polyfills::SCRIPT_HANDLES
-			);
-		}
-
 		Assets::register_script(
 			'social-admin-page',
 			'../build/social-admin-page.js',

From 97c39649dcf47be453c7b3130fc514d3cfe8c925 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 22:46:52 -0300
Subject: [PATCH 09/11] Social: add chassis-only modern connection/modal
 components behind the flag

Reintroduces the WPDS modernization as chassis-only `*-modern` copies
(ModernConnectionInfo, the modern Add-account modal, services list/items,
custom inputs) with their own SCSS, plus the free-plan template upsell.
Shared shells (ConnectionManagement, ThemedConnectionsModal,
ServiceItemDetails, ConnectForm, ConnectionTemplateEditor) now pick the
modern variant via `useIsModernized()`, so only the chassis renders them;
the legacy admin page and block editor keep the trunk UI. ConnectionName,
Disconnect, and ConnectForm gain backward-compatible props the modern
copies use. The connection-template global-message read is gated to the
modern path so legacy data dependencies match trunk.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../connection-info-modern.tsx                | 128 ++++++++
 .../connection-management/connection-name.tsx |  15 +-
 .../connection-template/index.tsx             | 104 ++++++-
 .../connection-management/disconnect.tsx      |  20 +-
 .../connection-management/index.tsx           |   6 +-
 .../style-modern.module.scss                  | 196 ++++++++++++
 .../tests/specs/connection-template.test.jsx  |  62 ++++
 .../manage-connections-modal/index-modern.tsx |  91 ++++++
 .../manage-connections-modal/index.tsx        |   7 +-
 .../style-modern.module.scss                  |  31 ++
 .../_inc/components/services/connect-form.tsx |  21 +-
 .../services/custom-inputs-modern.tsx         | 174 +++++++++++
 .../service-connection-info-modern.tsx        | 122 ++++++++
 .../services/service-item-details.tsx         |   8 +-
 .../services/service-item-modern.tsx          | 145 +++++++++
 .../services/services-list-modern.tsx         |  54 ++++
 .../services/style-modern.module.scss         | 280 ++++++++++++++++++
 17 files changed, 1439 insertions(+), 25 deletions(-)
 create mode 100644 projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
 create mode 100644 projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
 create mode 100644 projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/services/service-item-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/services/services-list-modern.tsx
 create mode 100644 projects/packages/publicize/_inc/components/services/style-modern.module.scss

diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
new file mode 100644
index 000000000000..b37d7b6d055c
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
@@ -0,0 +1,128 @@
+import { Text } from '@automattic/jetpack-components';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronDown, info } from '@wordpress/icons';
+import { Collapsible, Tooltip } from '@wordpress/ui';
+import { store as socialStore } from '../../social-store';
+import ConnectionIcon from '../connection-icon';
+import { XNotice } from '../services/x-notice';
+import { ConnectionName } from './connection-name';
+import { ConnectionStatus, ConnectionStatusProps } from './connection-status';
+import { ConnectionTemplateEditor } from './connection-template';
+import { Disconnect } from './disconnect';
+import { MarkAsShared } from './mark-as-shared';
+import styles from './style-modern.module.scss';
+import type { SyntheticEvent } from 'react';
+
+type ConnectionInfoProps = ConnectionStatusProps & {
+	canMarkAsShared: boolean;
+};
+
+const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
+
+/**
+ * Connection info component
+ *
+ * @param {ConnectionInfoProps} props - component props
+ *
+ * @return React element
+ */
+export function ModernConnectionInfo( {
+	connection,
+	service,
+	canMarkAsShared,
+}: ConnectionInfoProps ) {
+	const [ isPanelOpen, setIsPanelOpen ] = useState( false );
+
+	const { canManageConnection, isUnsupported } = useSelect(
+		select => {
+			const { canUserManageConnection, getServicesBy } = select( socialStore );
+
+			return {
+				canManageConnection: canUserManageConnection( connection ),
+				isUnsupported: getServicesBy( 'status', 'unsupported' ).some(
+					( { id } ) => id === connection.service_name
+				),
+			};
+		},
+		[ connection ]
+	);
+
+	const hasStatus =
+		connection.status === 'broken' || connection.status === 'must_reauth' || isUnsupported;
+
+	const markAsSharedHelp = __(
+		'If enabled, the connection will be available to all administrators, editors, and authors.',
+		'jetpack-publicize-pkg'
+	);
+
+	return (
+		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
+			<Collapsible.Trigger
+				className={ styles[ 'connection-row' ] }
+				nativeButton={ false }
+				render={ <div /> }
+			>
+				<ConnectionIcon
+					serviceName={ connection.service_name }
+					label={ connection.display_name }
+					profilePicture={ connection.profile_picture }
+					size="medium"
+				/>
+				<div className={ styles[ 'connection-name-wrapper' ] }>
+					<div className={ styles[ 'connection-item-name' ] }>
+						<ConnectionName connection={ connection } tone="neutral" />
+					</div>
+					{ hasStatus ? (
+						<div
+							className={ styles[ 'connection-status-wrap' ] }
+							onClick={ stopPropagation }
+							onKeyDown={ stopPropagation }
+							role="presentation"
+						>
+							<ConnectionStatus connection={ connection } service={ service } />
+						</div>
+					) : (
+						<span className={ styles[ 'connection-network' ] }>{ service?.label }</span>
+					) }
+				</div>
+				<Icon className={ styles.chevron } icon={ chevronDown } />
+			</Collapsible.Trigger>
+			<Collapsible.Panel className={ styles[ 'connection-panel' ] }>
+				<div className={ styles[ 'connection-panel-inner' ] }>
+					{ canMarkAsShared && (
+						<div className={ styles[ 'mark-shared-wrap' ] }>
+							<MarkAsShared connection={ connection } />
+							<Tooltip.Root>
+								<Tooltip.Trigger
+									render={
+										<button
+											type="button"
+											className={ styles[ 'mark-shared-help' ] }
+											aria-label={ markAsSharedHelp }
+										>
+											<Icon icon={ info } size={ 18 } />
+										</button>
+									}
+								/>
+								<Tooltip.Popup sideOffset={ 8 }>{ markAsSharedHelp }</Tooltip.Popup>
+							</Tooltip.Root>
+						</div>
+					) }
+					<div className={ styles[ 'connection-template-wrap' ] }>
+						<ConnectionTemplateEditor connection={ connection } />
+					</div>
+					{ canManageConnection ? (
+						<Disconnect connection={ connection } size="compact" tone="neutral" />
+					) : (
+						<Text className={ styles.description }>
+							{ __( 'This connection is added by a site administrator.', 'jetpack-publicize-pkg' ) }
+						</Text>
+					) }
+					{ service?.id === 'x' && <XNotice /> }
+				</div>
+			</Collapsible.Panel>
+		</Collapsible.Root>
+	);
+}
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
index 4188ee85115f..abb6fc5268a3 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-name.tsx
@@ -8,16 +8,20 @@ import styles from './style.module.scss';
 
 type ConnectionNameProps = {
 	connection: Connection;
+	/** Link tone. Defaults to the WPDS link default; the modernized chassis passes "neutral". */
+	tone?: 'neutral';
 };
 
 /**
  * Connection name component
  *
- * @param {ConnectionNameProps} props - component props
+ * @param {ConnectionNameProps} props            - component props
+ * @param {Connection}          props.connection - the connection to render
+ * @param {string}              props.tone       - optional WPDS link tone
  *
  * @return {import('react').ReactNode} - React element
  */
-export function ConnectionName( { connection }: ConnectionNameProps ) {
+export function ConnectionName( { connection, tone }: ConnectionNameProps ) {
 	const isUpdating = useSelect(
 		select => {
 			return select( socialStore ).getUpdatingConnections().includes( connection.connection_id );
@@ -30,7 +34,12 @@ export function ConnectionName( { connection }: ConnectionNameProps ) {
 			{ ! connection.profile_link ? (
 				<span className={ styles[ 'profile-link' ] }>{ connection.display_name }</span>
 			) : (
-				<Link openInNewTab className={ styles[ 'profile-link' ] } href={ connection.profile_link }>
+				<Link
+					openInNewTab
+					tone={ tone }
+					className={ styles[ 'profile-link' ] }
+					href={ connection.profile_link }
+				>
 					{ connection.display_name }
 				</Link>
 			) }
diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
index 563fa4ef617b..b6773e742fde 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-template/index.tsx
@@ -1,8 +1,18 @@
-import { siteHasFeature } from '@automattic/jetpack-script-data';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { isSimpleSite, siteHasFeature } from '@automattic/jetpack-script-data';
+import { getSiteFragment, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { useDebounce } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
+import { useIsModernized } from '../../../hooks/use-is-modernized';
 import { store as socialStore } from '../../../social-store';
 import { Connection } from '../../../social-store/types';
 import { features } from '../../../utils/constants';
@@ -25,28 +35,46 @@ const HELP_TEXT = __(
 	'jetpack-publicize-pkg'
 );
 
+const LABEL = __( 'Custom message for this connection', 'jetpack-publicize-pkg' );
+
+const NOOP = () => {};
+
 /**
  * Per-connection message template editor.
  *
- * Renders only when the site has the `social-message-templates` feature
- * AND the `social-enhanced-publishing` paid plan, AND the user can manage
- * the connection. Auto-saves through `updateConnectionById` after the user
- * pauses typing.
+ * Renders the live editor when the site has the `social-message-templates`
+ * feature AND the `social-enhanced-publishing` paid plan, AND the user can
+ * manage the connection. On Jetpack sites that don't qualify, renders a
+ * disabled-textarea variant with an Upgrade link instead, so free-plan users
+ * still see what unlocks with an upgrade.
  *
  * @param {ConnectionTemplateEditorProps} props - The component's props.
- * @return The rendered editor, or `null` when gated out.
+ * @return The rendered editor or its locked upsell variant.
  */
 export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps ) {
 	const { connection } = props;
 
-	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
-	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
-
-	const canManageConnection = useSelect(
-		select => select( socialStore ).canUserManageConnection( connection ),
-		[ connection ]
+	const isModernized = useIsModernized();
+
+	const { canManageConnection, globalTemplate } = useSelect(
+		select => ( {
+			canManageConnection: select( socialStore ).canUserManageConnection( connection ),
+			// Only the modernized chassis renders the gated upsell, which is the
+			// only consumer of the global default message. Keeping this read out
+			// of the legacy path preserves the trunk data dependencies exactly.
+			globalTemplate: isModernized
+				? select( socialStore ).getSocialSettings().messageTemplate ?? ''
+				: '',
+		} ),
+		[ connection, isModernized ]
 	);
 
+	const { recordEvent } = useAnalytics();
+
+	const onUpgradeClick = useCallback( () => {
+		recordEvent( 'jetpack_social_per_network_customization_upgrade_click' );
+	}, [ recordEvent ] );
+
 	const savedTemplate = connection.template ?? '';
 
 	const [ draft, setDraft ] = useState( savedTemplate );
@@ -83,14 +111,60 @@ export function ConnectionTemplateEditor( props: ConnectionTemplateEditorProps )
 		[ debouncedSave ]
 	);
 
-	if ( ! featureEnabled || ! planEnabled || ! canManageConnection ) {
+	if ( ! canManageConnection ) {
 		return null;
 	}
 
+	const featureEnabled = siteHasFeature( features.MESSAGE_TEMPLATES );
+	const planEnabled = siteHasFeature( features.ENHANCED_PUBLISHING );
+
+	if ( ! featureEnabled || ! planEnabled ) {
+		// The free-plan upsell ships only in the modernized chassis. The legacy
+		// admin page and block editor keep the trunk behavior (no editor when
+		// the plan/feature is missing).
+		if ( ! isModernized || isSimpleSite() ) {
+			return null;
+		}
+
+		const upgradeUrl = getRedirectUrl( 'jetpack-social-per-connection-template-upsell', {
+			site: getSiteFragment() || '',
+			query: 'redirect_to=' + encodeURIComponent( window.location.href ),
+		} );
+
+		const upsellHelp = createInterpolateElement(
+			__(
+				'Showing your default share message. To customize it for this account, <a>upgrade your plan</a>.',
+				'jetpack-publicize-pkg'
+			),
+			{
+				a: (
+					<Link href={ upgradeUrl } onClick={ onUpgradeClick } openInNewTab>
+						{ null }
+					</Link>
+				),
+			}
+		);
+
+		return (
+			<div className={ styles.editor }>
+				<MessageTemplateEditor
+					label={ LABEL }
+					placeholder=""
+					helpText={ upsellHelp }
+					value={ globalTemplate }
+					onChange={ NOOP }
+					disabled
+					rows={ 3 }
+					showPlaceholders={ false }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div className={ styles.editor }>
 			<MessageTemplateEditor
-				label={ __( 'Custom message for this connection', 'jetpack-publicize-pkg' ) }
+				label={ LABEL }
 				placeholder={ PLACEHOLDER_TEXT }
 				helpText={ HELP_TEXT }
 				value={ draft }
diff --git a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
index 004718654d52..b4e49de525db 100644
--- a/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/disconnect.tsx
@@ -10,15 +10,28 @@ import styles from './style.module.scss';
 export type DisconnectProps = {
 	connection: Connection;
 	variant?: 'outline' | 'minimal' | 'link';
+	/** Button size. Defaults to "small"; the modernized chassis passes "compact". */
+	size?: 'small' | 'compact';
+	/** Button tone. Defaults to the WPDS default; the modernized chassis passes "neutral". */
+	tone?: 'neutral';
 };
 /**
  * Disconnect component
  *
- * @param {DisconnectProps} props - component props
+ * @param {DisconnectProps} props            - component props
+ * @param {Connection}      props.connection - the connection to disconnect
+ * @param {string}          props.variant    - button variant
+ * @param {string}          props.size       - button size
+ * @param {string}          props.tone       - button tone
  *
  * @return {import('react').ReactNode} - React element
  */
-export function Disconnect( { connection, variant = 'outline' }: DisconnectProps ) {
+export function Disconnect( {
+	connection,
+	variant = 'outline',
+	size = 'small',
+	tone,
+}: DisconnectProps ) {
 	const [ isConfirmOpen, toggleConfirm ] = useReducer( state => ! state, false );
 
 	const { deleteConnectionById } = useDispatch( socialStore );
@@ -94,7 +107,8 @@ export function Disconnect( { connection, variant = 'outline' }: DisconnectProps
 				</Link>
 			) : (
 				<Button
-					size="small"
+					size={ size }
+					tone={ tone }
 					variant={ variant }
 					onClick={ toggleConfirm }
 					disabled={ isDisconnecting }
diff --git a/projects/packages/publicize/_inc/components/connection-management/index.tsx b/projects/packages/publicize/_inc/components/connection-management/index.tsx
index 15567a6f6007..f7f805fbcdf1 100644
--- a/projects/packages/publicize/_inc/components/connection-management/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/index.tsx
@@ -4,12 +4,14 @@ import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
+import { useIsModernized } from '../../hooks/use-is-modernized';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store } from '../../social-store';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
 import { useService } from '../services/use-service';
 import { ConnectionInfo } from './connection-info';
+import { ModernConnectionInfo } from './connection-info-modern';
 import styles from './style.module.scss';
 
 const ConnectionManagement = ( {
@@ -18,6 +20,8 @@ const ConnectionManagement = ( {
 	hideConnectButton = false,
 	hideHeading = false,
 } ) => {
+	const isModernized = useIsModernized();
+	const ConnectionInfoVariant = isModernized ? ModernConnectionInfo : ConnectionInfo;
 	const { refresh } = useSocialMediaConnections();
 
 	const { connections, deletingConnections, updatingConnections } = useSelect( select => {
@@ -65,7 +69,7 @@ const ConnectionManagement = ( {
 							return (
 								<li className={ styles[ 'connection-list-item' ] } key={ connection.connection_id }>
 									<Disabled isDisabled={ isUpdatingOrDeleting }>
-										<ConnectionInfo
+										<ConnectionInfoVariant
 											connection={ connection }
 											service={ getService( connection.service_name ) }
 											canMarkAsShared={ canMarkAsShared }
diff --git a/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss b/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
new file mode 100644
index 000000000000..0a8fc58bf078
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
@@ -0,0 +1,196 @@
+.wrapper {
+	align-items: start;
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-xl, 24px);
+	padding-top: var(--wpds-dimension-padding-lg, 16px);
+	width: 100%;
+
+	> h3 {
+		margin-block: 0;
+	}
+}
+
+.connection-name {
+	align-items: center;
+	display: flex;
+
+	:global(.components-spinner) {
+		margin-top: 0;
+	}
+
+	span.profile-link,
+	.profile-link:global(.components-external-link) {
+		color: inherit;
+		text-decoration: none;
+
+		>svg {
+			vertical-align: bottom;
+		}
+
+		span {
+			text-decoration: none;
+		}
+	}
+
+	.profile-link:global(.components-external-link):hover {
+		text-decoration: underline;
+	}
+
+	span {
+		text-decoration: none;
+	}
+}
+
+.confirmDialog span {
+	font-size: var(--wpds-typography-font-size-lg, 15px);
+}
+
+.description {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: 0.875rem;
+}
+
+.connection-list {
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+
+	*[inert="true"] {
+		opacity: 0.7;
+	}
+
+	// Every row gets a top border so the first row also sits below a
+	// divider line that separates it from the surrounding Card.Header
+	// (or whatever chrome wraps the list).
+	.connection-list-item {
+		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
+		margin: 0;
+	}
+}
+
+// Flat row that doubles as the Collapsible.Trigger. Click anywhere on the
+// row (outside of the name link / status actions) toggles the disclosure;
+// the chevron rotates 180° via `[data-panel-open]` set by Base UI.
+.connection-row {
+	align-items: center;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: flex;
+	gap: var(--wpds-dimension-gap-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+	width: 100%;
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
+	}
+}
+
+.connection-name-wrapper {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-xs, 4px);
+	min-width: 0;
+}
+
+.connection-item-name {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: 0.875rem;
+	font-weight: var(--wpds-typography-font-weight-medium, 499);
+}
+
+.connection-network {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+}
+
+.connection-status-wrap {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-xs, 4px);
+}
+
+.chevron {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	flex-shrink: 0;
+	transition: rotate 0.15s ease-out;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+.connection-row[data-panel-open] {
+
+	.chevron {
+		rotate: 180deg;
+	}
+}
+
+// Collapsible.Panel — collapses to height 0 with a smooth height transition.
+// `--collapsible-panel-height` is supplied by Base UI so we mirror what the
+// WPDS CollapsibleCard.Content rule does.
+.connection-panel {
+	height: var(--collapsible-panel-height);
+	overflow: hidden;
+
+	&[hidden]:not([hidden="until-found"]) {
+		display: none;
+	}
+
+	&[data-ending-style],
+	&[data-starting-style] {
+		height: 0;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-out;
+	}
+}
+
+.connection-panel-inner {
+	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
+}
+
+.mark-shared-wrap {
+	align-items: center;
+	display: flex;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+	padding-bottom: var(--wpds-dimension-padding-lg, 16px);
+}
+
+.mark-shared-help {
+	align-items: center;
+	background: transparent;
+	border: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	padding: 0;
+	width: 24px;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	}
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: var(--wpds-border-width-focus, 2px);
+	}
+}
+
+.connection-template-wrap {
+	margin-bottom: var(--wpds-dimension-gap-xl, 24px);
+
+	&:empty {
+		margin-bottom: 0;
+	}
+}
diff --git a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
index 8e4149a414ce..2476d24ecfc7 100644
--- a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
+++ b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-template.test.jsx
@@ -1,5 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ModernizationProvider } from '../../../../hooks/use-is-modernized';
 import { setup } from '../../../../utils/test-factory';
 import { clearMockedScriptData, mockScriptData } from '../../../../utils/test-utils';
 import { ConnectionTemplateEditor } from '../../connection-template';
@@ -17,6 +18,17 @@ const setupFeatures = ( ...active ) => {
 	} );
 };
 
+const setupGated = ( overrides = {} ) => {
+	mockScriptData( {
+		site: { plan: { features: { active: [] } }, ...overrides.site },
+		social: overrides.social,
+	} );
+};
+
+// Renders inside the chassis modernization context, where the gated upsell
+// variant is shown.
+const renderModernized = ui => render( <ModernizationProvider>{ ui }</ModernizationProvider> );
+
 describe( 'ConnectionTemplateEditor', () => {
 	afterEach( () => {
 		clearMockedScriptData();
@@ -82,4 +94,54 @@ describe( 'ConnectionTemplateEditor', () => {
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
+
+	describe( 'modernized chassis (gated upsell)', () => {
+		test( 'renders the locked upsell variant when the message-templates feature is off', () => {
+			setupFeatures( 'social-enhanced-publishing' );
+			setup();
+
+			renderModernized( <ConnectionTemplateEditor connection={ FB } /> );
+
+			const textarea = screen.getByRole( 'textbox', {
+				name: /Custom message for this connection/i,
+			} );
+			expect( textarea ).toBeDisabled();
+			expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders the locked upsell variant when the enhanced-publishing plan is off', () => {
+			setupFeatures( 'social-message-templates' );
+			setup();
+
+			renderModernized( <ConnectionTemplateEditor connection={ FB } /> );
+
+			const textarea = screen.getByRole( 'textbox', {
+				name: /Custom message for this connection/i,
+			} );
+			expect( textarea ).toBeDisabled();
+			expect( screen.getByRole( 'link', { name: /upgrade your plan/i } ) ).toBeInTheDocument();
+		} );
+
+		test( 'surfaces the global default message inside the locked textarea', () => {
+			setupGated( {
+				social: { settings: { messageTemplate: 'Read my latest: {url}' } },
+			} );
+			setup();
+
+			renderModernized( <ConnectionTemplateEditor connection={ FB } /> );
+
+			expect(
+				screen.getByRole( 'textbox', { name: /Custom message for this connection/i } )
+			).toHaveValue( 'Read my latest: {url}' );
+		} );
+
+		test( 'renders nothing on Simple sites when the editor is gated', () => {
+			setupGated( { site: { host: 'wpcom' } } );
+			setup();
+
+			const { container } = renderModernized( <ConnectionTemplateEditor connection={ FB } /> );
+
+			expect( container ).toBeEmptyDOMElement();
+		} );
+	} );
 } );
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
new file mode 100644
index 000000000000..b68fcb026c2b
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
@@ -0,0 +1,91 @@
+import { getRedirectUrl, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Modal } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import { Link, Text, Tooltip } from '@wordpress/ui';
+import clsx from 'clsx';
+import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
+import { store } from '../../social-store';
+import { ModernServicesList } from '../services/services-list-modern';
+import { ConfirmationForm } from './confirmation-form';
+import styles from './style-modern.module.scss';
+
+export const ModernManageConnectionsModal = () => {
+	const { keyringResult } = useSelect( select => {
+		const { getKeyringResult } = select( store );
+
+		return {
+			keyringResult: getKeyringResult(),
+		};
+	}, [] );
+
+	const { setKeyringResult, closeConnectionsModal, setReconnectingAccount } = useDispatch( store );
+
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
+	const closeModal = useCallback( () => {
+		setKeyringResult( null );
+		setReconnectingAccount( undefined );
+		closeConnectionsModal();
+	}, [ closeConnectionsModal, setKeyringResult, setReconnectingAccount ] );
+
+	const hasKeyringResult = Boolean( keyringResult?.ID );
+
+	const title = hasKeyringResult
+		? __( 'Connection confirmation', 'jetpack-publicize-pkg' )
+		: _x( 'Manage Jetpack Social connections', '', 'jetpack-publicize-pkg' );
+
+	const canMarkAsShared = useUserCanShareConnection();
+
+	return (
+		<Tooltip.Provider delay={ 0 }>
+			<Modal
+				className={ clsx( styles.modal, {
+					[ styles.small ]: isSmall,
+					// Pin the frame to its max height while listing services so
+					// expanding a disclosure row scrolls inside the modal instead
+					// of resizing (and re-centering) the whole frame. The short
+					// confirmation view keeps its natural, content-sized height.
+					[ styles[ 'services-list' ] ]: ! hasKeyringResult,
+				} ) }
+				onRequestClose={ closeModal }
+				title={ title }
+			>
+				{
+					//Use IIFE to avoid nested ternary
+					( () => {
+						if ( hasKeyringResult ) {
+							return (
+								<ConfirmationForm
+									keyringResult={ keyringResult }
+									onComplete={ closeModal }
+									canMarkAsShared={ canMarkAsShared }
+								/>
+							);
+						}
+
+						return (
+							<>
+								<ModernServicesList />
+								<Text variant="body-sm" render={ <p className={ styles[ 'manual-share' ] } /> }>
+									{ __(
+										'Want to share to other networks? Use our Manual Sharing feature from the editor.',
+										'jetpack-publicize-pkg'
+									) }
+									&nbsp;
+									<Link
+										openInNewTab
+										href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
+									>
+										{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
+									</Link>
+								</Text>
+							</>
+						);
+					} )()
+				}
+			</Modal>
+		</Tooltip.Provider>
+	);
+};
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
index 582524c00db8..34997bcbdd0b 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index.tsx
@@ -10,10 +10,12 @@ import { useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
+import { useIsModernized } from '../../hooks/use-is-modernized';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store } from '../../social-store';
 import { ServicesList } from '../services/services-list';
 import { ConfirmationForm } from './confirmation-form';
+import { ModernManageConnectionsModal } from './index-modern';
 import styles from './style.module.scss';
 
 export const ManageConnectionsModal = () => {
@@ -100,13 +102,16 @@ export const ManageConnectionsModal = () => {
  * @return {import('react').ReactNode} - React element
  */
 export function ThemedConnectionsModal() {
+	const isModernized = useIsModernized();
 	const shouldModalBeOpen = useSelect( select => {
 		return select( store ).isConnectionsModalOpen();
 	}, [] );
 
+	const Connections = isModernized ? ModernManageConnectionsModal : ManageConnectionsModal;
+
 	return (
 		<ThemeProvider targetDom={ document.body }>
-			{ shouldModalBeOpen ? <ManageConnectionsModal /> : null }
+			{ shouldModalBeOpen ? <Connections /> : null }
 		</ThemeProvider>
 	);
 }
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss b/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
new file mode 100644
index 000000000000..b22777963f0b
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
@@ -0,0 +1,31 @@
+.modal.modal {
+	width: 65rem;
+}
+
+// While the services list is shown (i.e. not the compact confirmation view),
+// occupy the full max-height the WP Modal allows so the frame stays a fixed
+// size as disclosure rows expand/collapse. Without this the frame is
+// content-sized and, being vertically centered, shifts upward when a row
+// expands past the max-height threshold. Mobile (`.small`) keeps WordPress's
+// full-screen treatment untouched.
+.modal.services-list:not(.small) {
+	height: 100%;
+}
+
+.connect-form {
+	display: grid;
+	gap: 0.5rem;
+
+	>input {
+		height: 100%;
+		width: 18rem;
+	}
+
+	&:not(.small) {
+		grid-auto-flow: column;
+	}
+}
+
+.manual-share {
+	padding-block: 2rem;
+}
diff --git a/projects/packages/publicize/_inc/components/services/connect-form.tsx b/projects/packages/publicize/_inc/components/services/connect-form.tsx
index 94600acded6a..c7831681c9e6 100644
--- a/projects/packages/publicize/_inc/components/services/connect-form.tsx
+++ b/projects/packages/publicize/_inc/components/services/connect-form.tsx
@@ -3,9 +3,11 @@ import { useCallback, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
+import { useIsModernized } from '../../hooks/use-is-modernized';
 import { store } from '../../social-store';
 import { KeyringResult } from '../../social-store/types';
 import { CustomInputs } from './custom-inputs';
+import { ModernCustomInputs } from './custom-inputs-modern';
 import styles from './style.module.scss';
 import { SupportedService } from './types';
 import { useRequestAccess } from './use-request-access';
@@ -18,6 +20,8 @@ type ConnectFormProps = {
 	displayInputs?: boolean;
 	hasConnections?: boolean;
 	buttonLabel?: string;
+	/** When true, the modernized chassis sizes the submit button to sit flush in a disclosure row. */
+	compact?: boolean;
 };
 
 /**
@@ -34,9 +38,19 @@ export function ConnectForm( {
 	displayInputs,
 	hasConnections,
 	buttonLabel,
+	compact,
 }: ConnectFormProps ) {
+	const isModernized = useIsModernized();
 	const { setKeyringResult } = useDispatch( store );
 
+	// In the modernized chassis the submit button sits flush in a compact
+	// disclosure row unless it accompanies the custom-input fields. Legacy
+	// passes no `size` (undefined) to keep the trunk button sizing.
+	let buttonSize: 'default' | 'compact' | undefined;
+	if ( compact ) {
+		buttonSize = displayInputs ? 'default' : 'compact';
+	}
+
 	const { isConnectionsModalOpen } = useSelect( select => select( store ), [] );
 
 	const [ isConnecting, setIsConnecting ] = useState( false );
@@ -87,13 +101,18 @@ export function ConnectForm( {
 		>
 			{ displayInputs ? (
 				<div className={ clsx( styles[ 'fields-wrapper' ], styles.input ) }>
-					<CustomInputs service={ service } />
+					{ isModernized ? (
+						<ModernCustomInputs service={ service } />
+					) : (
+						<CustomInputs service={ service } />
+					) }
 				</div>
 			) : null }
 
 			<div className={ styles[ 'fields-wrapper' ] }>
 				<Button
 					variant={ hasConnections ? 'outline' : 'solid' }
+					size={ buttonSize }
 					type="submit"
 					disabled={ isFetchingServicesList }
 				>
diff --git a/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
new file mode 100644
index 000000000000..858cb7805a69
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
@@ -0,0 +1,174 @@
+import {
+	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	Notice,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement, useCallback, useState } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
+import clsx from 'clsx';
+import { store } from '../../social-store';
+import styles from './style-modern.module.scss';
+import { SupportedService } from './types';
+
+type CustomInputsProps = {
+	service: SupportedService;
+};
+
+/**
+ * Custom inputs component
+ * @param {CustomInputsProps} props - Component props
+ *
+ * @return {import('react').ReactNode} Custom inputs component
+ */
+export function ModernCustomInputs( { service }: CustomInputsProps ) {
+	const [ handleError, setHandleError ] = useState< string | null >( null );
+
+	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
+
+	const validateBskyHandle = useCallback( ( value: string ) => {
+		if ( value.endsWith( '.bsky.social' ) ) {
+			const username = value.replace( '.bsky.social', '' );
+			if ( username.includes( '.' ) ) {
+				setHandleError(
+					sprintf(
+						/* translators: %s is the handle suffix like .bsky.social */
+						__(
+							'Bluesky usernames cannot contain dots. If you are using a custom domain, enter it without "%s"',
+							'jetpack-publicize-pkg'
+						),
+						'.bsky.social'
+					)
+				);
+				return false;
+			}
+		}
+		setHandleError( null );
+		return true;
+	}, [] );
+
+	const onBskyHandleChange = useCallback(
+		( value?: string ) => validateBskyHandle( value ?? '' ),
+		[ validateBskyHandle ]
+	);
+
+	if ( 'mastodon' === service.id ) {
+		return (
+			<div className={ styles[ 'fields-item' ] }>
+				<InputControl
+					__next40pxDefaultSize
+					required
+					type="text"
+					name="instance"
+					autoComplete="off"
+					autoCapitalize="off"
+					autoCorrect="off"
+					spellCheck="false"
+					label={ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
+					placeholder="@mastodon@mastodon.social"
+					help={ __(
+						'You can find the handle in your Mastodon profile.',
+						'jetpack-publicize-pkg'
+					) }
+				/>
+			</div>
+		);
+	}
+
+	if ( 'bluesky' === service.id ) {
+		const bskyHandleHelp = handleError ? (
+			<span className={ styles[ 'error-text' ] }>{ handleError }</span>
+		) : (
+			<>
+				{ __( 'You can find the handle in your Bluesky profile.', 'jetpack-publicize-pkg' ) }
+				&nbsp;
+				{ createInterpolateElement(
+					sprintf(
+						/* translators: %s is the bluesky handle suffix like .bsky.social */
+						__(
+							'This can either be %s or just the domain name if you are using a custom domain.',
+							'jetpack-publicize-pkg'
+						),
+						'<strong>username.bsky.social</strong>'
+					),
+					{
+						strong: <strong />,
+					}
+				) }
+			</>
+		);
+
+		return (
+			<>
+				<div
+					className={ clsx( styles[ 'fields-item' ], {
+						[ styles[ 'fields-item-error' ] ]: Boolean( handleError ),
+					} ) }
+				>
+					<InputControl
+						__next40pxDefaultSize
+						required
+						type="text"
+						name="handle"
+						defaultValue={
+							reconnectingAccount?.service_name === 'bluesky'
+								? reconnectingAccount?.external_handle
+								: undefined
+						}
+						autoComplete="off"
+						autoCapitalize="off"
+						autoCorrect="off"
+						spellCheck="false"
+						label={ _x(
+							'Handle',
+							'The handle of a social media account.',
+							'jetpack-publicize-pkg'
+						) }
+						placeholder="username.bsky.social"
+						onChange={ onBskyHandleChange }
+						help={ bskyHandleHelp }
+					/>
+				</div>
+				<div className={ styles[ 'fields-item' ] }>
+					<InputControl
+						__next40pxDefaultSize
+						required
+						type="password"
+						name="app_password"
+						autoComplete="off"
+						autoCapitalize="off"
+						autoCorrect="off"
+						spellCheck="false"
+						label={ __( 'App password', 'jetpack-publicize-pkg' ) }
+						placeholder="xxxx-xxxx-xxxx-xxxx"
+						help={ createInterpolateElement(
+							__(
+								'App password is needed to safely connect your account. App password is different from your account password. You can <link>generate it in Bluesky</link>.',
+								'jetpack-publicize-pkg'
+							),
+							{
+								link: (
+									<Link
+										openInNewTab
+										href="https://bsky.app/settings/app-passwords"
+										children={ null }
+									/>
+								),
+							}
+						) }
+					/>
+					{ reconnectingAccount?.service_name === 'bluesky' && (
+						<Notice status="error" isDismissible={ false }>
+							{ __(
+								'Please provide an app password to fix the connection.',
+								'jetpack-publicize-pkg'
+							) }
+						</Notice>
+					) }
+				</div>
+			</>
+		);
+	}
+
+	return null;
+}
diff --git a/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx b/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
new file mode 100644
index 000000000000..bfa7f7b3741f
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
@@ -0,0 +1,122 @@
+import { Text } from '@automattic/jetpack-components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import { Tooltip } from '@wordpress/ui';
+import { store as socialStore } from '../../social-store';
+import { Connection } from '../../social-store/types';
+import ConnectionIcon from '../connection-icon';
+import { ConnectionName } from '../connection-management/connection-name';
+import { ConnectionStatus } from '../connection-management/connection-status';
+import { ConnectionTemplateEditor } from '../connection-management/connection-template';
+import { Disconnect } from '../connection-management/disconnect';
+import { MarkAsShared } from '../connection-management/mark-as-shared';
+import styles from './style-modern.module.scss';
+import { SupportedService } from './types';
+
+export type ServiceConnectionInfoProps = {
+	connection: Connection;
+	service: SupportedService;
+	canMarkAsShared: boolean;
+};
+
+export const ModernServiceConnectionInfo = ( {
+	connection,
+	service,
+	canMarkAsShared,
+}: ServiceConnectionInfoProps ) => {
+	const canManageConnection = useSelect(
+		select => select( socialStore ).canUserManageConnection( connection ),
+		[ connection ]
+	);
+
+	return (
+		<div className={ styles[ 'service-connection-wrapper' ] }>
+			<div className={ styles[ 'service-connection' ] }>
+				<div>
+					<ConnectionIcon
+						className={ styles[ 'profile-pic' ] }
+						profilePicture={ connection.profile_picture }
+						label={ connection.display_name }
+					/>
+				</div>
+				<div className={ styles[ 'connection-details' ] }>
+					<ConnectionName connection={ connection } tone="neutral" />
+					{ ( conn => {
+						/**
+						 * Showing only the connection status makes sense only
+						 * if the user can disconnect the connection.
+						 * Otherwise, non-admin authors will see only the status without any further context.
+						 */
+						if (
+							( conn.status === 'broken' || conn.status === 'must_reauth' ) &&
+							canManageConnection
+						) {
+							return <ConnectionStatus connection={ conn } service={ service } />;
+						}
+
+						if ( canMarkAsShared ) {
+							const markAsSharedHelp = __(
+								'If enabled, the connection will be available to all administrators, editors, and authors.',
+								'jetpack-publicize-pkg'
+							);
+
+							return (
+								<div className={ styles[ 'mark-shared-wrap' ] }>
+									<MarkAsShared connection={ conn } />
+									<Tooltip.Root>
+										<Tooltip.Trigger
+											render={
+												<button
+													type="button"
+													className={ styles[ 'mark-shared-help' ] }
+													aria-label={ markAsSharedHelp }
+												>
+													<Icon icon={ info } size={ 18 } />
+												</button>
+											}
+										/>
+										{ /*
+										 * The WPDS Tooltip positioner defaults to
+										 * `z-index: var(--wp-ui-tooltip-z-index, initial)`,
+										 * which falls back to `auto`. Inside the
+										 * wp-components Modal (z-index ~100000), the
+										 * popup ends up behind the modal frame. Pin
+										 * the popup above the modal so the tooltip
+										 * is visible when hovering inside the modal.
+										 */ }
+										<Tooltip.Popup sideOffset={ 8 } style={ { zIndex: 100001 } }>
+											{ markAsSharedHelp }
+										</Tooltip.Popup>
+									</Tooltip.Root>
+								</div>
+							);
+						}
+
+						/**
+						 * Now if the user is not an admin, we tell them that the connection
+						 * was added by an admin and show the connection status if it's broken.
+						 */
+						return ! canManageConnection ? (
+							<>
+								<Text className={ styles.description }>
+									{ __(
+										'This connection is added by a site administrator.',
+										'jetpack-publicize-pkg'
+									) }
+								</Text>
+								{ conn.status === 'broken' ? (
+									<ConnectionStatus connection={ conn } service={ service } />
+								) : null }
+							</>
+						) : null;
+					} )( connection ) }
+				</div>
+				<div className={ styles[ 'connection-actions' ] }>
+					<Disconnect connection={ connection } variant="outline" size="compact" tone="neutral" />
+				</div>
+			</div>
+			<ConnectionTemplateEditor connection={ connection } />
+		</div>
+	);
+};
diff --git a/projects/packages/publicize/_inc/components/services/service-item-details.tsx b/projects/packages/publicize/_inc/components/services/service-item-details.tsx
index 77aa96683134..194e8075cdf8 100644
--- a/projects/packages/publicize/_inc/components/services/service-item-details.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-item-details.tsx
@@ -2,10 +2,12 @@ import { useBreakpointMatch } from '@automattic/jetpack-components';
 import { Disabled } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import clsx from 'clsx';
+import { useIsModernized } from '../../hooks/use-is-modernized';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import { ServiceConnectionInfo } from './service-connection-info';
+import { ModernServiceConnectionInfo } from './service-connection-info-modern';
 import styles from './style.module.scss';
 import { SupportedService } from './types';
 
@@ -22,6 +24,10 @@ export type ServicesItemDetailsProps = {
  * @return {import('react').ReactNode} Service item details component
  */
 export function ServiceItemDetails( { service, serviceConnections }: ServicesItemDetailsProps ) {
+	const isModernized = useIsModernized();
+	const ServiceConnectionInfoVariant = isModernized
+		? ModernServiceConnectionInfo
+		: ServiceConnectionInfo;
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
 	const { deletingConnections, updatingConnections } = useSelect( select => {
@@ -46,7 +52,7 @@ export function ServiceItemDetails( { service, serviceConnections }: ServicesIte
 					return (
 						<li key={ connection.connection_id }>
 							<Disabled isDisabled={ isUpdatingOrDeleting }>
-								<ServiceConnectionInfo
+								<ServiceConnectionInfoVariant
 									connection={ connection }
 									service={ service }
 									canMarkAsShared={ canMarkAsShared }
diff --git a/projects/packages/publicize/_inc/components/services/service-item-modern.tsx b/projects/packages/publicize/_inc/components/services/service-item-modern.tsx
new file mode 100644
index 000000000000..683e95c53162
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/service-item-modern.tsx
@@ -0,0 +1,145 @@
+import { useBreakpointMatch } from '@automattic/jetpack-components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import { Icon, chevronDown } from '@wordpress/icons';
+import { Collapsible } from '@wordpress/ui';
+import { store as socialStore } from '../../social-store';
+import { ConnectForm } from './connect-form';
+import { ServiceItemDetails, ServicesItemDetailsProps } from './service-item-details';
+import { ServiceItemNotice } from './service-item-notice';
+import { ServiceStatus } from './service-status';
+import styles from './style-modern.module.scss';
+import type { SyntheticEvent } from 'react';
+
+export type ServicesItemProps = ServicesItemDetailsProps & {
+	isPanelDefaultOpen?: boolean;
+};
+
+// Stops a child click from bubbling up to the surrounding
+// `Collapsible.Trigger`, which would otherwise toggle the disclosure
+// when the user is trying to interact with an inline control (e.g.
+// the "Connect" button or the broken-connection reauth flow).
+const stopPropagation = ( event: SyntheticEvent ) => event.stopPropagation();
+
+/**
+ * Service item component
+ *
+ * @param {ServicesItemProps} props - Component props
+ *
+ * @return {import('react').ReactNode} Service item component
+ */
+export function ModernServiceItem( {
+	service,
+	serviceConnections,
+	isPanelDefaultOpen,
+}: ServicesItemProps ) {
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
+	const [ isPanelOpen, setIsPanelOpen ] = useState( Boolean( isPanelDefaultOpen ) );
+	const togglePanel = useCallback( () => setIsPanelOpen( open => ! open ), [] );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	useEffect( () => {
+		if ( isPanelDefaultOpen ) {
+			rowRef.current?.scrollIntoView( { block: 'center', behavior: 'smooth' } );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const areCustomInputsVisible = isPanelOpen && service.needsCustomInputs;
+
+	const brokenConnections = serviceConnections.filter( ( { status } ) => status === 'broken' );
+	const reauthConnections = serviceConnections.filter( ( { status } ) => status === 'must_reauth' );
+
+	const hasOwnBrokenConnections = useSelect(
+		select => {
+			const { canUserManageConnection } = select( socialStore );
+
+			return brokenConnections.some( canUserManageConnection );
+		},
+		[ brokenConnections ]
+	);
+
+	const hideInitialConnectForm =
+		// For services with custom inputs, the initial Connect button opens the panel,
+		// so we don't want to show it if the panel is already open
+		areCustomInputsVisible ||
+		// For services with broken connections, we want to show the "Fix connections" button
+		// which opens the panel, so we don't want to show the initial connect form when the panel is already open
+		( hasOwnBrokenConnections && isPanelOpen );
+
+	const buttonLabel =
+		brokenConnections.length > 1
+			? _x( 'Fix connections', 'Fix the social media connections', 'jetpack-publicize-pkg' )
+			: _x( 'Fix connection', 'Fix social media connection', 'jetpack-publicize-pkg' );
+
+	return (
+		<Collapsible.Root open={ isPanelOpen } onOpenChange={ setIsPanelOpen }>
+			<Collapsible.Trigger
+				ref={ rowRef }
+				className={ styles[ 'service-row' ] }
+				nativeButton={ false }
+				render={ <div /> }
+			>
+				<div className={ styles[ 'service-row-icon' ] }>
+					<service.icon iconSize={ isSmall ? 36 : 48 } />
+				</div>
+				<div className={ styles[ 'service-basics' ] }>
+					<div className={ styles.heading }>
+						<span className={ styles.title }>{ service.label }</span>
+					</div>
+					{ ! isSmall && ! serviceConnections.length ? (
+						<span className={ styles.description }>{ service.description }</span>
+					) : null }
+					<ServiceStatus
+						serviceConnections={ serviceConnections }
+						brokenConnections={ brokenConnections }
+						reauthConnections={ reauthConnections }
+					/>
+				</div>
+				{ ! hideInitialConnectForm ? (
+					<div
+						className={ styles.actions }
+						onClick={ stopPropagation }
+						onKeyDown={ stopPropagation }
+						role="presentation"
+					>
+						<ConnectForm
+							service={ service }
+							isSmall={ isSmall }
+							compact
+							onSubmit={
+								hasOwnBrokenConnections || service.needsCustomInputs ? togglePanel : undefined
+							}
+							hasConnections={ serviceConnections.length > 0 }
+							buttonLabel={ hasOwnBrokenConnections ? buttonLabel : undefined }
+						/>
+					</div>
+				) : null }
+				<Icon className={ styles.chevron } icon={ chevronDown } />
+			</Collapsible.Trigger>
+			<Collapsible.Panel className={ styles[ 'service-panel' ] }>
+				<div className={ styles[ 'service-panel-inner' ] }>
+					<ServiceItemDetails service={ service } serviceConnections={ serviceConnections } />
+					<ServiceItemNotice service={ service } serviceConnections={ serviceConnections } />
+					{
+						// Connect form for services that need custom inputs
+						// should be shown only if there are no broken connections
+						service.needsCustomInputs && ! hasOwnBrokenConnections ? (
+							<div className={ styles[ 'connect-form-wrapper' ] }>
+								<ConnectForm
+									service={ service }
+									displayInputs
+									compact
+									isSmall={ false }
+									buttonLabel={ __( 'Submit', 'jetpack-publicize-pkg' ) }
+								/>
+							</div>
+						) : null
+					}
+				</div>
+			</Collapsible.Panel>
+		</Collapsible.Root>
+	);
+}
diff --git a/projects/packages/publicize/_inc/components/services/services-list-modern.tsx b/projects/packages/publicize/_inc/components/services/services-list-modern.tsx
new file mode 100644
index 000000000000..b0e590d14c40
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/services-list-modern.tsx
@@ -0,0 +1,54 @@
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { Card } from '@wordpress/ui';
+import { store } from '../../social-store';
+import { Connection } from '../../social-store/types';
+import { ModernServiceItem } from './service-item-modern';
+import styles from './style-modern.module.scss';
+import { useSupportedServices } from './use-supported-services';
+
+/**
+ * Services list component
+ *
+ * @return {import('react').ReactNode} Services list component
+ */
+export function ModernServicesList() {
+	const supportedServices = useSupportedServices();
+
+	const allConnections = useSelect( select => {
+		return select( store ).getConnections();
+	}, [] );
+
+	const connections = useMemo( () => {
+		return allConnections.reduce< Record< string, Array< Connection > > >(
+			( bucket, connection ) => {
+				if ( ! bucket[ connection.service_name ] ) {
+					bucket[ connection.service_name ] = [];
+				}
+
+				bucket[ connection.service_name ].push( connection );
+
+				return bucket;
+			},
+			{}
+		);
+	}, [ allConnections ] );
+
+	const reconnectingAccount = useSelect( select => select( store ).getReconnectingAccount(), [] );
+
+	return (
+		<Card.Root>
+			<ul className={ styles.services }>
+				{ supportedServices.map( service => (
+					<li key={ service.id } className={ styles[ 'service-list-item' ] }>
+						<ModernServiceItem
+							service={ service }
+							serviceConnections={ connections[ service.id ] || [] }
+							isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
+						/>
+					</li>
+				) ) }
+			</ul>
+		</Card.Root>
+	);
+}
diff --git a/projects/packages/publicize/_inc/components/services/style-modern.module.scss b/projects/packages/publicize/_inc/components/services/style-modern.module.scss
new file mode 100644
index 000000000000..2b40d4981280
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/style-modern.module.scss
@@ -0,0 +1,280 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.services {
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	// Rows after the first get a top border so the dividers between
+	// them read as one continuous list. The first row sits flush with
+	// the Card.Root's own top edge — adding a border-top there would
+	// double up against the card's own border line.
+	.service-list-item {
+		margin: 0;
+
+		&:not(:first-child) {
+			border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
+		}
+	}
+
+	.service-basics {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: var(--wpds-dimension-gap-xs, 4px);
+		min-width: 0;
+	}
+
+	.heading {
+		align-items: center;
+		display: flex;
+		gap: var(--wpds-dimension-gap-lg, 16px);
+	}
+
+	.title {
+		color: var(--wpds-color-fg-content-neutral, var(--jp-gray-80));
+		font-size: 0.875rem;
+		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		line-height: 1.4;
+	}
+
+	.description {
+		color: var(--wpds-color-fg-content-neutral-weak, #757575);
+		font-size: var(--wpds-typography-font-size-md, 13px);
+	}
+
+	.actions {
+		display: flex;
+		gap: var(--wpds-dimension-gap-sm, 8px);
+	}
+
+	.active-connection {
+		color: var(--jp-green-50);
+		white-space: nowrap;
+	}
+
+	.broken-connection-alert {
+		margin-block: 0;
+		font-size: var(--font-body-small);
+	}
+
+	.service-connection-list {
+		border-top: 1px solid var(--jp-gray-5);
+		padding-top: 1rem;
+
+		li:not(:last-child) {
+			margin-bottom: 1rem;
+		}
+
+		*[inert="true"] {
+			opacity: 0.7;
+		}
+	}
+}
+
+// Flat clickable row used as the `Collapsible.Trigger` for each service.
+// Layout mirrors `.connection-row` in connection-management so the modal
+// and the chassis Overview share the same visual language.
+.service-row {
+	align-items: center;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: flex;
+	gap: var(--wpds-dimension-gap-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+	width: 100%;
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
+	}
+
+	&[data-panel-open] {
+
+		.chevron {
+			rotate: 180deg;
+		}
+	}
+}
+
+.service-row-icon {
+	flex-shrink: 0;
+}
+
+.chevron {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	flex-shrink: 0;
+	transition: rotate 0.15s ease-out;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+// Collapsible.Panel — height transition driven by `--collapsible-panel-height`
+// set by Base UI. Mirrors the WPDS CollapsibleCard.Content rule so the
+// services panels animate in/out at the same cadence.
+.service-panel {
+	height: var(--collapsible-panel-height);
+	overflow: hidden;
+
+	&[hidden]:not([hidden="until-found"]) {
+		display: none;
+	}
+
+	&[data-ending-style],
+	&[data-starting-style] {
+		height: 0;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-out;
+	}
+}
+
+.service-panel-inner {
+	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
+}
+
+.example-wrapper {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	font-size: 15px;
+	margin-top: 0.4rem;
+
+	&.small {
+		grid-auto-flow: row;
+		gap: 2rem;
+		height: auto;
+		min-height: unset;
+	}
+
+	img {
+		max-height: 520px;
+		max-width: 100%;
+	}
+
+	>div {
+		padding: 0.4rem;
+
+		&:has(img) {
+			margin-inline-start: auto;
+			margin-inline-end: auto;
+		}
+	}
+}
+
+.service-connection-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.service-connection {
+	display: flex;
+	gap: 1rem;
+
+	.connection-details {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.profile-pic {
+
+		&,
+		img {
+			width: 38px;
+			height: 38px;
+		}
+	}
+
+
+}
+
+.connect-form-wrapper {
+	margin-top: 2rem;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.connect-form {
+	display: flex;
+	gap: 1.5rem;
+	flex-direction: column;
+	justify-content: flex-end;
+	width: 100%;
+
+	.fields-wrapper {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		gap: 1rem;
+
+		&.input {
+			justify-content: flex-start;
+		}
+
+		@include gb.break-medium {
+			flex-direction: row;
+		}
+	}
+
+	.fields-item {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		flex-basis: 100%;
+		min-width: 220px;
+
+		@include gb.break-medium {
+			flex-basis: 50%;
+		}
+
+		@include gb.break-small {
+
+			button {
+				align-self: start;
+			}
+		}
+	}
+}
+
+.mark-shared-wrap {
+	align-items: center;
+	display: flex;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+}
+
+.mark-shared-help {
+	align-items: center;
+	background: transparent;
+	border: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	padding: 0;
+	width: 24px;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	}
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: var(--wpds-border-width-focus, 2px);
+	}
+}
+
+.error-text.error-text {
+	color: var(--jp-red);
+	font-style: italic;
+}

From f343fefab463ff7a6844d6b0bac82495e90ff49a Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Fri, 22 May 2026 23:44:31 -0300
Subject: [PATCH 10/11] Social: gate the modern connections list styling at the
 list level + a11y/changelog fixes

ConnectionManagement rendered the <ul>/<li> with the legacy stylesheet and
only swapped the row component, so the modern .connection-list rules were
dead and the chassis Overview inherited the legacy outline box + 16px <li>
padding (40px avatar inset vs the intended 24px). Pick the stylesheet with
`isModernized ? modernStyles : styles`; the legacy branch stays byte-identical.

Also restore the service-specific aria-labels on the modern Mastodon/Bluesky
handle inputs, and convert the social + publicize changelog entries to
comment-only (flag-gated, no user-facing release note until the flag flips).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/connection-management/index.tsx     | 14 +++++++++++---
 .../components/services/custom-inputs-modern.tsx   |  2 ++
 .../update-social-modernization-modal-wpds         |  3 +--
 .../update-social-modernization-modal-wpds         |  3 +--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/projects/packages/publicize/_inc/components/connection-management/index.tsx b/projects/packages/publicize/_inc/components/connection-management/index.tsx
index f7f805fbcdf1..9628c06039fc 100644
--- a/projects/packages/publicize/_inc/components/connection-management/index.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/index.tsx
@@ -12,6 +12,7 @@ import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-conn
 import { useService } from '../services/use-service';
 import { ConnectionInfo } from './connection-info';
 import { ModernConnectionInfo } from './connection-info-modern';
+import modernStyles from './style-modern.module.scss';
 import styles from './style.module.scss';
 
 const ConnectionManagement = ( {
@@ -22,6 +23,10 @@ const ConnectionManagement = ( {
 } ) => {
 	const isModernized = useIsModernized();
 	const ConnectionInfoVariant = isModernized ? ModernConnectionInfo : ConnectionInfo;
+	// The modernized chassis owns its list chrome (edge-to-edge dividers, no
+	// outline, rows supply their own padding). The legacy admin page / block
+	// editor keep the trunk `style.module.scss` classes byte-for-byte.
+	const listStyles = isModernized ? modernStyles : styles;
 	const { refresh } = useSocialMediaConnections();
 
 	const { connections, deletingConnections, updatingConnections } = useSelect( select => {
@@ -53,21 +58,24 @@ const ConnectionManagement = ( {
 
 	return (
 		<div
-			className={ clsx( styles.wrapper, className ) }
+			className={ clsx( listStyles.wrapper, className ) }
 			// @ts-expect-error inert propery is not yet in react types
 			inert={ disabled ? 'true' : undefined }
 		>
 			{ connections.length ? (
 				<>
 					{ ! hideHeading && <h3>{ __( 'Connected accounts', 'jetpack-publicize-pkg' ) }</h3> }
-					<ul className={ styles[ 'connection-list' ] }>
+					<ul className={ listStyles[ 'connection-list' ] }>
 						{ connections.map( connection => {
 							const isUpdatingOrDeleting =
 								updatingConnections.includes( connection.connection_id ) ||
 								deletingConnections.includes( connection.connection_id );
 
 							return (
-								<li className={ styles[ 'connection-list-item' ] } key={ connection.connection_id }>
+								<li
+									className={ listStyles[ 'connection-list-item' ] }
+									key={ connection.connection_id }
+								>
 									<Disabled isDisabled={ isUpdatingOrDeleting }>
 										<ConnectionInfoVariant
 											connection={ connection }
diff --git a/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
index 858cb7805a69..abfef5b21cb9 100644
--- a/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
+++ b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
@@ -64,6 +64,7 @@ export function ModernCustomInputs( { service }: CustomInputsProps ) {
 					autoCapitalize="off"
 					autoCorrect="off"
 					spellCheck="false"
+					aria-label={ __( 'Mastodon handle', 'jetpack-publicize-pkg' ) }
 					label={ _x( 'Handle', 'The handle of a social media account.', 'jetpack-publicize-pkg' ) }
 					placeholder="@mastodon@mastodon.social"
 					help={ __(
@@ -119,6 +120,7 @@ export function ModernCustomInputs( { service }: CustomInputsProps ) {
 						autoCapitalize="off"
 						autoCorrect="off"
 						spellCheck="false"
+						aria-label={ __( 'Bluesky handle', 'jetpack-publicize-pkg' ) }
 						label={ _x(
 							'Handle',
 							'The handle of a social media account.',
diff --git a/projects/packages/publicize/changelog/update-social-modernization-modal-wpds b/projects/packages/publicize/changelog/update-social-modernization-modal-wpds
index e9d7cd1167c0..ada4faa19276 100644
--- a/projects/packages/publicize/changelog/update-social-modernization-modal-wpds
+++ b/projects/packages/publicize/changelog/update-social-modernization-modal-wpds
@@ -1,4 +1,3 @@
 Significance: patch
 Type: changed
-
-Refresh the connected-accounts list and the Add-account modal with the WordPress Design System: each row is now a single click-target that expands inline, the service avatars and inputs render with the new tokens, and tooltips open without delay.
+Comment: Social modernization (flag-gated behind rsm_jetpack_ui_modernization_social): refresh the connected-accounts list and Add-account modal onto the WordPress Design System. No user-facing change until the flag flips.
diff --git a/projects/plugins/social/changelog/update-social-modernization-modal-wpds b/projects/plugins/social/changelog/update-social-modernization-modal-wpds
index c95ae24d87d1..4103429785d1 100644
--- a/projects/plugins/social/changelog/update-social-modernization-modal-wpds
+++ b/projects/plugins/social/changelog/update-social-modernization-modal-wpds
@@ -1,4 +1,3 @@
 Significance: patch
 Type: changed
-
-Dependencies: Update lock file to keep root requirements in sync.
+Comment: Social modernization (flag-gated behind rsm_jetpack_ui_modernization_social): pulls in the publicize package's WPDS refresh of the connected-accounts list and Add-account modal. No user-facing change until the flag flips.

From dbbd727bff07e47810fa4e76c7f5d1618db6eb63 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Mon, 25 May 2026 15:15:01 -0300
Subject: [PATCH 11/11] Social: address WPDS modernization review feedback
 (chassis-gated)

- Fix profile-name link toggling the disclosure row (stopPropagation
  wrapper, mirroring the status wrap)
- Migrate the Add-account modal to the @wordpress/ui Dialog: drops the
  custom width + z-index tooltip hack; pin it below #wpadminbar and
  reserve the scrollbar gutter so rows don't shift on overflow
- Swap to @wordpress/ui Notice / Icon / IconButton / Text / Stack, and
  body-lg Text for the name/title; use useViewportMatch from
  @wordpress/compose instead of the Jetpack breakpoint hook
- Use WPDS motion tokens for the disclosure transitions; restore the
  Bluesky field error affordance; drop dead CSS
- Add render-smoke + interaction tests for the modern components,
  including a click-on-name-doesn't-toggle regression test

All changes live in *-modern variants rendered only inside
ModernizationProvider, so the legacy admin page and block editor are
unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../connection-info-modern.tsx                |  68 ++++++----
 .../style-modern.module.scss                  |  93 ++------------
 .../specs/connection-info-modern.test.jsx     |  93 ++++++++++++++
 .../manage-connections-modal/index-modern.tsx | 118 ++++++++++--------
 .../style-modern.module.scss                  |  47 ++++---
 .../tests/index-modern.test.js                |  77 ++++++++++++
 .../services/custom-inputs-modern.tsx         |  17 +--
 .../service-connection-info-modern.tsx        |  66 +++++-----
 .../services/service-item-modern.tsx          |  12 +-
 .../services/style-modern.module.scss         |  85 ++++---------
 .../tests/custom-inputs-modern.test.js        |  73 +++++++++++
 .../service-connection-info-modern.test.js    |  75 +++++++++++
 .../tests/service-item-modern.test.js         |  63 ++++++++++
 .../tests/services-list-modern.test.js        |  34 +++++
 14 files changed, 627 insertions(+), 294 deletions(-)
 create mode 100644 projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-info-modern.test.jsx
 create mode 100644 projects/packages/publicize/_inc/components/manage-connections-modal/tests/index-modern.test.js
 create mode 100644 projects/packages/publicize/_inc/components/services/tests/custom-inputs-modern.test.js
 create mode 100644 projects/packages/publicize/_inc/components/services/tests/service-connection-info-modern.test.js
 create mode 100644 projects/packages/publicize/_inc/components/services/tests/service-item-modern.test.js
 create mode 100644 projects/packages/publicize/_inc/components/services/tests/services-list-modern.test.js

diff --git a/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx b/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
index b37d7b6d055c..efac45880a98 100644
--- a/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
+++ b/projects/packages/publicize/_inc/components/connection-management/connection-info-modern.tsx
@@ -1,9 +1,8 @@
-import { Text } from '@automattic/jetpack-components';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, chevronDown, info } from '@wordpress/icons';
-import { Collapsible, Tooltip } from '@wordpress/ui';
+import { chevronDown, info } from '@wordpress/icons';
+import { Collapsible, Icon, IconButton, Stack, Text } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import ConnectionIcon from '../connection-icon';
 import { XNotice } from '../services/x-notice';
@@ -70,45 +69,60 @@ export function ModernConnectionInfo( {
 					profilePicture={ connection.profile_picture }
 					size="medium"
 				/>
-				<div className={ styles[ 'connection-name-wrapper' ] }>
-					<div className={ styles[ 'connection-item-name' ] }>
+				<Stack direction="column" gap="xs" className={ styles[ 'connection-name-wrapper' ] }>
+					{ /*
+					 * The profile-name link lives inside the row, which doubles as
+					 * the Collapsible.Trigger. Without stopping propagation a click
+					 * on the link would also toggle the disclosure (and an anchor
+					 * inside role="button" is invalid nesting). Mirror the
+					 * connection-status-wrap below so the link opens the profile
+					 * without toggling the panel.
+					 */ }
+					<Text
+						variant="body-lg"
+						className={ styles[ 'connection-item-name' ] }
+						onClick={ stopPropagation }
+						onKeyDown={ stopPropagation }
+						role="presentation"
+					>
 						<ConnectionName connection={ connection } tone="neutral" />
-					</div>
+					</Text>
 					{ hasStatus ? (
-						<div
-							className={ styles[ 'connection-status-wrap' ] }
+						<Stack
+							direction="column"
+							gap="xs"
 							onClick={ stopPropagation }
 							onKeyDown={ stopPropagation }
 							role="presentation"
 						>
 							<ConnectionStatus connection={ connection } service={ service } />
-						</div>
+						</Stack>
 					) : (
-						<span className={ styles[ 'connection-network' ] }>{ service?.label }</span>
+						<Text variant="body-md" className={ styles[ 'connection-network' ] }>
+							{ service?.label }
+						</Text>
 					) }
-				</div>
+				</Stack>
 				<Icon className={ styles.chevron } icon={ chevronDown } />
 			</Collapsible.Trigger>
 			<Collapsible.Panel className={ styles[ 'connection-panel' ] }>
 				<div className={ styles[ 'connection-panel-inner' ] }>
 					{ canMarkAsShared && (
-						<div className={ styles[ 'mark-shared-wrap' ] }>
+						<Stack
+							direction="row"
+							align="center"
+							gap="sm"
+							className={ styles[ 'mark-shared-wrap' ] }
+						>
 							<MarkAsShared connection={ connection } />
-							<Tooltip.Root>
-								<Tooltip.Trigger
-									render={
-										<button
-											type="button"
-											className={ styles[ 'mark-shared-help' ] }
-											aria-label={ markAsSharedHelp }
-										>
-											<Icon icon={ info } size={ 18 } />
-										</button>
-									}
-								/>
-								<Tooltip.Popup sideOffset={ 8 }>{ markAsSharedHelp }</Tooltip.Popup>
-							</Tooltip.Root>
-						</div>
+							<IconButton
+								variant="minimal"
+								tone="neutral"
+								size="small"
+								label={ markAsSharedHelp }
+								icon={ info }
+							/>
+						</Stack>
 					) }
 					<div className={ styles[ 'connection-template-wrap' ] }>
 						<ConnectionTemplateEditor connection={ connection } />
diff --git a/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss b/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
index 0a8fc58bf078..2c840c6240c5 100644
--- a/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
+++ b/projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
@@ -11,44 +11,8 @@
 	}
 }
 
-.connection-name {
-	align-items: center;
-	display: flex;
-
-	:global(.components-spinner) {
-		margin-top: 0;
-	}
-
-	span.profile-link,
-	.profile-link:global(.components-external-link) {
-		color: inherit;
-		text-decoration: none;
-
-		>svg {
-			vertical-align: bottom;
-		}
-
-		span {
-			text-decoration: none;
-		}
-	}
-
-	.profile-link:global(.components-external-link):hover {
-		text-decoration: underline;
-	}
-
-	span {
-		text-decoration: none;
-	}
-}
-
-.confirmDialog span {
-	font-size: var(--wpds-typography-font-size-lg, 15px);
-}
-
 .description {
 	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	font-size: 0.875rem;
 }
 
 .connection-list {
@@ -74,7 +38,9 @@
 
 // Flat row that doubles as the Collapsible.Trigger. Click anywhere on the
 // row (outside of the name link / status actions) toggles the disclosure;
-// the chevron rotates 180° via `[data-panel-open]` set by Base UI.
+// the chevron rotates 180° via `[data-panel-open]` set by Base UI. The row is
+// rendered through Collapsible.Trigger's `render` prop, so it stays a plain
+// class (it still needs the cursor/padding/focus styling Stack doesn't cover).
 .connection-row {
 	align-items: center;
 	cursor: var(--wpds-cursor-control, pointer);
@@ -84,43 +50,35 @@
 	width: 100%;
 
 	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline: var(--wpds-border-width-focus, 2px) solid var(--wpds-color-stroke-focus-brand, #3858e9);
 		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
 	}
 }
 
+// Stack supplies the column layout + gap; this keeps the row child flexible
+// so long names truncate instead of pushing the chevron off the row.
 .connection-name-wrapper {
-	display: flex;
 	flex: 1;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
 	min-width: 0;
 }
 
+// Size comes from the `body-lg` Text variant; keep the neutral colour and the
+// medium weight that the variant doesn't set.
 .connection-item-name {
 	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	font-size: 0.875rem;
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
 }
 
 .connection-network {
 	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	font-size: var(--wpds-typography-font-size-md, 13px);
-}
-
-.connection-status-wrap {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
 }
 
 .chevron {
 	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	flex-shrink: 0;
-	transition: rotate 0.15s ease-out;
 
-	@media (prefers-reduced-motion) {
-		transition: none;
+	@media not (prefers-reduced-motion) {
+		transition: rotate var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
 	}
 }
 
@@ -148,7 +106,7 @@
 	}
 
 	@media not (prefers-reduced-motion) {
-		transition: all 0.15s ease-out;
+		transition: all var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
 	}
 }
 
@@ -156,37 +114,12 @@
 	padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
 }
 
+// Stack supplies the row layout (align + gap); only the trailing spacing
+// below the toggle is left here.
 .mark-shared-wrap {
-	align-items: center;
-	display: flex;
-	gap: var(--wpds-dimension-gap-sm, 8px);
 	padding-bottom: var(--wpds-dimension-padding-lg, 16px);
 }
 
-.mark-shared-help {
-	align-items: center;
-	background: transparent;
-	border: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	cursor: var(--wpds-cursor-control, pointer);
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	padding: 0;
-	width: 24px;
-
-	&:hover,
-	&:focus-visible {
-		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	}
-
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: var(--wpds-border-width-focus, 2px);
-	}
-}
-
 .connection-template-wrap {
 	margin-bottom: var(--wpds-dimension-gap-xl, 24px);
 
diff --git a/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-info-modern.test.jsx b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-info-modern.test.jsx
new file mode 100644
index 000000000000..4f5b4d00ac8c
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/connection-management/tests/specs/connection-info-modern.test.jsx
@@ -0,0 +1,93 @@
+import { render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSelect } from '@wordpress/data';
+import { store } from '../../../../social-store';
+import { setup } from '../../../../utils/test-factory';
+import { ModernConnectionInfo } from '../../connection-info-modern';
+
+jest.mock( '../../../connection-icon', () => ( {
+	__esModule: true,
+	default: () => <div>icon</div>,
+} ) );
+jest.mock( '../../../services/x-notice', () => ( {
+	XNotice: () => <div>x-notice</div>,
+} ) );
+jest.mock( '../../connection-name', () => ( {
+	ConnectionName: ( { connection } ) => <a href="#profile">{ connection.display_name }</a>,
+} ) );
+jest.mock( '../../connection-status', () => ( {
+	ConnectionStatus: () => <div>connection status</div>,
+} ) );
+jest.mock( '../../connection-template', () => ( {
+	ConnectionTemplateEditor: () => <div>template editor</div>,
+} ) );
+jest.mock( '../../disconnect', () => ( {
+	Disconnect: () => <button type="button">Disconnect</button>,
+} ) );
+jest.mock( '../../mark-as-shared', () => ( {
+	MarkAsShared: () => <button type="button">Mark as shared</button>,
+} ) );
+
+const CONNECTION = {
+	service_name: 'tumblr',
+	connection_id: '5',
+	display_name: 'My blog',
+	status: 'connected',
+	profile_link: 'https://example.com',
+	profile_picture: 'https://example.com/pic.jpg',
+};
+
+const SERVICE = { id: 'tumblr', label: 'Tumblr' };
+
+const renderInfo = ( props = {} ) => {
+	setup();
+	// `getServicesBy` is consulted for the "unsupported" lookup but isn't part
+	// of the shared factory's stubbed selectors, so pin it to an empty result.
+	let storeSelect;
+	renderHook( () => useSelect( select => ( storeSelect = select( store ) ) ) );
+	jest.spyOn( storeSelect, 'getServicesBy' ).mockReturnValue( [] );
+
+	return render(
+		<ModernConnectionInfo
+			connection={ CONNECTION }
+			service={ SERVICE }
+			canMarkAsShared={ false }
+			{ ...props }
+		/>
+	);
+};
+
+describe( 'ModernConnectionInfo', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders the connection name and the network label collapsed', () => {
+		renderInfo();
+
+		expect( screen.getByText( 'My blog' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Tumblr' ) ).toBeInTheDocument();
+		// The disclosure starts closed, so the trigger reports collapsed.
+		expect( screen.getByRole( 'button', { expanded: false } ) ).toBeInTheDocument();
+	} );
+
+	test( 'clicking the profile name link does not toggle the disclosure row', async () => {
+		const user = userEvent.setup();
+		renderInfo();
+
+		const nameLink = screen.getByRole( 'link', { name: 'My blog' } );
+		await user.click( nameLink );
+
+		// The row stays collapsed — the link click must not bubble to the trigger.
+		expect( screen.getByRole( 'button', { expanded: false } ) ).toBeInTheDocument();
+	} );
+
+	test( 'clicking the row toggles the disclosure open', async () => {
+		const user = userEvent.setup();
+		renderInfo();
+
+		await user.click( screen.getByRole( 'button', { expanded: false } ) );
+
+		expect( screen.getByRole( 'button', { expanded: true } ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx b/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
index b68fcb026c2b..9310f04cb87f 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/index-modern.tsx
@@ -1,16 +1,21 @@
-import { getRedirectUrl, useBreakpointMatch } from '@automattic/jetpack-components';
-import { Modal } from '@wordpress/components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Link, Text, Tooltip } from '@wordpress/ui';
-import clsx from 'clsx';
+import { Dialog, Link, Text, Tooltip } from '@wordpress/ui';
 import { useUserCanShareConnection } from '../../hooks/use-user-can-share-connection';
 import { store } from '../../social-store';
 import { ModernServicesList } from '../services/services-list-modern';
 import { ConfirmationForm } from './confirmation-form';
 import styles from './style-modern.module.scss';
 
+// Split the two titles into constants rather than picking them inline with a
+// ternary: interpolating translatable strings inside JSX expressions can break
+// the way our build extracts/bundles them for translation.
+const CONFIRMATION_TITLE = () => __( 'Connection confirmation', 'jetpack-publicize-pkg' );
+const MANAGE_TITLE = () => _x( 'Manage Jetpack Social connections', '', 'jetpack-publicize-pkg' );
+
 export const ModernManageConnectionsModal = () => {
 	const { keyringResult } = useSelect( select => {
 		const { getKeyringResult } = select( store );
@@ -22,7 +27,7 @@ export const ModernManageConnectionsModal = () => {
 
 	const { setKeyringResult, closeConnectionsModal, setReconnectingAccount } = useDispatch( store );
 
-	const [ isSmall ] = useBreakpointMatch( 'sm' );
+	const isSmall = useViewportMatch( 'small', '<' );
 
 	const closeModal = useCallback( () => {
 		setKeyringResult( null );
@@ -30,62 +35,67 @@ export const ModernManageConnectionsModal = () => {
 		closeConnectionsModal();
 	}, [ closeConnectionsModal, setKeyringResult, setReconnectingAccount ] );
 
+	// The modal only mounts while open, so any close intent (Esc, backdrop
+	// click, close button) routes through here to tear down the store state.
+	const onOpenChange = useCallback(
+		( open: boolean ) => {
+			if ( ! open ) {
+				closeModal();
+			}
+		},
+		[ closeModal ]
+	);
+
 	const hasKeyringResult = Boolean( keyringResult?.ID );
 
-	const title = hasKeyringResult
-		? __( 'Connection confirmation', 'jetpack-publicize-pkg' )
-		: _x( 'Manage Jetpack Social connections', '', 'jetpack-publicize-pkg' );
+	const title = hasKeyringResult ? CONFIRMATION_TITLE() : MANAGE_TITLE();
 
 	const canMarkAsShared = useUserCanShareConnection();
 
 	return (
 		<Tooltip.Provider delay={ 0 }>
-			<Modal
-				className={ clsx( styles.modal, {
-					[ styles.small ]: isSmall,
-					// Pin the frame to its max height while listing services so
-					// expanding a disclosure row scrolls inside the modal instead
-					// of resizing (and re-centering) the whole frame. The short
-					// confirmation view keeps its natural, content-sized height.
-					[ styles[ 'services-list' ] ]: ! hasKeyringResult,
-				} ) }
-				onRequestClose={ closeModal }
-				title={ title }
-			>
-				{
-					//Use IIFE to avoid nested ternary
-					( () => {
-						if ( hasKeyringResult ) {
-							return (
-								<ConfirmationForm
-									keyringResult={ keyringResult }
-									onComplete={ closeModal }
-									canMarkAsShared={ canMarkAsShared }
-								/>
-							);
-						}
-
-						return (
-							<>
-								<ModernServicesList />
-								<Text variant="body-sm" render={ <p className={ styles[ 'manual-share' ] } /> }>
-									{ __(
-										'Want to share to other networks? Use our Manual Sharing feature from the editor.',
-										'jetpack-publicize-pkg'
-									) }
-									&nbsp;
-									<Link
-										openInNewTab
-										href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }
-									>
-										{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
-									</Link>
-								</Text>
-							</>
-						);
-					} )()
-				}
-			</Modal>
+			<Dialog.Root open onOpenChange={ onOpenChange }>
+				{ /*
+				 * `large` (960px) replaces the previous custom 65rem width; on
+				 * small viewports `full` gives the edge-to-edge treatment the
+				 * legacy Modal had. While listing services we pin the frame to its
+				 * full height (`services-list`): the Dialog is vertically centered,
+				 * so a content-sized frame would shift its contents up/down as a
+				 * disclosure row expands — pinning it makes the row scroll inside
+				 * the popup instead. The short confirmation view keeps its natural
+				 * height, and `full` already fills the viewport on mobile.
+				 */ }
+				<Dialog.Popup
+					size={ isSmall ? 'full' : 'large' }
+					className={ ! hasKeyringResult && ! isSmall ? styles[ 'services-list' ] : undefined }
+				>
+					<Dialog.Header>
+						<Dialog.Title>{ title }</Dialog.Title>
+						<Dialog.CloseIcon />
+					</Dialog.Header>
+					{ hasKeyringResult ? (
+						<ConfirmationForm
+							keyringResult={ keyringResult }
+							onComplete={ closeModal }
+							canMarkAsShared={ canMarkAsShared }
+						/>
+					) : (
+						<>
+							<ModernServicesList />
+							<Text variant="body-sm" render={ <p className={ styles[ 'manual-share' ] } /> }>
+								{ __(
+									'Want to share to other networks? Use our Manual Sharing feature from the editor.',
+									'jetpack-publicize-pkg'
+								) }
+								&nbsp;
+								<Link openInNewTab href={ getRedirectUrl( 'jetpack-social-manual-sharing-help' ) }>
+									{ __( 'Learn more', 'jetpack-publicize-pkg' ) }
+								</Link>
+							</Text>
+						</>
+					) }
+				</Dialog.Popup>
+			</Dialog.Root>
 		</Tooltip.Provider>
 	);
 };
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss b/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
index b22777963f0b..48b9c027d4e4 100644
--- a/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
@@ -1,29 +1,28 @@
-.modal.modal {
-	width: 65rem;
-}
-
-// While the services list is shown (i.e. not the compact confirmation view),
-// occupy the full max-height the WP Modal allows so the frame stays a fixed
-// size as disclosure rows expand/collapse. Without this the frame is
-// content-sized and, being vertically centered, shifts upward when a row
-// expands past the max-height threshold. Mobile (`.small`) keeps WordPress's
-// full-screen treatment untouched.
-.modal.services-list:not(.small) {
-	height: 100%;
-}
-
-.connect-form {
-	display: grid;
-	gap: 0.5rem;
+// While listing services we pin the Dialog frame so expanding a disclosure row
+// scrolls inside the popup instead of growing the (otherwise vertically
+// centered) frame and shifting its contents.
 
-	>input {
-		height: 100%;
-		width: 18rem;
-	}
+// We pin with explicit top/bottom insets rather than the Dialog's default
+// `top: 50%` + `translateY(-50%)` centering, for two reasons:
+//   1. The Dialog is built for the block editor and is unaware of wp-admin's
+//      fixed `#wpadminbar`; centering a near-full-height frame tucks its top
+//      under the bar. `--wp-admin--admin-bar--height` (kept in sync by
+//      WordPress — 32px desktop, 46px ≤782px, 0 when absent) plus the Dialog's
+//      usual 24px gutter gives the top inset.
+//   2. Centering a tall frame lands it on a half-pixel (odd viewport height),
+//      which misaligns the native scrollbar by ~1px. Integer insets avoid that.
+// `translateX(-50%)` is kept so the frame stays horizontally centered against
+// the base `left: 50%`.
+.services-list {
+	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpds-dimension-padding-2xl, 24px));
+	bottom: var(--wpds-dimension-padding-2xl, 24px);
+	height: auto;
+	max-height: none;
+	transform: translateX(-50%);
 
-	&:not(.small) {
-		grid-auto-flow: column;
-	}
+	// Reserve the scrollbar gutter on both sides so the rows don't shift when a
+	// disclosure (e.g. the Instagram preview) makes the frame overflow + scroll.
+	scrollbar-gutter: stable both-edges;
 }
 
 .manual-share {
diff --git a/projects/packages/publicize/_inc/components/manage-connections-modal/tests/index-modern.test.js b/projects/packages/publicize/_inc/components/manage-connections-modal/tests/index-modern.test.js
new file mode 100644
index 000000000000..965beed34688
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/manage-connections-modal/tests/index-modern.test.js
@@ -0,0 +1,77 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setup } from '../../../utils/test-factory';
+import { ModernManageConnectionsModal } from '../index-modern';
+
+jest.mock( '../confirmation-form', () => ( {
+	ConfirmationForm: () => <div>Confirmation Form</div>,
+} ) );
+jest.mock( '../../services/services-list-modern', () => ( {
+	ModernServicesList: () => <div>Services List</div>,
+} ) );
+jest.mock( '../../../hooks/use-user-can-share-connection', () => ( {
+	useUserCanShareConnection: jest.fn( () => true ),
+} ) );
+
+describe( 'ModernManageConnectionsModal', () => {
+	let stubSetKeyringResult, stubGetKeyringResult;
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		( { stubSetKeyringResult, stubGetKeyringResult } = setup() );
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	} );
+
+	// The Dialog/Tooltip primitives schedule async positioning effects after
+	// mount, so flush them inside act before asserting.
+	const renderModal = async () => {
+		render( <ModernManageConnectionsModal /> );
+		// Settle the floating-ui/tooltip effects (some resolve via microtasks,
+		// some via timers) so no state update escapes act.
+		await act( async () => {
+			await Promise.resolve();
+			jest.runAllTimers();
+		} );
+		await act( async () => {
+			jest.runAllTimers();
+		} );
+	};
+
+	it( 'renders the services list in a dialog when there is no keyringResult', async () => {
+		await renderModal();
+
+		expect( screen.queryByText( 'Confirmation Form' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Services List' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Manage Jetpack Social connections' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the ConfirmationForm when there is a keyringResult', async () => {
+		stubGetKeyringResult.mockReturnValue( { ID: 'facebook' } );
+
+		await renderModal();
+
+		expect( screen.getByText( 'Confirmation Form' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Connection confirmation' ) ).toBeInTheDocument();
+	} );
+
+	it( 'resets the keyring result when the dialog is closed', async () => {
+		const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+
+		await renderModal();
+
+		await user.click( screen.getByRole( 'button', { name: /close/i } ) );
+
+		// Dialog has a close animation. Wait for it to finish.
+		await act( () => {
+			jest.runAllTimers();
+		} );
+
+		expect( stubSetKeyringResult ).toHaveBeenCalledWith( null );
+	} );
+} );
diff --git a/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
index abfef5b21cb9..636c6fba7010 100644
--- a/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
+++ b/projects/packages/publicize/_inc/components/services/custom-inputs-modern.tsx
@@ -1,11 +1,10 @@
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	Notice,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement, useCallback, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Notice } from '@wordpress/ui';
 import clsx from 'clsx';
 import { store } from '../../social-store';
 import styles from './style-modern.module.scss';
@@ -160,12 +159,14 @@ export function ModernCustomInputs( { service }: CustomInputsProps ) {
 						) }
 					/>
 					{ reconnectingAccount?.service_name === 'bluesky' && (
-						<Notice status="error" isDismissible={ false }>
-							{ __(
-								'Please provide an app password to fix the connection.',
-								'jetpack-publicize-pkg'
-							) }
-						</Notice>
+						<Notice.Root intent="error">
+							<Notice.Description>
+								{ __(
+									'Please provide an app password to fix the connection.',
+									'jetpack-publicize-pkg'
+								) }
+							</Notice.Description>
+						</Notice.Root>
 					) }
 				</div>
 			</>
diff --git a/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx b/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
index bfa7f7b3741f..797b8018bb11 100644
--- a/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-connection-info-modern.tsx
@@ -1,8 +1,7 @@
-import { Text } from '@automattic/jetpack-components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
-import { Tooltip } from '@wordpress/ui';
+import { info } from '@wordpress/icons';
+import { IconButton, Stack, Text } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import ConnectionIcon from '../connection-icon';
@@ -31,8 +30,8 @@ export const ModernServiceConnectionInfo = ( {
 	);
 
 	return (
-		<div className={ styles[ 'service-connection-wrapper' ] }>
-			<div className={ styles[ 'service-connection' ] }>
+		<Stack direction="column" gap="lg">
+			<Stack direction="row" gap="lg">
 				<div>
 					<ConnectionIcon
 						className={ styles[ 'profile-pic' ] }
@@ -40,7 +39,12 @@ export const ModernServiceConnectionInfo = ( {
 						label={ connection.display_name }
 					/>
 				</div>
-				<div className={ styles[ 'connection-details' ] }>
+				<Stack
+					direction="column"
+					align="flex-start"
+					gap="sm"
+					className={ styles[ 'connection-details' ] }
+				>
 					<ConnectionName connection={ connection } tone="neutral" />
 					{ ( conn => {
 						/**
@@ -62,34 +66,24 @@ export const ModernServiceConnectionInfo = ( {
 							);
 
 							return (
-								<div className={ styles[ 'mark-shared-wrap' ] }>
+								<Stack direction="row" align="center" gap="sm">
 									<MarkAsShared connection={ conn } />
-									<Tooltip.Root>
-										<Tooltip.Trigger
-											render={
-												<button
-													type="button"
-													className={ styles[ 'mark-shared-help' ] }
-													aria-label={ markAsSharedHelp }
-												>
-													<Icon icon={ info } size={ 18 } />
-												</button>
-											}
-										/>
-										{ /*
-										 * The WPDS Tooltip positioner defaults to
-										 * `z-index: var(--wp-ui-tooltip-z-index, initial)`,
-										 * which falls back to `auto`. Inside the
-										 * wp-components Modal (z-index ~100000), the
-										 * popup ends up behind the modal frame. Pin
-										 * the popup above the modal so the tooltip
-										 * is visible when hovering inside the modal.
-										 */ }
-										<Tooltip.Popup sideOffset={ 8 } style={ { zIndex: 100001 } }>
-											{ markAsSharedHelp }
-										</Tooltip.Popup>
-									</Tooltip.Root>
-								</div>
+									{ /*
+									 * IconButton carries its own tooltip + accessible
+									 * label, so it replaces the hand-rolled button and
+									 * Tooltip. Now that the modal is a portaled WPDS
+									 * Dialog, the tooltip stacks above the frame on its
+									 * own — the previous `z-index: 100001` workaround is
+									 * no longer needed.
+									 */ }
+									<IconButton
+										variant="minimal"
+										tone="neutral"
+										size="small"
+										label={ markAsSharedHelp }
+										icon={ info }
+									/>
+								</Stack>
 							);
 						}
 
@@ -111,12 +105,12 @@ export const ModernServiceConnectionInfo = ( {
 							</>
 						) : null;
 					} )( connection ) }
-				</div>
+				</Stack>
 				<div className={ styles[ 'connection-actions' ] }>
 					<Disconnect connection={ connection } variant="outline" size="compact" tone="neutral" />
 				</div>
-			</div>
+			</Stack>
 			<ConnectionTemplateEditor connection={ connection } />
-		</div>
+		</Stack>
 	);
 };
diff --git a/projects/packages/publicize/_inc/components/services/service-item-modern.tsx b/projects/packages/publicize/_inc/components/services/service-item-modern.tsx
index 683e95c53162..ccd4d0951291 100644
--- a/projects/packages/publicize/_inc/components/services/service-item-modern.tsx
+++ b/projects/packages/publicize/_inc/components/services/service-item-modern.tsx
@@ -1,9 +1,9 @@
-import { useBreakpointMatch } from '@automattic/jetpack-components';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Icon, chevronDown } from '@wordpress/icons';
-import { Collapsible } from '@wordpress/ui';
+import { chevronDown } from '@wordpress/icons';
+import { Collapsible, Icon, Text } from '@wordpress/ui';
 import { store as socialStore } from '../../social-store';
 import { ConnectForm } from './connect-form';
 import { ServiceItemDetails, ServicesItemDetailsProps } from './service-item-details';
@@ -34,7 +34,7 @@ export function ModernServiceItem( {
 	serviceConnections,
 	isPanelDefaultOpen,
 }: ServicesItemProps ) {
-	const [ isSmall ] = useBreakpointMatch( 'sm' );
+	const isSmall = useViewportMatch( 'small', '<' );
 
 	const [ isPanelOpen, setIsPanelOpen ] = useState( Boolean( isPanelDefaultOpen ) );
 	const togglePanel = useCallback( () => setIsPanelOpen( open => ! open ), [] );
@@ -87,7 +87,9 @@ export function ModernServiceItem( {
 				</div>
 				<div className={ styles[ 'service-basics' ] }>
 					<div className={ styles.heading }>
-						<span className={ styles.title }>{ service.label }</span>
+						<Text variant="body-lg" className={ styles.title }>
+							{ service.label }
+						</Text>
 					</div>
 					{ ! isSmall && ! serviceConnections.length ? (
 						<span className={ styles.description }>{ service.description }</span>
diff --git a/projects/packages/publicize/_inc/components/services/style-modern.module.scss b/projects/packages/publicize/_inc/components/services/style-modern.module.scss
index 2b40d4981280..cbe3ea0b0987 100644
--- a/projects/packages/publicize/_inc/components/services/style-modern.module.scss
+++ b/projects/packages/publicize/_inc/components/services/style-modern.module.scss
@@ -33,9 +33,9 @@
 		gap: var(--wpds-dimension-gap-lg, 16px);
 	}
 
+	// Size comes from the `body-lg` Text variant; keep the colour + medium weight.
 	.title {
 		color: var(--wpds-color-fg-content-neutral, var(--jp-gray-80));
-		font-size: 0.875rem;
 		font-weight: var(--wpds-typography-font-weight-medium, 499);
 		line-height: 1.4;
 	}
@@ -61,7 +61,7 @@
 	}
 
 	.service-connection-list {
-		border-top: 1px solid var(--jp-gray-5);
+		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
 		padding-top: 1rem;
 
 		li:not(:last-child) {
@@ -86,7 +86,7 @@
 	width: 100%;
 
 	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline: var(--wpds-border-width-focus, 2px) solid var(--wpds-color-stroke-focus-brand, #3858e9);
 		outline-offset: calc(var(--wpds-border-width-focus, 2px) * -1);
 	}
 
@@ -105,10 +105,9 @@
 .chevron {
 	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	flex-shrink: 0;
-	transition: rotate 0.15s ease-out;
 
-	@media (prefers-reduced-motion) {
-		transition: none;
+	@media not (prefers-reduced-motion) {
+		transition: rotate var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
 	}
 }
 
@@ -129,7 +128,7 @@
 	}
 
 	@media not (prefers-reduced-motion) {
-		transition: all 0.15s ease-out;
+		transition: all var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
 	}
 }
 
@@ -166,34 +165,19 @@
 	}
 }
 
-.service-connection-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+// The connection row + its detail column are laid out with the WPDS Stack
+// component; only the flexible detail column and the avatar sizing remain.
+.connection-details {
+	flex: 1;
 }
 
-.service-connection {
-	display: flex;
-	gap: 1rem;
-
-	.connection-details {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.5rem;
-	}
-
-	.profile-pic {
+.profile-pic {
 
-		&,
-		img {
-			width: 38px;
-			height: 38px;
-		}
+	&,
+	img {
+		width: 38px;
+		height: 38px;
 	}
-
-
 }
 
 .connect-form-wrapper {
@@ -244,37 +228,18 @@
 	}
 }
 
-.mark-shared-wrap {
-	align-items: center;
-	display: flex;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+.error-text.error-text {
+	color: var(--jp-red);
+	font-style: italic;
 }
 
-.mark-shared-help {
-	align-items: center;
-	background: transparent;
-	border: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	cursor: var(--wpds-cursor-control, pointer);
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	padding: 0;
-	width: 24px;
-
-	&:hover,
-	&:focus-visible {
-		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	}
+// When a field fails validation the wrapper gets `.fields-item-error`. Mirror
+// the legacy CustomInputs affordance by painting the InputControl border red so
+// the field itself signals the error, not just the help text below it.
+.fields-item-error {
 
-	&:focus-visible {
-		outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: var(--wpds-border-width-focus, 2px);
+	:global(.components-input-control__backdrop) {
+		border-color: var(--jp-red) !important;
+		box-shadow: 0 0 0 1px var(--jp-red);
 	}
 }
-
-.error-text.error-text {
-	color: var(--jp-red);
-	font-style: italic;
-}
diff --git a/projects/packages/publicize/_inc/components/services/tests/custom-inputs-modern.test.js b/projects/packages/publicize/_inc/components/services/tests/custom-inputs-modern.test.js
new file mode 100644
index 000000000000..54578b0726ef
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/tests/custom-inputs-modern.test.js
@@ -0,0 +1,73 @@
+import { render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSelect } from '@wordpress/data';
+import { store } from '../../../social-store';
+import { setup } from '../../../utils/test-factory';
+import { ModernCustomInputs } from '../custom-inputs-modern';
+
+const stubReconnectingAccount = value => {
+	let storeSelect;
+	renderHook( () => useSelect( select => ( storeSelect = select( store ) ) ) );
+	jest.spyOn( storeSelect, 'getReconnectingAccount' ).mockReturnValue( value );
+};
+
+describe( 'ModernCustomInputs', () => {
+	beforeEach( () => {
+		setup();
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders the Mastodon handle field', () => {
+		stubReconnectingAccount( undefined );
+
+		render( <ModernCustomInputs service={ { id: 'mastodon' } } /> );
+
+		expect( screen.getByRole( 'textbox', { name: /Mastodon handle/i } ) ).toBeInTheDocument();
+	} );
+
+	test( 'renders the Bluesky handle and app password fields', () => {
+		stubReconnectingAccount( undefined );
+
+		render( <ModernCustomInputs service={ { id: 'bluesky' } } /> );
+
+		expect( screen.getByRole( 'textbox', { name: /Bluesky handle/i } ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( /App password/i ) ).toBeInTheDocument();
+	} );
+
+	test( 'flags an invalid Bluesky handle that contains dots', async () => {
+		const user = userEvent.setup();
+		stubReconnectingAccount( undefined );
+
+		render( <ModernCustomInputs service={ { id: 'bluesky' } } /> );
+
+		await user.type(
+			screen.getByRole( 'textbox', { name: /Bluesky handle/i } ),
+			'foo.bar.bsky.social'
+		);
+
+		expect( screen.getByText( /Bluesky usernames cannot contain dots/i ) ).toBeInTheDocument();
+	} );
+
+	test( 'shows the reconnect notice when reconnecting a Bluesky account', () => {
+		stubReconnectingAccount( { service_name: 'bluesky', external_handle: 'me.bsky.social' } );
+
+		render( <ModernCustomInputs service={ { id: 'bluesky' } } /> );
+
+		// The Notice renders the message and @wordpress/a11y mirrors it into a
+		// live region, so the copy appears more than once — assert it's present.
+		expect(
+			screen.getAllByText( 'Please provide an app password to fix the connection.' ).length
+		).toBeGreaterThan( 0 );
+	} );
+
+	test( 'renders nothing for services without custom inputs', () => {
+		stubReconnectingAccount( undefined );
+
+		const { container } = render( <ModernCustomInputs service={ { id: 'facebook' } } /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );
diff --git a/projects/packages/publicize/_inc/components/services/tests/service-connection-info-modern.test.js b/projects/packages/publicize/_inc/components/services/tests/service-connection-info-modern.test.js
new file mode 100644
index 000000000000..55b8ec113367
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/tests/service-connection-info-modern.test.js
@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react';
+import { setup } from '../../../utils/test-factory';
+import { ModernServiceConnectionInfo } from '../service-connection-info-modern';
+
+jest.mock( '../../connection-management/connection-name', () => ( {
+	ConnectionName: ( { connection } ) => <div>{ connection.display_name }</div>,
+} ) );
+jest.mock( '../../connection-management/connection-status', () => ( {
+	ConnectionStatus: ( { connection } ) => <div>Status: { connection.status }</div>,
+} ) );
+jest.mock( '../../connection-management/connection-template', () => ( {
+	ConnectionTemplateEditor: () => null,
+} ) );
+jest.mock( '../../connection-management/disconnect', () => ( {
+	Disconnect: ( { connection } ) => <button>Disconnect { connection.display_name }</button>,
+} ) );
+jest.mock( '../../connection-management/mark-as-shared', () => ( {
+	MarkAsShared: () => <button>Mark as Shared</button>,
+} ) );
+
+describe( 'ModernServiceConnectionInfo', () => {
+	const connection = {
+		profile_picture: 'https://example.com/profile.jpg',
+		display_name: 'Example User',
+		status: 'connected',
+	};
+
+	const renderComponent = ( connOverrides = {}, serviceOverrides = {}, props = {} ) => {
+		setup( { canUserManageConnection: props.canUserManageConnection ?? true } );
+		render(
+			<ModernServiceConnectionInfo
+				connection={ { ...connection, ...connOverrides } }
+				service={ { ...serviceOverrides } }
+				canMarkAsShared={ props.canMarkAsShared ?? false }
+			/>
+		);
+	};
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders the profile picture and connection name', () => {
+		renderComponent();
+
+		const profilePic = screen.getByAltText( 'Example User' );
+		expect( profilePic ).toHaveAttribute( 'src', 'https://example.com/profile.jpg' );
+		expect( screen.getByText( 'Example User' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Disconnect Example User' ) ).toBeInTheDocument();
+	} );
+
+	test( 'renders the mark-as-shared toggle with the info IconButton', () => {
+		renderComponent( {}, {}, { canMarkAsShared: true } );
+
+		expect( screen.getByText( 'Mark as Shared' ) ).toBeInTheDocument();
+		// The IconButton exposes its help text as an accessible name.
+		expect(
+			screen.getByRole( 'button', { name: /available to all administrators/i } )
+		).toBeInTheDocument();
+	} );
+
+	test( 'renders the connection status when broken and manageable', () => {
+		renderComponent( { status: 'broken' } );
+
+		expect( screen.getByText( 'Status: broken' ) ).toBeInTheDocument();
+	} );
+
+	test( 'tells non-admins the connection was added by a site administrator', () => {
+		renderComponent( {}, {}, { canUserManageConnection: false } );
+
+		expect(
+			screen.getByText( 'This connection is added by a site administrator.' )
+		).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/packages/publicize/_inc/components/services/tests/service-item-modern.test.js b/projects/packages/publicize/_inc/components/services/tests/service-item-modern.test.js
new file mode 100644
index 000000000000..2112b8433a3b
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/tests/service-item-modern.test.js
@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setup } from '../../../utils/test-factory';
+import { ModernServiceItem } from '../service-item-modern';
+
+jest.mock( '../connect-form', () => ( {
+	ConnectForm: () => <div>Connect Form</div>,
+} ) );
+jest.mock( '../service-item-details', () => ( {
+	ServiceItemDetails: () => <div>Service Details</div>,
+} ) );
+jest.mock( '../service-item-notice', () => ( {
+	ServiceItemNotice: () => <div>Service Notice</div>,
+} ) );
+jest.mock( '../service-status', () => ( {
+	ServiceStatus: () => <div>Service Status</div>,
+} ) );
+
+const SERVICE = {
+	id: 'mastodon',
+	label: 'Mastodon',
+	description: 'Share with your network.',
+	needsCustomInputs: true,
+	icon: () => <svg aria-hidden="true" />,
+};
+
+describe( 'ModernServiceItem', () => {
+	beforeEach( () => {
+		setup();
+		// jsdom doesn't implement scrollIntoView, which the auto-open path calls.
+		// eslint-disable-next-line jest/prefer-spy-on
+		Element.prototype.scrollIntoView = jest.fn();
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders the service heading collapsed by default', () => {
+		render( <ModernServiceItem service={ SERVICE } serviceConnections={ [] } /> );
+
+		expect( screen.getByText( 'Mastodon' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { expanded: false } ) ).toBeInTheDocument();
+	} );
+
+	test( 'expands the panel to reveal the service details when the row is clicked', async () => {
+		const user = userEvent.setup();
+		render( <ModernServiceItem service={ SERVICE } serviceConnections={ [] } /> );
+
+		await user.click( screen.getByRole( 'button', { expanded: false } ) );
+
+		expect( screen.getByRole( 'button', { expanded: true } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Service Details' ) ).toBeInTheDocument();
+	} );
+
+	test( 'opens with the panel already expanded when isPanelDefaultOpen is set', () => {
+		render(
+			<ModernServiceItem service={ SERVICE } serviceConnections={ [] } isPanelDefaultOpen />
+		);
+
+		expect( screen.getByRole( 'button', { expanded: true } ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/packages/publicize/_inc/components/services/tests/services-list-modern.test.js b/projects/packages/publicize/_inc/components/services/tests/services-list-modern.test.js
new file mode 100644
index 000000000000..db1312236709
--- /dev/null
+++ b/projects/packages/publicize/_inc/components/services/tests/services-list-modern.test.js
@@ -0,0 +1,34 @@
+import { render, renderHook, screen } from '@testing-library/react';
+import { useSelect } from '@wordpress/data';
+import { store } from '../../../social-store';
+import { setup } from '../../../utils/test-factory';
+import { ModernServicesList } from '../services-list-modern';
+
+// Keep the list shallow — each row is covered by service-item-modern's own test.
+jest.mock( '../service-item-modern', () => ( {
+	ModernServiceItem: ( { service } ) => <div>Row: { service.label }</div>,
+} ) );
+
+const prepareStore = () => {
+	setup();
+	let storeSelect;
+	renderHook( () => useSelect( select => ( storeSelect = select( store ) ) ) );
+	jest.spyOn( storeSelect, 'getReconnectingAccount' ).mockReturnValue( undefined );
+};
+
+describe( 'ModernServicesList', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders a row for each supported service', () => {
+		prepareStore();
+		render( <ModernServicesList /> );
+
+		// The shared factory seeds Facebook, LinkedIn and Instagram Business.
+		expect( screen.getByText( 'Row: Facebook' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Row: LinkedIn' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Row: Instagram Business' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'listitem' ) ).toHaveLength( 3 );
+	} );
+} );