Command center: Add a button to open it from the site editor view mode (

#50425)
WordPress · May 8, 2023 · 09a24e5 · 09a24e5 · github-actions · May 8, 2023
1 parent 31bad5d
commit 09a24e5
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 48 deletions.
diff --git 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
@@ -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,78 @@ 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() }
+							label={ __( 'Open command center' ) }
+						/>
+					) }
 			</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
@@ -30,3 +30,11 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 }
+
+.edit-site-site-hub_toggle-command-center {
+	color: $white;
+
+	&:hover {
+		color: $white;
+	}
+}