Site: editor: Add view site link to site editor nav (#50420)

WordPress · May 28, 2023 · 4c60efe · 4c60efe
1 parent d5f04b7
commit 4c60efe
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
@@ -19,7 +19,7 @@ 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 { search, external } from '@wordpress/icons';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
@@ -34,15 +34,20 @@ const { store: commandsStore } = unlock( commandsPrivateApis );
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			canvasMode: getCanvasMode(),
 			dashboardLink:
 				getSettings().__experimentalDashboardLink || 'index.php',
+			homeUrl: getUnstableBase()?.home,
 		};
 	}, [] );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
@@ -87,7 +92,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack justify="space-between" alignment="center">
+			<HStack
+				justify="space-between"
+				alignment="center"
+				className="edit-site-site-hub__container"
+			>
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
@@ -149,6 +158,14 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							{ decodeEntities( siteTitle ) }
 						</motion.div>
 					</AnimatePresence>
+					<Button
+						href={ homeUrl }
+						target="_blank"
+						label={ __( 'View site' ) }
+						aria-label={ __( 'View site (opens in a new tab)' ) }
+						icon={ external }
+						className="edit-site-site-hub__site-view-link"
+					/>
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -3,6 +3,31 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
+
+	.edit-site-site-hub__site-view-link {
+		flex-grow: 0;
+		@include break-mobile() {
+			opacity: 0;
+			transition: opacity 0.2s ease-in-out;
+		}
+		&:focus {
+			outline: none;
+			box-shadow: none;
+			opacity: 1;
+		}
+		svg {
+			fill: $white;
+		}
+	}
+	&:hover {
+		.edit-site-site-hub__site-view-link {
+			opacity: 1;
+		}
+	}
 }
 
 .edit-site-site-hub__post-type {
@@ -29,6 +54,7 @@
 
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
+	flex-grow: 1;
 }
 
 .edit-site-site-hub_toggle-command-center {