From f940c839b5e7ef45cfb8495ee9a291f911c2cc49 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 3 Mar 2023 16:43:38 +0000
Subject: [PATCH 1/2] Update: Add descriptions to all panels in the Site
 Editor's dark sidebar.

---
 .../sidebar-navigation-screen-main/index.js   | 51 ++++++++++---------
 .../index.js                                  |  5 ++
 .../index.js                                  | 14 ++---
 .../style.scss                                |  2 +-
 .../index.js                                  | 14 +++--
 .../index.js                                  | 13 ++++-
 .../index.js                                  |  7 +++
 .../sidebar-navigation-screen/index.js        |  7 +++
 8 files changed, 75 insertions(+), 38 deletions(-)

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 1aa6f483fdba56..1d387b432156d2 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
@@ -31,35 +31,40 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
+			description={ __(
+				'Customise your Navigation menus, Templates, and more.'
+			) }
 			content={
-				<ItemGroup>
-					{ !! navigationMenus && navigationMenus.length > 0 && (
+				<>
+					<ItemGroup>
+						{ !! navigationMenus && navigationMenus.length > 0 && (
+							<NavigatorButton
+								as={ SidebarNavigationItem }
+								path="/navigation"
+								withChevron
+								icon={ navigation }
+							>
+								{ __( 'Navigation' ) }
+							</NavigatorButton>
+						) }
 						<NavigatorButton
 							as={ SidebarNavigationItem }
-							path="/navigation"
+							path="/wp_template"
 							withChevron
-							icon={ navigation }
+							icon={ layout }
 						>
-							{ __( 'Navigation' ) }
+							{ __( 'Templates' ) }
 						</NavigatorButton>
-					) }
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template_part"
-						withChevron
-						icon={ symbolFilled }
-					>
-						{ __( 'Template Parts' ) }
-					</NavigatorButton>
-				</ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template_part"
+							withChevron
+							icon={ symbolFilled }
+						>
+							{ __( 'Template Parts' ) }
+						</NavigatorButton>
+					</ItemGroup>
+				</>
 			}
 		/>
 	);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
index 69b867e24f141e..ba44420ae15fb3 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -36,6 +36,11 @@ export default function SidebarNavigationScreenNavigationItem() {
 					icon={ pencil }
 				/>
 			}
