Site Editor: Use site title as a link (WordPress#61258)

* Try using site title as a link * Proper ellipsis * ensure ↗ renders on long site titles * focus tweaks * use unicode Unlinked contributors: jarekmorawski. Co-authored-by: richtabor <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: bgardner <[email protected]>
carstingaxion · Jun 4, 2024 · 56120e9 · 56120e9
1 parent 85d2cab
commit 56120e9
Show file tree

Hide file tree

Showing 2 changed files with 57 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,55 @@
 	}
 }
 
-.edit-site-site-hub__title {
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	display: block;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	// Add space for the ↗ to render.
+	padding-right: $grid-unit-20;
+	position: relative;
+	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;
+	}
+
+	&:focus {
+		// Defer to :focus-visible below.
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		// Push the shadow away from the title.
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: 2px;
+	}
+
+	&::after {
+		content: "\2197";
+		font-weight: 400;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		opacity: 1;
 	}
 }