Update: Add descriptions to all panels in the Site Editor's dark side… (

#48739)Co-authored-by: Matias Ventura <mv@matiasventura.com> * Update: Add descriptions to all panels in the Site Editor's dark sidebar. * Update packages/edit-site/src/components/sidebar-navigation-screen-main/index.js Co-authored-by: Matias Ventura <mv@matiasventura.com> --------- Co-authored-by: Matias Ventura <mv@matiasventura.com>
WordPress · Mar 7, 2023 · 976b29e · 976b29e
1 parent c4fdeb1
commit 976b29e
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 18 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
@@ -31,6 +31,9 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
+			description={ __(
+				'Customize the appearance of your website using the block editor.'
+			) }
 			content={
 				<ItemGroup>
 					{ !! navigationMenus && navigationMenus.length > 0 && (

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
@@ -48,6 +48,15 @@ export default function SidebarNavigationScreenNavigationItem() {
 					icon={ pencil }
 				/>
 			}
+			description={
+				postType === '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={
 				post ? decodeEntities( post?.description?.rendered ) : null
 			}

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
@@ -25,16 +25,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
@@ -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
@@ -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';
 
@@ -18,10 +18,18 @@ export default function SidebarNavigationScreenTemplate() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { getDescription, getTitle, record } = useEditedEntityRecord();
 	let description = getDescription();
-	if ( ! description && record.is_custom ) {
-		description = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
+	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 (
@@ -34,7 +42,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
@@ -12,15 +12,26 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 const config = {
 	wp_template: {
 		title: __( 'All templates' ),
+		description: __(
+			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+		),
 	},
 	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.'
+		),
 	},
 };
 
 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
@@ -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
@@ -22,6 +22,7 @@ export default function SidebarNavigationScreen( {
 	title,
 	actions,
 	content,
+	description,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -58,6 +59,11 @@ 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>