Try using site title as a link

WordPress · May 8, 2024 · 5940de0 · 5940de0
1 parent 6a0188b
commit 5940de0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
@@ -20,7 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo } from '@wordpress/element';
-import { search, external } from '@wordpress/icons';
+import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
@@ -158,14 +158,8 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 							} }
 						>
 							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
 								<Button
+									variant="link"
 									href={ homeUrl }
 									target="_blank"
 									label={ __(
@@ -174,10 +168,15 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 									aria-label={ __(
 										'View site (opens in a new tab)'
 									) }
-									icon={ external }
-									className="edit-site-site-hub__site-view-link"
-								/>
-
+								>
+									{ decodeEntities( siteTitle ) }
+								</Button>
+							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
 								<Button
 									className="edit-site-site-hub_toggle-command-center"
 									icon={ search }

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -23,18 +23,28 @@
 	}
 }
 
-.edit-site-site-hub__title {
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	text-decoration: none;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
-	flex-grow: 1;
-	color: $gray-200;
-}
 
-.edit-site-site-hub__site-view-link {
-	margin-right: var(--wp-admin-border-width-focus);
-	svg {
-		fill: $gray-200;
+	&:hover,
+	&:focus,
+	&:active {
+		color: $gray-200;
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		content: "↗";
+		font-weight: 400;
+		margin-left: $grid-unit-05;
 	}
 }