Add Publish banner on Overview tab for non-connected sites

src/components/publish-site-button.tsx

@@ -0,0 +1,43 @@
+import { globe, cloudUpload } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
+import Button from 'src/components/button';
+import { useSyncSites } from 'src/hooks/sync-sites';
+import { useContentTabs } from 'src/hooks/use-content-tabs';
+import { useAppDispatch } from 'src/stores';
+import { connectedSitesActions, useConnectedSitesData } from 'src/stores/sync';
+import { Tooltip } from './tooltip';
+
+export const PublishSiteButton = () => {
+	const { __ } = useI18n();
+	const dispatch = useAppDispatch();
+	const { setSelectedTab } = useContentTabs();
+	const { connectedSites } = useConnectedSitesData();
+	const { isAnySitePulling, isAnySitePushing } = useSyncSites();
+	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
+	const handlePublishClick = () => {
+		setSelectedTab( 'sync' );
+		dispatch( connectedSitesActions.openModal( 'push' ) );
+	};
+
+	if ( connectedSites.length !== 0 ) return null;
+
+	return (
+		<Tooltip
+			disabled={ ! isAnySiteSyncing }
+			text={ __(
+				'Another site is syncing. Please wait for the sync to finish before you publish your site.'
+			) }
+			placement="left"
+		>
+			<Button
+				variant="primary"
+				disabled={ isAnySiteSyncing }
+				aria-label={ __( 'Publish site' ) }
+				onClick={ handlePublishClick }
+				icon={ cloudUpload }
+			>
+				{ __( 'Publish site' ) }
+			</Button>
+		</Tooltip>
+	);
+};

src/components/site-content-tabs.tsx

