Add back link to Design heading in site editor navigation to return t…

…o Dashboard (#47950)

packages/edit-site/src/components/sidebar-navigation-screen/index.js

@@ -5,17 +5,32 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	Button,
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 export default function SidebarNavigationScreen( {
 	path,
 	title,
 	actions,
 	content,
 } ) {
+	const { dashboardLink } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		return {
+			dashboardLink: getSettings().__experimentalDashboardLink,
+		};
+	}, [] );
+
 	return (
 		<NavigatorScreen
 			className="edit-site-sidebar-navigation-screen"
@@ -34,7 +49,13 @@ export default function SidebarNavigationScreen( {
 							aria-label={ __( 'Back' ) }
 						/>
 					) : (
-						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
+						<Button
+							className="edit-site-sidebar-navigation-screen__back"
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							aria-label={ __( 'Navigate to the Dashboard' ) }
+							href={ dashboardLink || 'index.php' }
+							label={ __( 'Dashboard' ) }
+						/>
 					) }
 					<h2 className="edit-site-sidebar-navigation-screen__title">
 						{ title }

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -37,7 +37,3 @@
 		color: $white;
 	}
 }
-
-.edit-site-sidebar-navigation-screen__icon-placeholder {
-	width: $button-size;
-}