Live Preview: Fix the Save button wasn't overriden correctly (#95639)

* Live Preview: Fix the Save button wasn't overriden correctly

* Check whether the editor is ready only for the upgrade button

apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx

@@ -53,6 +53,7 @@ const LivePreviewNotice: FC< {
 };
 
 const LivePreviewNoticePlugin = () => {
+	const isReady = useSelect( ( select ) => select( 'core/editor' ).__unstableIsEditorReady() );
 	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
 	const previewingTheme = usePreviewingTheme();
 	const { canPreviewButNeedUpgrade, upgradePlan } = useCanPreviewButNeedUpgrade( previewingTheme );
@@ -72,7 +73,7 @@ const LivePreviewNoticePlugin = () => {
 	if ( canPreviewButNeedUpgrade ) {
 		return (
 			<>
-				<LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } />
+				{ isReady && <LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } /> }
 				<LivePreviewUpgradeNotice { ...{ previewingTheme, dashboardLink } } />
 			</>
 		);

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx

@@ -102,17 +102,21 @@ export const LivePreviewUpgradeButton: FC< {
 			} );
 		};
 
-		if ( canvasMode === 'view' ) {
-			overrideSaveButtonClick( SAVE_HUB_SAVE_BUTTON_SELECTOR );
-			overrideSaveButtonHover( SAVE_HUB_SAVE_BUTTON_SELECTOR );
-		} else if ( canvasMode === 'edit' ) {
-			overrideSaveButtonClick( HEADER_SAVE_BUTTON_SELECTOR );
-			overrideSaveButtonHover( HEADER_SAVE_BUTTON_SELECTOR );
-		}
+		// Delay it to ensure the element is visible.
+		const timeout = window.setTimeout( () => {
+			if ( canvasMode === 'view' ) {
+				overrideSaveButtonClick( SAVE_HUB_SAVE_BUTTON_SELECTOR );
+				overrideSaveButtonHover( SAVE_HUB_SAVE_BUTTON_SELECTOR );
+			} else if ( canvasMode === 'edit' ) {
+				overrideSaveButtonClick( HEADER_SAVE_BUTTON_SELECTOR );
+				overrideSaveButtonHover( HEADER_SAVE_BUTTON_SELECTOR );
+			}
+		}, 0 );
 
 		return () => {
 			resetSaveButton();
 			resetSaveButtonHover();
+			clearTimeout( timeout );
 		};
 	}, [ canvasMode, previewingTheme.id, previewingTheme.type, upgradePlan ] );
 

client/blocks/plugins-scheduled-updates-multisite/index.tsx

@@ -10,7 +10,7 @@ import { ScheduleCreate } from './schedule-create';
 import { ScheduleEdit } from './schedule-edit';
 import { ScheduleList } from './schedule-list';
 
