From 74c6577f606c2a69e26f6641b24c7ddc0a07ed80 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 May 2023 10:16:50 +0100
Subject: [PATCH 1/3] Command center: Add a button to open it from the site
 editor view mode

---
 .../src/components/layout/style.scss          |   2 +-
 .../src/components/site-hub/index.js          | 111 ++++++++++--------
 .../src/components/site-hub/style.scss        |   4 +
 3 files changed, 69 insertions(+), 48 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 4bcab85d80062..6e8a7fb42eb9b 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -20,7 +20,7 @@
 	}
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding});
 	}
 
 	.edit-site-layout.is-full-canvas & {
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 5419317bdac4d..bfc6304b9c147 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -19,6 +19,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
+import { search } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -27,6 +29,8 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
 
+const { store: commandsStore } = unlock( commandsPrivateApis );
+
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
@@ -41,6 +45,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				getSettings().__experimentalDashboardLink || 'index.php',
 		};
 	}, [] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
 
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
@@ -82,65 +87,77 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
-				spacing="0"
-			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+			<HStack justify="space-between" alignment="center">
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
 					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<motion.div
+								initial={ false }
+								animate={ {
+									scale: canvasMode === 'view' ? 0.5 : 1,
+								} }
+								whileHover={ {
+									scale: canvasMode === 'view' ? 0.5 : 0.96,
+								} }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: HUB_ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							</motion.div>
+						</Button>
+					</motion.div>
+
+					<AnimatePresence>
 						<motion.div
-							initial={ false }
+							layout={ canvasMode === 'edit' }
 							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
+								opacity: canvasMode === 'view' ? 1 : 0,
 							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							exit={ {
+								opacity: 0,
 							} }
+							className="edit-site-site-hub__site-title"
 							transition={ {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
+								duration: disableMotion ? 0 : 0.2,
 								ease: 'easeOut',
+								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							{ decodeEntities( siteTitle ) }
 						</motion.div>
-					</Button>
-				</motion.div>
-
-				<AnimatePresence>
-					<motion.div
-						layout={ canvasMode === 'edit' }
-						animate={ {
-							opacity: canvasMode === 'view' ? 1 : 0,
-						} }
-						exit={ {
-							opacity: 0,
-						} }
-						className="edit-site-site-hub__site-title"
-						transition={ {
-							type: 'tween',
-							duration: disableMotion ? 0 : 0.2,
-							ease: 'easeOut',
-							delay: canvasMode === 'view' ? 0.1 : 0,
-						} }
-					>
-						{ decodeEntities( siteTitle ) }
-					</motion.div>
-				</AnimatePresence>
+					</AnimatePresence>
+				</HStack>
+				{ window?.__experimentalEnableCommandCenter &&
+					canvasMode === 'view' && (
+						<Button
+							className="edit-site-site-hub_toggle-command-center"
+							icon={ search }
+							onClick={ () => openCommandCenter() }
+						/>
+					) }
 			</HStack>
 		</motion.div>
 	);
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 885c24e38b788..419473e1241bd 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -30,3 +30,7 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 }
+
+.edit-site-site-hub_toggle-command-center {
+	color: $white;
+}

From dc4824b00a7cb990bf8f2f7e8ff5f94ef0c79df0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 May 2023 10:20:25 +0100
Subject: [PATCH 2/3] Add a label

---
 packages/edit-site/src/components/site-hub/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index bfc6304b9c147..eadd9bbad68b9 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -156,6 +156,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							className="edit-site-site-hub_toggle-command-center"
 							icon={ search }
 							onClick={ () => openCommandCenter() }
+							label={ __( 'Open command center' ) }
 						/>
 					) }
 			</HStack>

From 440247791b6d39a401b73cc01883520637ee3b73 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 May 2023 10:39:43 +0100
Subject: [PATCH 3/3] Reset hover color

---
 packages/edit-site/src/components/site-hub/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 419473e1241bd..90a9c37011cf5 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -33,4 +33,8 @@
 
 .edit-site-site-hub_toggle-command-center {
 	color: $white;
+
+	&:hover {
+		color: $white;
+	}
 }