@wordpress/edit-site 5.15.0 → 5.16.0

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -37,10 +37,10 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { get: getPrefference } = useSelect( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
 
 	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPrefference(
+		const isDistractionFree = getPreference(
 			editSiteStore.name,
 			'distractionFree'
 		);
@@ -52,7 +52,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
-	}, [ createNotice, setPreference, getPrefference ] );
+	}, [ createNotice, setPreference, getPreference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -108,30 +108,10 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
-	const { revisions, isLoading } = useGlobalStylesRevisions();
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
-
-	const hasRevisions = revisionsCount >= 2;
-	const modified = revisions?.[ 0 ]?.modified;
-
-	if ( ! hasRevisions || isLoading || ! modified ) {
-		return null;
-	}
-
+function SidebarNavigationScreenGlobalStylesFooter( {
+	modifiedDateTime,
+	onClickRevisions,
+} ) {
 	return (
 		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
 			<SidebarNavigationItem
@@ -150,8 +130,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 						{ __( 'Last modified' ) }
 					</span>
 					<span>
-						<time dateTime={ modified }>
-							{ humanTimeDiff( modified ) }
+						<time dateTime={ modifiedDateTime }>
+							{ humanTimeDiff( modifiedDateTime ) }
 						</time>
 					</span>
 					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
@@ -162,6 +142,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
+	const { revisions, isLoading: isLoadingRevisions } =
+		useGlobalStylesRevisions();
 	const { openGeneralSidebar, setIsListViewOpened } =
 		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -170,19 +152,32 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	);
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { get: getPrefference } = useSelect( preferencesStore );
-	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
-		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			isViewMode: 'view' === getCanvasMode(),
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
-		};
-	}, [] );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
+		( select ) => {
+			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return {
+				isViewMode: 'view' === getCanvasMode(),
+				isStyleBookOpened:
+					'style-book' === getEditorCanvasContainerView(),
+				revisionsCount:
+					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
+					0,
+			};
+		},
+		[]
+	);
 
 	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPrefference(
+		const isDistractionFree = getPreference(
 			editSiteStore.name,
 			'distractionFree'
 		);
@@ -194,7 +189,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
-	}, [ createNotice, setPreference, getPrefference ] );
+	}, [ createNotice, setPreference, getPreference ] );
 
 	const openGlobalStyles = useCallback( async () => {
 		turnOffDistractionFreeMode();
@@ -226,6 +221,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
+	// If there are no revisions, do not render a footer.
+	const hasRevisions = revisionsCount >= 2;
+	const modifiedDateTime = revisions?.[ 0 ]?.modified;
+	const shouldShowGlobalStylesFooter =
+		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -235,9 +236,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				) }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
-					<SidebarNavigationScreenGlobalStylesFooter
-						onClickRevisions={ openRevisions }
-					/>
+					shouldShowGlobalStylesFooter && (
+						<SidebarNavigationScreenGlobalStylesFooter
+							modifiedDateTime={ modifiedDateTime }
+							onClickRevisions={ openRevisions }
+						/>
+					)
 				}
 				actions={
 					<>

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -135,8 +135,7 @@ function useDuplicateNavigationMenu() {
 		useDispatch( noticesStore );
 
 	const handleDuplicate = async ( navigationMenu ) => {
-		const menuTitle =
-			navigationMenu?.title?.rendered || navigationMenu?.slug;
+		const menuTitle = navigationMenu?.title || navigationMenu?.slug;
 
 		try {
 			const savedRecord = await saveEntityRecord(

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -25,19 +25,19 @@ import { unlock } from '../../lock-unlock';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
-	if ( ! title?.rendered ) {
+	if ( ! title ) {
 		/* translators: %s is the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
 	if ( status === 'publish' ) {
-		return decodeEntities( title?.rendered );
+		return decodeEntities( title );
 	}
 
 	return sprintf(
 		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
-		decodeEntities( title?.rendered ),
+		decodeEntities( title ),
 		status
 	);
 }
@@ -124,7 +124,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 						withChevron
 						icon={ navigation }
 					>
-						{ buildMenuLabel( title, index + 1, status ) }
+						{ buildMenuLabel( title?.rendered, index + 1, status ) }
 					</NavMenuItem>
 				) ) }
 			</ItemGroup>

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -23,10 +23,12 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
+import { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
+	const location = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -63,22 +65,32 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: attributes.type,
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: 'page',
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 		},
 		[ history ]

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -5,7 +5,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	BlockList,
-	BlockTools,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -106,9 +105,7 @@ export default function NavigationMenuContent( { rootClientId } ) {
 				/>
 			) }
 			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
-				<BlockTools>
-					<BlockList />
-				</BlockTools>
+				<BlockList />
 			</div>
 		</>
 	);

package/src/components/sidebar-navigation-screen-pages/index.js

@@ -28,10 +28,15 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postType = 'page', postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -23,7 +23,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 				upperCase={ true }
 				weight={ 500 }
 			>
-				{ title?.rendered || title || __( 'Navigation' ) }
+				{ title || __( 'Navigation' ) }
 			</Heading>
 			<NavigationMenuEditor navigationMenuId={ id } />
 		</>

package/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -54,9 +59,14 @@ export default function useNavigationMenuContent( postType, postId ) {
 		return;
 	}
 
+	const blocks =
+		record?.content && typeof record.content !== 'function'
+			? parse( record.content )
+			: [];
+
 	const navigationBlocks = getBlocksOfTypeFromBlocks(
 		'core/navigation',
-		record?.blocks
+		blocks
 	);
 
 	if ( ! navigationBlocks.length ) {

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import { sentenceCase } from 'change-case';
+
 /**
  * WordPress dependencies
  */
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,6 +33,11 @@ export default function usePatternDetails( postType, postId ) {
 		postType,
 		postId
 	);
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme(),
 		[]
@@ -36,56 +46,24 @@ export default function usePatternDetails( postType, postId ) {
 	const isAddedByActiveTheme =
 		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
 	const title = getTitle();
-	let descriptionText = getDescription();
+	let description = getDescription();
 
-	if ( ! descriptionText && addedBy.text ) {
-		descriptionText = sprintf(
+	if ( ! description && addedBy.text ) {
+		description = sprintf(
 			// translators: %s: pattern title e.g: "Header".
 			__( 'This is the %s pattern.' ),
 			getTitle()
 		);
 	}
 
-	if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
-		descriptionText = sprintf(
+	if ( ! description && postType === 'wp_block' && record?.title ) {
+		description = sprintf(
 			// translators: %s: user created pattern title e.g. "Footer".
 			__( 'This is the %s pattern.' ),
 			record.title
 		);
 	}
 
-	const description = (
-		<>
-			{ descriptionText }
-
-			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon">
-							{ addedBy.imageUrl ? (
-								<img
-									src={ addedBy.imageUrl }
-									alt=""
-									width="24"
-									height="24"
-								/>
-							) : (
-								<Icon icon={ addedBy.icon } />
-							) }
-						</span>
-						{ addedBy.text }
-					</span>
-
-					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
-							{ _x( '(Customized)', 'pattern' ) }
-						</span>
-					) }
-				</span>
-			) }
-		</>
-	);
-
 	const footer = !! record?.modified ? (
 		<SidebarNavigationScreenDetailsFooter
 			lastModifiedDateTime={ record.modified }
@@ -94,7 +72,7 @@ export default function usePatternDetails( postType, postId ) {
 
 	const details = [];
 
-	if ( postType === 'wp_block' ) {
+	if ( postType === 'wp_block' || 'wp_template_part' ) {
 		details.push( {
 			label: __( 'Syncing' ),
 			value:
@@ -104,8 +82,59 @@ export default function usePatternDetails( postType, postId ) {
 		} );
 	}
 
+	if ( postType === 'wp_template_part' ) {
+		const templatePartArea = templatePartAreas.find(
+			( area ) => area.area === record.area
+		);
+
+		let areaDetailValue = templatePartArea?.label;
+
+		if ( ! areaDetailValue ) {
+			areaDetailValue = record.area
+				? sprintf(
+						// translators: %s: Sentenced cased template part area e.g: "My custom area".
+						__( '%s (removed)' ),
+						sentenceCase( record.area )
+				  )
+				: __( 'None' );
+		}
+
+		details.push( { label: __( 'Area' ), value: areaDetailValue } );
+	}
+
+	if (
+		postType === 'wp_template_part' &&
+		addedBy.text &&
+		! isAddedByActiveTheme
+	) {
+		details.push( {
+			label: __( 'Added by' ),
+			value: (
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
+					{ addedBy.text }
+				</span>
+			),
+		} );
+	}
+
+	if (
+		postType === 'wp_template_part' &&
+		addedBy.text &&
+		( record.origin === 'plugin' || record.has_theme_file === true )
+	) {
+		details.push( {
+			label: __( 'Customized' ),
+			value: (
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
+					{ addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) }
+				</span>
+			),
+		} );
+	}
+
 	const content = (
 		<>
+			{ useNavigationMenuContent( postType, postId ) }
 			{ !! details.length && (
 				<SidebarNavigationScreenDetailsPanel
 					spacing={ 5 }
@@ -123,7 +152,6 @@ export default function usePatternDetails( postType, postId ) {
 					) ) }
 				</SidebarNavigationScreenDetailsPanel>
 			) }
-			{ useNavigationMenuContent( postType, postId ) }
 		</>
 	);
 

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -12,19 +12,11 @@ export default function CategoryItem( {
 	label,
 	type,
 } ) {
-	const linkInfo = useLink(
-		{
-			path: '/patterns',
-			categoryType: type,
-			categoryId: id,
-		},
-		{
-			// Keep a record of where we came from in state so we can
-			// use the browser's back button to go back to Patterns.
-			// See the implementation of the back button in patterns-list.
-			backPath: '/patterns',
-		}
-	);
+	const linkInfo = useLink( {
+		path: '/patterns',
+		categoryType: type,
+		categoryId: id,
+	} );
 
 	if ( ! count ) {
 		return;

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -10,7 +10,6 @@ import {
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
@@ -24,7 +23,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
-import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
@@ -108,11 +106,6 @@ export default function SidebarNavigationScreenPatterns() {
 	const { patternCategories, hasPatterns } = usePatternCategories();
 	const { myPatterns } = useMyPatterns();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
-
 	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
@@ -131,7 +124,6 @@ export default function SidebarNavigationScreenPatterns() {
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -7,7 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -18,7 +17,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 
 const TemplateItem = ( { postType, postId, ...props } ) => {
@@ -31,11 +29,6 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -51,10 +44,9 @@ export default function SidebarNavigationScreenTemplates() {
 	);
 
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+	const canCreate = ! isMobileViewport;
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Templates' ) }
 			description={ __(
 				'Express the layout of your site with templates'

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { store as editSiteStore } from '../../store';
 
 const config = {
 	wp_template: {
@@ -29,8 +31,16 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
 	return (
 		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }

package/src/components/site-hub/index.js

@@ -21,6 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -174,7 +175,7 @@ const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 						<Button
 							href={ homeUrl }
 							target="_blank"
-							label={ __( 'View site' ) }
+							label={ __( 'View site (opens in a new tab)' ) }
 							aria-label={ __(
 								'View site (opens in a new tab)'
 							) }
@@ -192,6 +193,7 @@ const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 						icon={ search }
 						onClick={ () => openCommandCenter() }
 						label={ __( 'Open command palette' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
 					/>
 				) }
 			</HStack>

package/src/components/site-hub/style.scss

@@ -19,13 +19,12 @@
 
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
+		margin-right: var(--wp-admin-border-width-focus);
 		@include break-mobile() {
 			opacity: 0;
 			transition: opacity 0.2s ease-in-out;
 		}
 		&:focus {
-			outline: none;
-			box-shadow: none;
 			opacity: 1;
 		}
 		svg {