Highlight active category nav item

WordPress · May 30, 2023 · 8c29a7a · 8c29a7a
1 parent 6784899
commit 8c29a7a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
@@ -49,8 +49,8 @@ const GridItem = ( { item } ) => {
 	);
 };
 
-export default function Grid( { type, name } ) {
-	const [ patterns, isResolving ] = usePatterns( type, name );
+export default function Grid( { type, category } ) {
+	const [ patterns, isResolving ] = usePatterns( type, category );
 
 	if ( ! patterns ) {
 		return null;

diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
@@ -14,8 +14,13 @@ import { getQueryArgs } from '@wordpress/url';
 import Grid from './grid';
 import useTitle from '../routes/use-title';
 
+const DEFAULT_TYPE = 'wp_template_part';
+const DEFAULT_CATEGORY = 'header';
+
 export default function Library() {
 	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const type = categoryType || DEFAULT_TYPE;
+	const category = categoryName || DEFAULT_CATEGORY;
 
 	// Do we need shortcuts if we aren't displaying a header?
 	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
@@ -40,7 +45,7 @@ export default function Library() {
 			className="edit-site-library"
 			labels={ regionLabels }
 			notices={ <EditorSnackbars /> }
-			content={ <Grid type={ categoryType } name={ categoryName } /> }
+			content={ <Grid type={ type } category={ category } /> }
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -4,7 +4,14 @@
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
 
-export default function CategoryItem( { count, icon, label, name, type } ) {
+export default function CategoryItem( {
+	count,
+	icon,
+	isActive,
+	label,
+	name,
+	type,
+} ) {
 	const linkInfo = useLink( {
 		path: '/library',
 		categoryType: type,
@@ -20,6 +27,7 @@ export default function CategoryItem( { count, icon, label, name, type } ) {
 			{ ...linkInfo }
 			icon={ icon }
 			suffix={ <span>{ count }</span> }
+			className={ isActive ? 'is-active-category' : undefined }
 		>
 			{ label }
 		</SidebarNavigationItem>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -9,6 +9,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -20,6 +21,9 @@ import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 import { store as editSiteStore } from '../../store';
 
+const DEFAULT_CATEGORY = 'header';
+const DEFAULT_TYPE = 'wp_template_part';
+
 const templatePartAreaLabels = {
 	header: __( 'Headers' ),
 	footer: __( 'Footers' ),
@@ -29,6 +33,9 @@ const templatePartAreaLabels = {
 
 export default function SidebarNavigationScreenLibrary() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const currentCategory = categoryName || DEFAULT_CATEGORY;
+	const currentType = categoryType || DEFAULT_TYPE;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -78,6 +85,11 @@ export default function SidebarNavigationScreenLibrary() {
 												}
 												name={ area }
 												type="wp_template_part"
+												isActive={
+													currentCategory === area &&
+													currentType ===
+														'wp_template_part'
+												}
 											/>
 										)
 									) }
@@ -92,6 +104,11 @@ export default function SidebarNavigationScreenLibrary() {
 											label={ category.label }
 											name={ category.name }
 											type="pattern"
+											isActive={
+												currentCategory ===
+													category.name &&
+												currentType === 'pattern'
+											}
 										/>
 									) ) }
 								</ItemGroup>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
@@ -3,3 +3,7 @@
 	border-bottom: 1px solid $gray-800;
 	margin-bottom: $grid-unit-20;
 }
+
+.edit-site-sidebar-navigation-item.is-active-category {
+	background: $gray-800;
+}