@@ -25,19 +25,34 @@ export function SiteContentTabs() {
 	// Remount: Avoid focus loss on user tab changes (no remount),
 	// but remount on programmatic changes and site switches so initial tab/content state resets.
 	const [ keyCounter, setKeyCounter ] = useState( 0 );
+	const [ programmaticTab, setProgrammaticTab ] = useState( selectedTab );
 	const lastChangeWasUser = useRef( false );
 	const isFirstRender = useRef( true );
+	const prevSelectedTab = useRef( selectedTab );
 
 	useEffect( () => {
 		if ( isFirstRender.current ) {
 			isFirstRender.current = false;
+			prevSelectedTab.current = selectedTab;
 			return;
 		}
+
+		// If tab didn't actually change, skip
+		if ( prevSelectedTab.current === selectedTab ) {
+			return;
+		}
+
+		// Check if this was a user action by seeing if the flag was set BEFORE selectedTab changed
 		if ( lastChangeWasUser.current ) {
 			lastChangeWasUser.current = false;
+			prevSelectedTab.current = selectedTab;
 			return;
 		}
+
+		// Programmatic change - update both counter and tab to force remount
 		setKeyCounter( ( k ) => k + 1 );
+		setProgrammaticTab( selectedTab );
+		prevSelectedTab.current = selectedTab;
 	}, [ selectedTab ] );
 
 	if ( ! loadingSites && ! localSites.length ) {
@@ -71,12 +86,15 @@ export function SiteContentTabs() {
 				tabs={ tabs }
 				orientation="horizontal"
 				onSelect={ ( tabName ) => {
-					// Mark this as a user-initiated change so we don't remount
-					lastChangeWasUser.current = true;
+					// Mark this as a user-initiated change BEFORE calling setSelectedTab
+					// so the useEffect can detect it was user-initiated
+					if ( tabName !== selectedTab ) {
+						lastChangeWasUser.current = true;
+					}
 					setSelectedTab( tabName as TabName );
 				} }
 				initialTabName={ selectedTab }
-				key={ `${ selectedSite.id }-${ keyCounter }` }
+				key={ `${ selectedSite.id }-${ keyCounter }-${ programmaticTab }` }
 			>
 				{ ( { name } ) => (
 					<div

src/components/site-management-actions.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { ActionButton } from 'src/components/action-button';
+import { PublishSiteButton } from 'src/components/publish-site-button';
 import { Tooltip } from 'src/components/tooltip';
 import { useSyncSites } from 'src/hooks/sync-sites';
 import { useImportExport } from 'src/hooks/use-import-export';
@@ -21,6 +22,7 @@ export const SiteManagementActions = ( {
 	const { __ } = useI18n();
 	const { isSiteImporting } = useImportExport();
 	const { isSiteIdPulling } = useSyncSites();
+
 	if ( ! selectedSite ) {
 		return null;
 	}
@@ -35,24 +37,27 @@ export const SiteManagementActions = ( {
 	}
 
 	return (
-		<Tooltip
-			disabled={ ! disabled }
-			text={ __( "A site can't be stopped or started during import." ) }
-			placement="left"
-		>
-			<ActionButton
-				isRunning={ selectedSite.running }
-				isLoading={ loading }
-				onClick={ () => {
-					if ( selectedSite.running ) {
-						void onStop( selectedSite.id );
-					} else {
-						void onStart( selectedSite.id );
-					}
-				} }
-				disabled={ disabled }
-				buttonLabelOnDisabled={ buttonLabelOnDisabled }
-			/>
-		</Tooltip>
+		<div className="flex gap-2">
+			<PublishSiteButton />
+			<Tooltip
+				disabled={ ! disabled }
+				text={ __( "A site can't be stopped or started during import." ) }
+				placement="left"
+			>
+				<ActionButton
+					isRunning={ selectedSite.running }
+					isLoading={ loading }
+					onClick={ () => {
+						if ( selectedSite.running ) {
+							void onStop( selectedSite.id );
+						} else {
+							void onStart( selectedSite.id );
+						}
+					} }
+					disabled={ disabled }
+					buttonLabelOnDisabled={ buttonLabelOnDisabled }
+				/>
+			</Tooltip>
+		</div>
 	);
 };

src/components/tests/content-tab-overview-shortcuts-section.test.tsx

@@ -2,6 +2,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { ContentTabOverview } from 'src/components/content-tab-overview';
+import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { useThemeDetails } from 'src/hooks/use-theme-details';
 import { isMac } from 'src/lib/app-globals';
 import { getIpcApi } from 'src/lib/get-ipc-api';
@@ -26,12 +27,23 @@ const selectedSite: StartedSiteDetails = {
 const mockGetIpcApi = getIpcApi as jest.Mock;
 jest.mock( 'src/lib/get-ipc-api' );
 jest.mock( 'src/hooks/use-theme-details' );
+jest.mock( 'src/stores/sync', () => ( {
+	...jest.requireActual( 'src/stores/sync' ),
+	useConnectedSitesData: jest.fn().mockReturnValue( {
+		connectedSites: [],
+		localSiteId: 'site-id',
+	} ),
+} ) );
 
 // Replace the store's reducer with our test reducer
 store.replaceReducer( testReducer );
 
 function renderWithProvider( component: React.ReactElement ) {
-	return render( <Provider store={ store }>{ component }</Provider> );
+	return render(
+		<Provider store={ store }>
+			<ContentTabsProvider>{ component }</ContentTabsProvider>
+		</Provider>
+	);
 }
 
 describe( 'ShortcutsSection', () => {

src/components/tests/content-tab-overview.test.tsx

@@ -2,6 +2,7 @@
 import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { ContentTabOverview } from 'src/components/content-tab-overview';
+import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { useThemeDetails } from 'src/hooks/use-theme-details';
 import { store } from 'src/stores';
@@ -77,7 +78,9 @@ describe( 'ContentTabOverview', () => {
 		} );
 		render(
 			<Provider store={ store }>
-				<ContentTabOverview selectedSite={ selectedSite } />
+				<ContentTabsProvider>
+					<ContentTabOverview selectedSite={ selectedSite } />
+				</ContentTabsProvider>
 			</Provider>
 		);
 	};