Patterns: Add a curation filter to the UI (#584)

* Extract the select control from PatternOrderSelect to be reused * Add a control to filter the pattern grid by curation * Default the API request to "all" Core or community should be specifically requested to not break other API responses. * Hide the curation control on "My favorites" * Default to "curated" patterns on main & category landing pages, and on empty views * Pass `query` down through components This ensures the `isLoading` check in ContextBar uses the correct (modified) query with the curation value, otherwise it checks the wrong query key and sticks on the "loading" state.
WordPress · Jun 9, 2023 · 33308fa · 33308fa
1 parent 1b14e53
commit 33308fa
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 36 deletions.
diff --git a/public_html/wp-content/plugins/pattern-directory/includes/pattern-post-type.php b/public_html/wp-content/plugins/pattern-directory/includes/pattern-post-type.php
@@ -669,7 +669,7 @@ function filter_patterns_collection_params( $query_params ) {
 	$query_params['curation'] = array(
 		'description' => __( 'Limit result to either curated core, community, or all patterns.', 'wporg-patterns' ),
 		'type'        => 'string',
-		'default'     => 'core',
+		'default'     => 'all',
 		'enum'        => array(
 			'all',
 			'core',

diff --git a/public_html/wp-content/themes/pattern-directory/css/components/_components.scss b/public_html/wp-content/themes/pattern-directory/css/components/_components.scss
@@ -32,12 +32,12 @@
 @import "pattern-menu";
 @import "pattern-navigation-layout";
 @import "pattern-notice";
-@import "pattern-order-select";
 @import "pattern-pagination";
 @import "pattern-preview";
 @import "pattern-report-button";
 @import "pattern-report-modal";
 @import "pattern-search";
+@import "pattern-select-control";
 @import "pattern";
 @import "patterns-favorites";
 @import "site-content";

diff --git a/...c_html/wp-content/themes/pattern-directory/css/components/_pattern-navigation-layout.scss b/...c_html/wp-content/themes/pattern-directory/css/components/_pattern-navigation-layout.scss
@@ -1,6 +1,7 @@
 .pattern-navigation-layout {
 	margin: 0 auto $gutter-default;
 	max-width: $size__site-main;
+	gap: $gutter-default;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -11,21 +12,25 @@
 	}
 
 	.pattern-navigation-layout__secondary {
-		margin-top: $gutter-default;
-		width: calc(100% - #{$gutter-default * 2});
+		display: flex;
+		flex-direction: column;
+		gap: #{$gutter-default / 2};
 	}
 
 	@media only screen and ( min-width: #{$breakpoint-medium + 1} ) {
 		margin: $gutter-default;
+		gap: #{$gutter-default / 2};
 		flex-direction: row;
+		flex-wrap: wrap;
 
 		.pattern-navigation-layout__primary {
 			margin-bottom: 0;
+			width: auto;
 		}
 
 		.pattern-navigation-layout__secondary {
-			margin: 0;
 			width: auto;
+			flex-direction: row;
 		}
 	}
 

diff --git a/...css/components/_pattern-order-select.scss → ...s/components/_pattern-select-control.scss b/...css/components/_pattern-order-select.scss → ...s/components/_pattern-select-control.scss
@@ -1,4 +1,4 @@
-.pattern-order-select {
+.pattern-select-control {
 	margin: 0 auto;
 	width: max-content;
 

diff --git a/public_html/wp-content/themes/pattern-directory/src/components/context-bar/index.js b/public_html/wp-content/themes/pattern-directory/src/components/context-bar/index.js
@@ -29,8 +29,8 @@ import { store as patternStore } from '../../store';
  */
 const isHomeQuery = ( query ) => {
 	const allKeys = Object.keys( query || {} );
-	// Filter out "orderby" and "page", which have no affect on what kind of query this is.
-	const keys = allKeys.filter( ( key ) => ! [ 'orderby', 'page' ].includes( key ) );
+	// Filter out "orderby", "page", and "curation", which have no affect on what kind of query this is.
+	const keys = allKeys.filter( ( key ) => ! [ 'orderby', 'page', 'curation' ].includes( key ) );
 	return ! keys.length;
 };
 

diff --git a/public_html/wp-content/themes/pattern-directory/src/components/my-favorites/index.js b/public_html/wp-content/themes/pattern-directory/src/components/my-favorites/index.js
@@ -42,7 +42,7 @@ const MyFavorites = () => {
 	} );
 	const [ ref, onNavigation ] = useFocusOnNavigation();
 
-	const mostFavoritedQuery = { orderby: 'favorite_count', per_page: 6 };
+	const mostFavoritedQuery = { orderby: 'favorite_count', per_page: 6, curation: 'core' };
 	if ( query[ 'pattern-categories' ] ) {
 		mostFavoritedQuery[ 'pattern-categories' ] = query[ 'pattern-categories' ];
 	}
@@ -59,6 +59,7 @@ const MyFavorites = () => {
 						query={ query }
 						onNavigation={ onNavigation }
 						isEmpty={ isEmpty }
+						hideCuration
 					/>
 				) }
 			</div>

diff --git a/public_html/wp-content/themes/pattern-directory/src/components/my-patterns/index.js b/public_html/wp-content/themes/pattern-directory/src/components/my-patterns/index.js
@@ -13,8 +13,8 @@ import { useSelect } from '@wordpress/data';
 import Menu from './menu';
 import NavigationLayout from '../navigation-layout';
 import PatternGrid from '../pattern-grid';
+import PatternSelectControl from '../pattern-select-control';
 import PatternThumbnail from '../pattern-thumbnail';
-import PatternOrderSelect from '../pattern-order-select';
 import QueryMonitor from '../query-monitor';
 import { RouteProvider } from '../../hooks';
 
@@ -63,10 +63,13 @@ const MyPatterns = () => {
 			<NavigationLayout
 				primary={ <Menu /> }
 				secondary={
-					<PatternOrderSelect
+					<PatternSelectControl
+						label={ __( 'Order by', 'wporg-patterns' ) }
+						param="orderby"
+						defaultValue="date"
 						options={ [
 							{ label: __( 'Newest', 'wporg-patterns' ), value: 'date' },
-							{ label: __( 'Favorites', 'wporg-patterns' ), value: 'favorite_count' },
+							{ label: __( 'Popular', 'wporg-patterns' ), value: 'favorite_count' },
 						] }
 					/>
 				}

diff --git a/public_html/wp-content/themes/pattern-directory/src/components/pattern-grid-menu/index.js b/public_html/wp-content/themes/pattern-directory/src/components/pattern-grid-menu/index.js
@@ -8,7 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import ContextBar from '../context-bar';
-import PatternOrderSelect from '../pattern-order-select';
+import PatternSelectControl from '../pattern-select-control';
 import Menu from '../menu';
 import NavigationLayout from '../navigation-layout';
 import { store as patternStore } from '../../store';
@@ -27,7 +27,7 @@ const ALLOWED_CATS = [
 	'wireframe',
 ];
 
-const PatternGridMenu = ( { basePath = '', onNavigation, ...props } ) => {
+const PatternGridMenu = ( { basePath = '', onNavigation, hideCuration = false, ...props } ) => {
 	const { path, update: updatePath } = useRoute();
 	const { categorySlug, isLoading, options } = useSelect( ( select ) => {
 		const { getCategoryById, getCategories, getQueryFromUrl, getUrlFromQuery, isLoadingCategories } =
@@ -76,12 +76,28 @@ const PatternGridMenu = ( { basePath = '', onNavigation, ...props } ) => {
 					/>
 				}
 				secondary={
-					<PatternOrderSelect
-						options={ [
-							{ label: __( 'Newest', 'wporg-patterns' ), value: 'date' },
-							{ label: __( 'Popular', 'wporg-patterns' ), value: 'favorite_count' },
-						] }
-					/>
+					<>
+						{ hideCuration ? null : (
+							<PatternSelectControl
+								label={ __( 'Filter by', 'wporg-patterns' ) }
+								param="curation"
+								defaultValue="core"
+								options={ [
+									{ label: __( 'Curated', 'wporg-patterns' ), value: 'core' },
+									{ label: __( 'Community', 'wporg-patterns' ), value: 'community' },
+								] }
+							/>
+						) }
+						<PatternSelectControl
+							label={ __( 'Order by', 'wporg-patterns' ) }
+							param="orderby"
+							defaultValue="date"
+							options={ [
+								{ label: __( 'Newest', 'wporg-patterns' ), value: 'date' },
+								{ label: __( 'Popular', 'wporg-patterns' ), value: 'favorite_count' },
+							] }
+						/>
+					</>
 				}
 			/>
 			<ContextBar { ...props } />

diff --git a/.../components/pattern-order-select/index.js → ...omponents/pattern-select-control/index.js b/.../components/pattern-order-select/index.js → ...omponents/pattern-select-control/index.js
@@ -1,7 +1,6 @@
 /**
  * Wordpress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
 import { SelectControl } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -11,28 +10,29 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import { useRoute } from '../../hooks';
 
-const PatternOrderSelect = ( { options } ) => {
+const PatternSelectControl = ( { defaultValue, label, param, options } ) => {
 	const { path, replace } = useRoute();
 	const hideLabel = useViewportMatch( 'medium', '>=' );
 
 	if ( ! options ) {
 		return null;
 	}
+	const value = getQueryArg( window.location.href, param ) || defaultValue;
 
 	return (
-		<div className="pattern-order-select">
+		<div className="pattern-select-control">
 			<SelectControl
-				label={ __( 'Order by', 'wporg-patterns' ) }
+				label={ label }
 				labelPosition="side"
 				hideLabelFromVision={ hideLabel }
-				value={ getQueryArg( window.location.href, 'orderby' ) }
+				value={ value }
 				options={ options }
-				onChange={ ( value ) => {
-					replace( addQueryArgs( path, { orderby: value } ).replace( /\/page\/[\d]+/, '' ) );
+				onChange={ ( newValue ) => {
+					replace( addQueryArgs( path, { [ param ]: newValue } ).replace( /\/page\/[\d]+/, '' ) );
 				} }
 			/>
 		</div>
 	);
 };
 
-export default PatternOrderSelect;
+export default PatternSelectControl;
diff --git a/public_html/wp-content/themes/pattern-directory/src/components/patterns/index.js b/public_html/wp-content/themes/pattern-directory/src/components/patterns/index.js
@@ -19,16 +19,25 @@ import { store as patternStore } from '../../store';
 import useFocusOnNavigation from '../../hooks/use-focus-on-navigation';
 
 const Patterns = () => {
-	const { isEmpty, isSearch, query } = useSelect( ( select ) => {
+	const { isAuthor, isEmpty, isSearch, query } = useSelect( ( select ) => {
 		const { getCurrentQuery, getPatternsByQuery, isLoadingPatternsByQuery } = select( patternStore );
-		const _query = getCurrentQuery();
-		const isLoading = _query && isLoadingPatternsByQuery( _query );
-		const posts = _query ? getPatternsByQuery( _query ) : [];
+		const _query = getCurrentQuery() || {};
+		const _isSearch = !! _query.search;
+		const _isAuthor = !! _query.author_name;
+
+		const modifiedQuery = { ..._query };
+		if ( ! _isSearch && ! _isAuthor && ! modifiedQuery.curation ) {
+			modifiedQuery.curation = 'core';
+		}
+
+		const isLoading = isLoadingPatternsByQuery( modifiedQuery );
+		const posts = modifiedQuery ? getPatternsByQuery( modifiedQuery ) : [];
 
 		return {
+			isAuthor: _isAuthor,
 			isEmpty: ! isLoading && ! posts.length,
-			isSearch: _query && !! _query.search,
-			query: _query,
+			isSearch: _isSearch,
+			query: modifiedQuery,
 		};
 	} );
 	const [ ref, onNavigation ] = useFocusOnNavigation();
@@ -39,12 +48,16 @@ const Patterns = () => {
 			<QueryMonitor />
 			<BreadcrumbMonitor />
 			<div ref={ ref }>
-				{ isSearch ? <ContextBar query={ query } /> : <PatternGridMenu onNavigation={ onNavigation } /> }
+				{ isSearch ? (
+					<ContextBar query={ query } />
+				) : (
+					<PatternGridMenu onNavigation={ onNavigation } query={ query } hideCuration={ isAuthor } />
+				) }
 			</div>
 			{ isEmpty ? (
 				<>
 					<EmptyHeader />
-					<PatternGrid query={ { per_page: 6 } } showPagination={ false }>
+					<PatternGrid query={ { per_page: 6, curation: 'core' } } showPagination={ false }>
 						{ ( post ) => <PatternThumbnail key={ post.id } pattern={ post } showAvatar /> }
 					</PatternGrid>
 				</>