Theme: Category Navigation: Set an allowed list of valid categories.

Fetch all categories, then filter out just the categories we want to show.

This is a workaround until there is a design for #395, so that we can create the new categories in the backend without bleeding over into the frontend nav.

See #190.

public_html/wp-content/themes/pattern-directory/src/components/pattern-grid-menu/index.js

@@ -14,6 +14,19 @@ import NavigationLayout from '../navigation-layout';
 import { store as patternStore } from '../../store';
 import { useRoute } from '../../hooks';
 
+const ALLOWED_CATS = [
+	'', // All
+	'buttons',
+	'columns',
+	'gallery',
+	'featured',
+	'header',
+	'footer',
+	'images',
+	'text',
+	'wireframe',
+];
+
 const PatternGridMenu = ( { basePath = '', onNavigation, ...props } ) => {
 	const { path, update: updatePath } = useRoute();
 	const { categorySlug, isLoading, options } = useSelect( ( select ) => {
@@ -22,16 +35,21 @@ const PatternGridMenu = ( { basePath = '', onNavigation, ...props } ) => {
 		const query = getQueryFromUrl( path );
 		// Remove pagination, so we don't go from /page/2/ to /categories/images/page/2/.
 		delete query.page;
-		const _options = ( getCategories() || [] ).map( ( cat ) => {
-			return {
-				value: getUrlFromQuery(
-					{ ...query, 'pattern-categories': cat.id },
-					wporgPatternsUrl.site + basePath
-				),
-				slug: cat.slug,
-				label: cat.name,
-			};
-		} );
+		const _options = ( getCategories() || [] )
+			.map( ( cat ) => {
+				if ( ! ALLOWED_CATS.includes( cat.slug ) ) {
+					return false;
+				}
+				return {
+					value: getUrlFromQuery(
+						{ ...query, 'pattern-categories': cat.id },
+						wporgPatternsUrl.site + basePath
+					),
+					slug: cat.slug,
+					label: cat.name,
+				};
+			} )
+			.filter( Boolean );
 
 		return {
 			categorySlug: getCategoryById( query[ 'pattern-categories' ] )?.slug || '',

public_html/wp-content/themes/pattern-directory/src/store/resolvers.js

@@ -79,7 +79,7 @@ export function* getCategories() {
 	try {
 		yield fetchCategories();
 		const results = yield apiFetch( {
-			path: addQueryArgs( '/wp/v2/pattern-categories' ),
+			path: addQueryArgs( '/wp/v2/pattern-categories', { per_page: 50 } ),
 		} );
 		yield loadCategories( results );
 	} catch ( error ) {}