+			description={
+				postType === 'page'
+					? __( 'This is a static page.' )
+					: __( 'This is your posts page' )
+			}
 			content={
 				<>
 					{ record?.link ? (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index 39563db05280e2..2584c2e1b26c24 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -27,16 +27,10 @@ function SidebarNavigationScreenWrapper( { children, actions } ) {
 		<SidebarNavigationScreen
 			title={ __( 'Navigation' ) }
 			actions={ actions }
-			content={
-				<>
-					<p className="edit-site-sidebar-navigation-screen-navigation-menus__description">
-						{ __(
-							'Browse your site, edit pages, and manage your primary navigation menu.'
-						) }
-					</p>
-					{ children }
-				</>
-			}
+			description={ __(
+				'Browse your site, edit pages, and manage your primary navigation menu.'
+			) }
+			content={ children }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 859a7326edfa8a..1e3812d21b76e9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -1,4 +1,4 @@
-.edit-site-sidebar-navigation-screen-navigation-menus__description {
+.edit-site-sidebar-navigation-screen__description {
 	margin-top: 0;
 	margin-bottom: $grid-unit-40;
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index 4d7d471e088fc4..a119fbd1940881 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
@@ -24,10 +24,18 @@ export default function SidebarNavigationScreenTemplate() {
 		postId
 	);
 	let description = getDescription();
-	if ( ! description && record.is_custom ) {
+	if ( ! description ) {
+		if ( record.type === 'wp_template' && record.is_custom ) {
 		description = __(
 			'This is a custom template that can be applied manually to any Post or Page.'
 		);
+		} else if ( record.type === 'wp_template_part' ) {
+			description = sprintf(
+				// translators: %s: template part title e.g: "Header".
+				__( 'This is your %s template part.' ),
+				getTitle()
+			);
+		}
 	}
 
 	return (
@@ -40,7 +48,7 @@ export default function SidebarNavigationScreenTemplate() {
 					icon={ pencil }
 				/>
 			}
-			content={ description ? <p>{ description }</p> : undefined }
+			description={ description }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
index 3721b61910c5ab..633329107f33a8 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -12,9 +12,15 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 const config = {
 	wp_template: {
 		title: __( 'All templates' ),
+		description: __(
+			'Create new templates, or reset any customisations made to the templates supplied by your theme." seems good'
+		),
 	},
 	wp_template_part: {
 		title: __( 'All template parts' ),
+		description: __(
+			'Create new template parts, or reset any customisations made to the template parts supplied by your theme." seems good.'
+		),
 	},
 };
 
@@ -22,5 +28,10 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
-	return <SidebarNavigationScreen title={ config[ postType ].title } />;
+	return (
+		<SidebarNavigationScreen
+			title={ config[ postType ].title }
+			description={ config[ postType ].description }
+		/>
+	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 30bfd6aad532f4..1a0ce5e050cb9a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -29,6 +29,9 @@ const config = {
 			loading: __( 'Loading templates' ),
 			notFound: __( 'No templates found' ),
 			manage: __( 'Manage all templates' ),
+			description: __(
+				'Express the layout of your site with templates.'
+			),
 		},
 	},
 	wp_template_part: {
@@ -37,6 +40,9 @@ const config = {
 			loading: __( 'Loading template parts' ),
 			notFound: __( 'No template parts found' ),
 			manage: __( 'Manage all template parts' ),
+			description: __(
+				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
+			),
 		},
 	},
 };
@@ -80,6 +86,7 @@ export default function SidebarNavigationScreenTemplates() {
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].labels.title }
+			description={ config[ postType ].labels.description }
 			actions={
 				canCreate && (
 					<AddNewTemplate
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index 3632d3d17eb42a..206e00be7f5944 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -22,6 +22,7 @@ export default function SidebarNavigationScreen( {
 	title,
 	actions,
 	content,
+	description,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -58,6 +59,12 @@ export default function SidebarNavigationScreen( {
 			</HStack>
 
 			<nav className="edit-site-sidebar-navigation-screen__content">
+				{ description && (
+					<p className="edit-site-sidebar-navigation-screen__description">
+						{ ' ' }
+						{ description }
+					</p>
+				) }
 				{ content }
 			</nav>
 		</VStack>

From dd46d7e9a4aa7690f00141b54197491f5a3c938e Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 3 Mar 2023 17:11:14 +0000
Subject: [PATCH 2/2] Update
 packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

Co-authored-by: Matias Ventura <mv@matiasventura.com>
---
 .../sidebar-navigation-screen-main/index.js   | 50 +++++++++----------
 .../index.js                                  |  8 ++-
 .../index.js                                  |  6 +--
 .../index.js                                  |  2 +-
 .../sidebar-navigation-screen/index.js        |  1 -
 5 files changed, 34 insertions(+), 33 deletions(-)

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 1d387b432156d2..26b01999262d38 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
@@ -32,39 +32,37 @@ export default function SidebarNavigationScreenMain() {
 			isRoot
 			title={ __( 'Design' ) }
 			description={ __(
-				'Customise your Navigation menus, Templates, and more.'
+				'Customize the appearance of your website using the block editor.'
 			) }
 			content={
-				<>
-					<ItemGroup>
-						{ !! navigationMenus && navigationMenus.length > 0 && (
-							<NavigatorButton
-								as={ SidebarNavigationItem }
-								path="/navigation"
-								withChevron
-								icon={ navigation }
-							>
-								{ __( 'Navigation' ) }
-							</NavigatorButton>
-						) }
+				<ItemGroup>
+					{ !! navigationMenus && navigationMenus.length > 0 && (
 						<NavigatorButton
 							as={ SidebarNavigationItem }
-							path="/wp_template"
+							path="/navigation"
 							withChevron
-							icon={ layout }
+							icon={ navigation }
 						>
-							{ __( 'Templates' ) }
+							{ __( 'Navigation' ) }
 						</NavigatorButton>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/wp_template_part"
-							withChevron
-							icon={ symbolFilled }
-						>
-							{ __( 'Template Parts' ) }
-						</NavigatorButton>
-					</ItemGroup>
-				</>
+					) }
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_template"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</NavigatorButton>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_template_part"
+						withChevron
+						icon={ symbolFilled }
+					>
+						{ __( 'Template Parts' ) }
+					</NavigatorButton>
+				</ItemGroup>
 			}
 		/>
 	);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
index ba44420ae15fb3..549ed42d408a6b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -38,8 +38,12 @@ export default function SidebarNavigationScreenNavigationItem() {
 			}
 			description={
 				postType === 'page'
-					? __( 'This is a static page.' )
-					: __( 'This is your posts page' )
+					? __(
+							'Pages are static and are not listed by date. Pages do not use tags or categories.'
+					  )
+					: __(
+							'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
+					  )
 			}
 			content={
 				<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index a119fbd1940881..b4d1572c3393c2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -26,9 +26,9 @@ export default function SidebarNavigationScreenTemplate() {
 	let description = getDescription();
 	if ( ! description ) {
 		if ( record.type === 'wp_template' && record.is_custom ) {
-		description = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
+			description = __(
+				'This is a custom template that can be applied manually to any Post or Page.'
+			);
 		} else if ( record.type === 'wp_template_part' ) {
 			description = sprintf(
 				// translators: %s: template part title e.g: "Header".
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
index 633329107f33a8..88e71d0b55b1e9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -13,7 +13,7 @@ const config = {
 	wp_template: {
 		title: __( 'All templates' ),
 		description: __(
-			'Create new templates, or reset any customisations made to the templates supplied by your theme." seems good'
+			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 		),
 	},
 	wp_template_part: {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index 206e00be7f5944..6f4115c40a2697 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -61,7 +61,6 @@ export default function SidebarNavigationScreen( {
 			<nav className="edit-site-sidebar-navigation-screen__content">
 				{ description && (
 					<p className="edit-site-sidebar-navigation-screen__description">
-						{ ' ' }
 						{ description }
 					</p>
 				) }