-import 'calypso/hosting/sites/components/dotcom-style.scss';
+import 'calypso/sites/components/dotcom-style.scss';
 import './styles.scss';
 
 type Props = {

client/hosting/deployments/index.tsx

@@ -4,9 +4,9 @@ import {
 	render as clientRender,
 	redirectToHostingPromoIfNotAtomic,
 } from 'calypso/controller';
-import { DOTCOM_GITHUB_DEPLOYMENTS } from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
 import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
+import { DOTCOM_GITHUB_DEPLOYMENTS } from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import {
 	redirectHomeIfIneligible,
 	deploymentCreation,

client/hosting/hosting-features/index.tsx

@@ -1,9 +1,9 @@
 import page, { Context as PageJSContext } from '@automattic/calypso-router';
 import { addQueryArgs } from '@wordpress/url';
 import { makeLayout, render as clientRender, redirectIfP2 } from 'calypso/controller';
-import { DOTCOM_HOSTING_FEATURES } from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
 import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
+import { DOTCOM_HOSTING_FEATURES } from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import { hostingFeatures } from './controller';
 

client/hosting/logs/index.tsx

@@ -4,12 +4,12 @@ import {
 	render as clientRender,
 	redirectToHostingPromoIfNotAtomic,
 } from 'calypso/controller';
+import { siteSelection, sites, navigation } from 'calypso/my-sites/controller';
 import {
 	DOTCOM_LOGS_PHP,
 	DOTCOM_LOGS_WEB,
-} from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
-import { siteSelection, sites, navigation } from 'calypso/my-sites/controller';
+} from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { redirectHomeIfIneligible } from '../monitoring/controller';
 import { phpErrorLogs, webServerLogs } from './controller';
 

client/hosting/monitoring/index.tsx

@@ -5,8 +5,8 @@ import {
 	redirectToHostingPromoIfNotAtomic,
 } from 'calypso/controller';
 import { siteSelection, sites, navigation } from 'calypso/my-sites/controller';
-import { DOTCOM_MONITORING } from '../sites/components/site-preview-pane/constants';
-import { siteDashboard } from '../sites/controller';
+import { DOTCOM_MONITORING } from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { redirectHomeIfIneligible, siteMonitoring } from './controller';
 
 export default function () {

client/hosting/overview/index.tsx

@@ -8,12 +8,12 @@ import {
 	redirectIfJetpackNonAtomic,
 } from 'calypso/controller';
 import { handleHostingPanelRedirect } from 'calypso/hosting/server-settings/controller';
+import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
 import {
 	DOTCOM_HOSTING_CONFIG,
 	DOTCOM_OVERVIEW,
-} from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
-import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
+} from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { hostingOverview, hostingConfiguration, hostingActivate } from './controller';
 
 export default function () {

client/hosting/performance/index.tsx

@@ -4,9 +4,9 @@ import {
 	render as clientRender,
 	redirectToHostingPromoIfNotAtomic,
 } from 'calypso/controller';
-import { DOTCOM_SITE_PERFORMANCE } from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
 import { siteSelection, sites, navigation } from 'calypso/my-sites/controller';
+import { DOTCOM_SITE_PERFORMANCE } from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { sitePerformance } from './controller';
 
 export default function () {

client/hosting/staging-site/index.tsx

@@ -6,9 +6,9 @@ import {
 	redirectToHostingPromoIfNotAtomic,
 } from 'calypso/controller';
 import { handleHostingPanelRedirect } from 'calypso/hosting/server-settings/controller';
-import { DOTCOM_STAGING_SITE } from 'calypso/hosting/sites/components/site-preview-pane/constants';
-import { siteDashboard } from 'calypso/hosting/sites/controller';
 import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
+import { DOTCOM_STAGING_SITE } from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
 import { renderStagingSite } from './controller';
 
 export default function () {

client/sections.js

@@ -17,15 +17,21 @@ const sections = [
 	{
 		name: 'sites-dashboard',
 		paths: [ '/sites' ],
-		module: 'calypso/hosting/sites',
+		module: 'calypso/sites',
 		group: 'sites-dashboard',
 	},
 	{
 		name: 'sites-dashboard',
 		paths: [ '/p2s' ],
-		module: 'calypso/hosting/sites',
+		module: 'calypso/sites',
 		group: 'sites-dashboard',
 	},
+	{
+		name: 'sites-marketing',
+		paths: [ '/sites/marketing' ],
+		module: 'calypso/sites/marketing',
+		group: 'sites',
+	},
 	{
 		name: 'switch-site',
 		paths: [ '/switch-site' ],

client/sites/components/panel-sidebar/index.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@wordpress/components';
+import clsx from 'clsx';
+import { navigate } from 'calypso/lib/navigate';
+
+import './style.scss';
+
+interface PanelSidebarItem {
+	key: string;
+	label: string;
+}
+
+interface PanelSidebarProps {
+	items: PanelSidebarItem[];
+	selectedItemKey: string;
+}
+
+function PanelSidebar( { items, selectedItemKey }: PanelSidebarProps ) {
+	const switchItem = ( key: string ) => {
+		navigate( window.location.pathname.replace( /\/[^/]+\/([^/]+)$/, `/${ key }/$1` ) );
+	};
+
+	return (
+		<div className="panel-sidebar">
+			{ items.map( ( item ) => {
+				return (
+					<Button
+						key={ item.key }
+						className={ clsx( 'panel-sidebar-tab', {
+							'panel-sidebar-tab--active': item.key === selectedItemKey,
+						} ) }
+						onClick={ () => switchItem( item.key ) }
+					>
+						{ item.label }
+					</Button>
+				);
+			} ) }
+		</div>
+	);
+}
+
+export function PanelWithSidebar( { children }: { children: React.ReactNode } ) {
+	return <div className="panel-with-sidebar">{ children }</div>;
+}
+
+export default function makeSidebar( { items }: { items: PanelSidebarItem[] } ) {
+	const props = { items };
+	return ( { selectedItemKey }: { selectedItemKey: string } ) => (
+		<PanelSidebar { ...props } selectedItemKey={ selectedItemKey } />
+	);
+}

client/sites/components/panel-sidebar/style.scss

@@ -0,0 +1,22 @@
+
+@import "~@automattic/color-studio/dist/color-variables";
+
+.panel-with-sidebar {
+	display: flex;
+	gap: 20px;
+}
+
+.panel-sidebar {
+	width: 160px;
+}
+
+.panel-sidebar-tab {
+	width: 100%;
+	color: var(--studio-gray-100);
+
+	&--active {
+		background-color: #f0f0f0;
+		font-weight: 600;
+		border-radius: 4px;
+	}
+}

client/hosting/sites/components/site-preview-pane/constants.ts → client/sites/components/site-preview-pane/constants.ts

@@ -7,6 +7,8 @@ export const DOTCOM_HOSTING_CONFIG = 'dotcom-hosting-config';
 export const DOTCOM_HOSTING_FEATURES = 'dotcom-hosting-features';
 export const DOTCOM_STAGING_SITE = 'dotcom-staging-site';
 export const DOTCOM_SITE_PERFORMANCE = 'dotcom-site-performance';
+export const DOTCOM_MARKETING_TOOLS = 'dotcom-marketing-tools';
+export const DOTCOM_MARKETING_BUSINESS_TOOLS = 'dotcom-marketing-business-tools';
 
 export const FEATURE_TO_ROUTE_MAP: { [ feature: string ]: string } = {
 	[ DOTCOM_OVERVIEW ]: 'overview/:site',
@@ -18,4 +20,6 @@ export const FEATURE_TO_ROUTE_MAP: { [ feature: string ]: string } = {
 	[ DOTCOM_HOSTING_FEATURES ]: 'hosting-features/:site',
 	[ DOTCOM_STAGING_SITE ]: 'staging-site/:site',
 	[ DOTCOM_SITE_PERFORMANCE ]: 'sites/performance/:site',
+	[ DOTCOM_MARKETING_TOOLS ]: 'sites/marketing/tools/:site',
+	[ DOTCOM_MARKETING_BUSINESS_TOOLS ]: 'sites/marketing/business-tools/:site',
 };

client/hosting/sites/components/site-preview-pane/dotcom-preview-pane.tsx → client/sites/components/site-preview-pane/dotcom-preview-pane.tsx

@@ -19,6 +19,8 @@ import {
 	DOTCOM_GITHUB_DEPLOYMENTS,
 	DOTCOM_HOSTING_FEATURES,
 	DOTCOM_STAGING_SITE,
+	DOTCOM_MARKETING_TOOLS,
+	DOTCOM_MARKETING_BUSINESS_TOOLS,
 } from './constants';
 import PreviewPaneHeaderButtons from './preview-pane-header-buttons';
 import SiteEnvironmentSwitcher from './site-environment-switcher';
@@ -102,6 +104,11 @@ const DotcomPreviewPane = ( {
 				enabled: isActiveAtomicSite,
 				featureIds: [ DOTCOM_STAGING_SITE ],
 			},
+			{
+				label: __( 'Marketing' ),
+				enabled: config.isEnabled( 'untangling/hosting-menu' ),
+				featureIds: [ DOTCOM_MARKETING_TOOLS, DOTCOM_MARKETING_BUSINESS_TOOLS ],
+			},
 			{
 				label: hasEnTranslation( 'Server Settings' )
 					? __( 'Server Settings' )

client/sites/marketing/business-tools/index.tsx

@@ -0,0 +1,3 @@
+export default function BusinessTools() {
+	return <div>This is Business Tools page</div>;
+}

client/sites/marketing/controller.tsx

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+import makeSidebar, { PanelWithSidebar } from '../components/panel-sidebar';
+import BusinessTools from './business-tools';
+import MarketingTools from './tools';
+import type { Context as PageJSContext } from '@automattic/calypso-router';
+
+const MarketingSidebar = makeSidebar( {
+	items: [
+		{
+			key: 'tools',
+			get label() {
+				return __( 'Marketing Tools' );
+			},
+		},
+		{
+			key: 'business-tools',
+			get label() {
+				return __( 'Business Tools' );
+			},
+		},
+	],
+} );
+
+export function marketingTools( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<MarketingSidebar selectedItemKey="tools" />
+			<MarketingTools />
+		</PanelWithSidebar>
+	);
+	next();
+}
+
+export function businessTools( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<MarketingSidebar selectedItemKey="business-tools" />
+			<BusinessTools />
+		</PanelWithSidebar>
+	);
+	next();
+}

client/sites/marketing/index.tsx

@@ -0,0 +1,38 @@
+import page, { type Callback } from '@automattic/calypso-router';
+import { makeLayout, render as clientRender } from 'calypso/controller';
+import { siteSelection, sites, navigation } from 'calypso/my-sites/controller';
+import {
+	DOTCOM_MARKETING_BUSINESS_TOOLS,
+	DOTCOM_MARKETING_TOOLS,
+} from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
+import { marketingTools, businessTools } from './controller';
+
+export default function () {
+	page( '/sites/marketing', siteSelection, sites, makeLayout, clientRender );
+
+	const redirectWoy: Callback = ( context ) => {
+		context.page.replace( `/sites/marketing/tools/${ context.params.site }` );
+	};
+	page( '/sites/marketing/:site', redirectWoy );
+
+	page(
+		'/sites/marketing/tools/:site',
+		siteSelection,
+		navigation,
+		marketingTools,
+		siteDashboard( DOTCOM_MARKETING_TOOLS ),
+		makeLayout,
+		clientRender
+	);
+
+	page(
+		'/sites/marketing/business-tools/:site',
+		siteSelection,
+		navigation,
+		businessTools,
+		siteDashboard( DOTCOM_MARKETING_BUSINESS_TOOLS ),
+		makeLayout,
+		clientRender
+	);
+}

client/sites/marketing/tools/index.tsx

@@ -0,0 +1,3 @@
+export default function MarketingTools() {
+	return <div>This is Marketing Tools page</div>;
+}

client/state/global-sidebar/selectors.ts

@@ -17,6 +17,7 @@ const SITE_DASHBOARD_ROUTES = {
 	'site-logs': '/site-logs/',
 	'hosting-features': '/hosting-features/',
 	'staging-site': '/staging-site/',
+	'site-marketing': '/sites/marketing',
 };
 
 function isInSection( sectionName: string, sectionNames: string[] ) {

config/development.json

@@ -236,6 +236,7 @@
 		"upgrades/redirect-payments": true,
 		"upgrades/upcoming-renewals-notices": true,
 		"upgrades/wpcom-monthly-plans": true,
+		"untangling/hosting-menu": true,
 		"user-management-revamp": true,
 		"videomaker-trial": true,
 		"videopress-tv": true,

config/wpcalypso.json

@@ -197,6 +197,7 @@
 		"upgrades/redirect-payments": true,
 		"upgrades/upcoming-renewals-notices": true,
 		"upgrades/wpcom-monthly-plans": true,
+		"untangling/hosting-menu": true,
 		"use-translation-chunks": true,
 		"user-management-revamp": true,
 		"videomaker-trial": true,