From c93bfe6e9e261e7f84ad3fbcdbfb0dd9a0f77a10 Mon Sep 17 00:00:00 2001
From: dhruvikpatel18 <malaviya.dhruvik@gmail.com>
Date: Thu, 23 Jan 2025 15:40:51 +0530
Subject: [PATCH] feat: add descriptions under items in Site Editor Design menu

---
 .../components/sidebar-navigation-item/index.js   |  6 ++++++
 .../components/sidebar-navigation-item/style.scss |  4 ++++
 .../sidebar-navigation-screen-main/index.js       | 15 +++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
index 4bde94dcbbeb4d..5fb355b93f1d5f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -32,6 +32,7 @@ export default function SidebarNavigationItem( {
 	uid,
 	to,
 	onClick,
+	description,
 	children,
 	...props
 } ) {
@@ -80,6 +81,11 @@ export default function SidebarNavigationItem( {
 				) }
 				{ ! withChevron && suffix }
 			</HStack>
+			{ description && (
+				<p className="edit-site-sidebar-navigation-item__description">
+					{ description }
+				</p>
+			) }
 		</Item>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 57b7e84bd57a8b..887a6e1bd7472f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -35,6 +35,10 @@
 	}
 }
 
+.edit-site-sidebar-navigation-item__description {
+	margin: 10px 0;
+}
+
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
 	cursor: grab;
 	padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 0;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index abcc7183f6604e..97a79041f88dc8 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -27,6 +27,9 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 						to="/navigation"
 						withChevron
 						icon={ navigation }
+						description={ __(
+							'Manage your Navigation menus. (Navigation, Footer navigation\u2026)'
+						) }
 					>
 						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
@@ -34,6 +37,9 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 						to="/styles"
 						uid="global-styles-navigation-item"
 						icon={ styles }
+						description={ __(
+							'Choose a different style combination for the theme styles. (Blue, Green, Orange\u2026)'
+						) }
 					>
 						{ __( 'Styles' ) }
 					</SidebarNavigationItemGlobalStyles>
@@ -42,6 +48,9 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 						to="/page"
 						withChevron
 						icon={ page }
+						description={ __(
+							'Browse and edit pages on your site. (Home page, index, Sample page\u2026)'
+						) }
 					>
 						{ __( 'Pages' ) }
 					</SidebarNavigationItem>
@@ -50,6 +59,9 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 						to="/template"
 						withChevron
 						icon={ layout }
+						description={ __(
+							'Express the layout of your site with templates. (Page, single posts, 404\u2026)'
+						) }
 					>
 						{ __( 'Templates' ) }
 					</SidebarNavigationItem>
@@ -70,6 +82,9 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 				to="/pattern"
 				withChevron
 				icon={ symbol }
+				description={ __(
+					'Manage what patterns are available when editing the site. (Call to action, headers, footers\u2026)'
+				) }
 			>
 				{ __( 'Patterns' ) }
 			</SidebarNavigationItem>