diff --git a/apps/ui/src/components/connect-site-picker/index.tsx b/apps/ui/src/components/connect-site-picker/index.tsx
new file mode 100644
index 0000000000..a0c1d42573
--- /dev/null
+++ b/apps/ui/src/components/connect-site-picker/index.tsx
@@ -0,0 +1,336 @@
+import { Spinner, VisuallyHidden } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { external, search } from '@wordpress/icons';
+import { Badge, Button, Icon } from '@wordpress/ui';
+import { clsx } from 'clsx';
+import { useMemo, useState } from 'react';
+import { useConnector } from '@/data/core';
+import { useUserLocale } from '@/data/queries/use-user-locale';
+import { useOffline } from '@/hooks/use-offline';
+import { getLocalizedLink } from '@/lib/docs-links';
+import { presentRemoteSites, searchRemoteSites, type ConnectSiteGroup } from './site-presentation';
+import styles from './style.module.css';
+import type { SyncSite } from '@/data/core';
+
+const createWpcomSiteUrl = new URL( 'https://wordpress.com/setup/new-hosted-site' );
+createWpcomSiteUrl.searchParams.set( 'ref', 'studio' );
+createWpcomSiteUrl.searchParams.set( 'section', 'studio-sync' );
+createWpcomSiteUrl.searchParams.set( 'showDomainStep', 'true' );
+
+function getEnvironmentLabel( site: SyncSite ): string {
+ if ( site.isPressable && site.environmentType === 'development' ) return __( 'Development' );
+ if ( site.isPressable && site.environmentType === 'staging' ) return __( 'Staging' );
+ if ( site.isStaging ) return __( 'Staging' );
+ return __( 'Production' );
+}
+
+function getEnvironmentIntent( site: SyncSite ) {
+ if ( site.isPressable && site.environmentType === 'development' ) return 'informational';
+ if ( site.isStaging || ( site.isPressable && site.environmentType === 'staging' ) )
+ return 'medium';
+ return 'stable';
+}
+
+function getSiteStatus( site: SyncSite, group: ConnectSiteGroup ): string {
+ if ( group === 'needs-transfer' ) {
+ return __( 'Enable hosting features on WordPress.com before connecting this site.' );
+ }
+ if ( group === 'needs-upgrade' ) {
+ return __( 'Upgrade this site to a supported plan before connecting it.' );
+ }
+ if ( site.syncSupport === 'missing-permissions' ) {
+ return __( "Your account doesn't have permission to manage this site." );
+ }
+ if ( site.syncSupport === 'deleted' ) return __( 'This site has been deleted.' );
+ return __( 'This site does not support pulling into Studio.' );
+}
+
+export function getSiteName( site: SyncSite ): string {
+ if ( site.name.trim() ) return site.name.trim();
+ try {
+ return new URL( site.url ).hostname;
+ } catch {
+ return __( 'WordPress site' );
+ }
+}
+
+function RemoteSiteCard( {
+ site,
+ group,
+ isSelected,
+ onSelect,
+}: ReturnType< typeof presentRemoteSites >[ number ] & {
+ isSelected: boolean;
+ onSelect: ( id: number ) => void;
+} ) {
+ const connector = useConnector();
+ const isAvailable = group === 'available';
+ const siteName = getSiteName( site );
+ const providerLabel = site.isPressable ? __( 'Pressable' ) : __( 'WP.com' );
+ const environmentLabel = getEnvironmentLabel( site );
+ const siteStatus = isAvailable ? '' : getSiteStatus( site, group );
+ const className = clsx(
+ styles.siteCard,
+ isSelected && styles.siteCardSelected,
+ ! isAvailable && styles.siteCardUnavailable
+ );
+
+ return (
+
+ isAvailable && onSelect( site.id ) }
+ >
+
+
+ { providerLabel }
+ { environmentLabel }
+
+
+
+ { siteName }
+ { site.url.replace( /^https?:\/\//, '' ) }
+ { siteStatus && { siteStatus } }
+
+
+ { group === 'needs-transfer' && (
+
+ void connector.openExternalUrl( `https://wordpress.com/hosting-features/${ site.id }` )
+ }
+ >
+ { __( 'Enable hosting features' ) }
+
+ ) }
+ { group === 'needs-upgrade' && (
+
+ void connector.openExternalUrl( `https://wordpress.com/plans/${ site.id }` )
+ }
+ >
+ { __( 'View plans' ) }
+
+ ) }
+
+ );
+}
+
+export type ConnectSitePickerProps = {
+ sites: SyncSite[] | undefined;
+ isLoading: boolean;
+ isFetching: boolean;
+ error: unknown;
+ onRefresh: () => void;
+ selectedId: number | null;
+ onSelect: ( id: number ) => void;
+ // Shown when the account has no sites this flow can use.
+ emptyTitle?: string;
+ emptyDescription?: string;
+};
+
+/**
+ * The list of WordPress.com and Pressable sites a Studio site can be wired to,
+ * with its search, its grouping into what can and can't be connected, and the
+ * states around loading them. Shared by onboarding, which uses it to bring a
+ * live site down into Studio, and by publishing, which uses it to send one up —
+ * the choice is the same either way, so it should look the same.
+ */
+export function ConnectSitePicker( {
+ sites,
+ isLoading,
+ isFetching,
+ error,
+ onRefresh,
+ selectedId,
+ onSelect,
+ emptyTitle = __( 'No sites found' ),
+ emptyDescription = __( 'This account has no WordPress.com or Pressable sites to show.' ),
+}: ConnectSitePickerProps ) {
+ const connector = useConnector();
+ const locale = useUserLocale();
+ const isOffline = useOffline();
+ const [ searchQuery, setSearchQuery ] = useState( '' );
+
+ const presentedSites = useMemo( () => presentRemoteSites( sites ?? [] ), [ sites ] );
+ const filteredSites = useMemo(
+ () => searchRemoteSites( presentedSites, searchQuery ),
+ [ presentedSites, searchQuery ]
+ );
+ const isSingleSite = presentedSites.length === 1 && searchQuery.trim() === '';
+ const isSingleAvailableSite = isSingleSite && presentedSites[ 0 ].group === 'available';
+
+ if ( isOffline ) {
+ return (
+
+
{ __( "You're offline" ) }
+
{ __( 'Reconnect to load your WordPress.com and Pressable sites.' ) }
+
+
+
{ __( 'Loading your sites…' ) }
+
+
{ __( "We couldn't load your sites" ) }
+
{ __( 'Check your connection and try again.' ) }
+
+ { __( 'Retry' ) }
+
+
+
{ emptyTitle }
+
{ emptyDescription }
+
void connector.openExternalUrl( createWpcomSiteUrl.toString() ) }
+ >
+ { __( 'Create a WordPress.com site' ) }
+
+
+ { ! isSingleSite && (
+
+ { __( 'Search sites' ) }
+
+ ) }
+
+
+ { isFetching ? __( 'Refreshing…' ) : __( 'Refresh list' ) }
+
+ ·
+
+ void connector.openExternalUrl( getLocalizedLink( locale, 'docsSyncSupportedSites' ) )
+ }
+ >
+ { __( 'Supported sites' ) }
+
+
+
+
+ { sprintf(
+ // translators: %s is the site search query.
+ __( 'No sites match “%s”.' ),
+ searchQuery
+ ) }
+
+
+ { sections.map(
+ ( section ) =>
+ section.sites.length > 0 && (
+
+
+
{ section.title }
+
{ section.description }
+
+ { section.sites.map( ( entry ) => (
+
+
+ )
+ ) }
+
-
- setPublishOpen( false ) } />
-
-
+
-
- { __( 'Publish this site' ) }
-
- { authUser ? (
-
- { pickableSites.isLoading ? (
-
{ __( 'Loading sites…' ) }
- ) : pickableSites.data && pickableSites.data.length > 0 ? (
-
- { pickableSites.data.map( ( candidate ) => (
-
- void handlePickSite( candidate ) }
- >
- { candidate.name || candidate.url }
- { stripProtocol( candidate.url ) }
-
-
- ) ) }
-
- ) : (
-
- { __( 'No WordPress.com sites available to publish to.' ) }
-
- ) }
-
- ) : null }
-
- { __( 'Create a new WordPress.com site' ) }
-
-
+
+
+ { __( 'Publish this site' ) }
+
+
+
+ { __(
+ 'Choose the WordPress.com or Pressable site to publish to. Pushing sends this Studio site’s files and database there.'
+ ) }
+
+ { error ? (
+
+ { error }
+
+ ) : null }
+ void pickableSites.refetch() }
+ selectedId={ selectedId }
+ onSelect={ setSelectedId }
+ emptyTitle={ __( 'No sites available' ) }
+ emptyDescription={ __(
+ 'Every site on this account is already connected to a Studio site, or cannot be published to.'
+ ) }
+ />
+
+
+
+ { __( 'Create a new site' ) }
+
+
+ { __( 'Cancel' ) }
+
+ void handleConnect() }
+ >
+ { __( 'Connect site' ) }
+
+
+
+
+ );
+}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
index d3f3f9c165..df75f85274 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
@@ -5,6 +5,11 @@ import { check, chevronLeft, external, search } from '@wordpress/icons';
import { Badge, Button, Icon } from '@wordpress/ui';
import { clsx } from 'clsx';
import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+ presentRemoteSites,
+ searchRemoteSites,
+ type ConnectSiteGroup,
+} from '@/components/connect-site-picker/site-presentation';
import { OnboardingFooter } from '@/components/onboarding-footer';
import { toast } from '@/data/app-messages';
import { useConnector } from '@/data/core';
@@ -18,7 +23,6 @@ import { getLocalizedLink } from '@/lib/docs-links';
import { onboardingLayoutRoute, useOnboardingProgress } from '../layout-onboarding';
import sharedStyles from '../layout-onboarding/style.module.css';
import { ConnectSiteLifecycleError, runConnectSiteLifecycle } from './connect-site';
-import { presentRemoteSites, searchRemoteSites, type ConnectSiteGroup } from './site-presentation';
import styles from './style.module.css';
import type { SyncSite } from '@/data/core';