Design Picker: Allow people to deselect all categories (#97266)

* Design Picker: Allow empty selection

* Design Picker: Change the default selections if no selected goals

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts

@@ -60,17 +60,21 @@ export function getCategorizationOptions(
 	goals: Onboard.SiteGoal[],
 	{ isMultiSelection = false }: CategorizationOptions = {}
 ) {
-	const defaultSelections = Array.from(
+	let defaultSelections = Array.from(
 		new Set(
 			goals
 				.map( ( goal ) => {
 					const preferredCategories = getGoalsPreferredCategories( goal );
 					return isMultiSelection ? preferredCategories : preferredCategories.slice( 0, 1 );
 				} )
-				.flat() ?? [ CATEGORIES.BUSINESS ]
+				.flat()
 		)
 	);
 
+	if ( defaultSelections.length === 0 ) {
+		defaultSelections = [ CATEGORIES.BLOG ];
+	}
+
 	return {
 		defaultSelections,
 		sort: makeSortCategoryToTop( defaultSelections ),

packages/design-picker/src/components/unified-design-picker.tsx

@@ -381,6 +381,9 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 					designs={ best }
 				/>
 			) }
+			{ isMultiFilterEnabled && categorization && categorization.selections.length === 0 && (
+				<DesignCardGroup { ...designCardProps } designs={ all } />
+			) }
 			{ /* We want to show the last one on top first. */ }
 			{ Object.entries( designsByGroup )
 				.reverse()

packages/design-picker/src/hooks/use-categorization.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useCallback } from 'react';
+import { useEffect, useMemo, useCallback, useRef } from 'react';
 import { useDesignPickerFilters } from './use-design-picker-filters';
 import type { Category } from '../types';
 
@@ -26,6 +26,7 @@ export function useCategorization(
 		handleDeselect,
 	}: UseCategorizationOptions
 ): Categorization {
+	const isInitRef = useRef( false );
 	const categories = useMemo( () => {
 		const categoryMapKeys = Object.keys( categoryMap ) || [];
 		const result = categoryMapKeys.map( ( slug ) => ( {
@@ -52,23 +53,21 @@ export function useCategorization(
 				return setSelectedCategories( [ ...selectedCategories, value ] );
 			}
 
-			// The selections should at least have one.
-			if ( selectedCategories.length > 1 ) {
-				handleDeselect?.( value );
-				return setSelectedCategories( [
-					...selectedCategories.slice( 0, index ),
-					...selectedCategories.slice( index + 1 ),
-				] );
-			}
+			handleDeselect?.( value );
+			return setSelectedCategories( [
+				...selectedCategories.slice( 0, index ),
+				...selectedCategories.slice( index + 1 ),
+			] );
 		},
 		[ selectedCategories, isMultiSelection, setSelectedCategories, handleSelect, handleDeselect ]
 	);
 
 	useEffect( () => {
-		if ( categories.length > 0 && selectedCategories.length === 0 ) {
+		if ( ! isInitRef.current && categories.length > 0 && selectedCategories.length === 0 ) {
 			setSelectedCategories( chooseDefaultSelections( categories, defaultSelections ) );
+			isInitRef.current = true;
 		}
-	}, [ categories ] );
+	}, [ isInitRef, categories ] );
 
 	return {
 		categories,
@@ -86,9 +85,12 @@ export function useCategorization(
  * @returns the default category or null if none is available
  */
 function chooseDefaultSelections( categories: Category[], defaultSelections: string[] ): string[] {
-	const defaultSelectionsSet = new Set( defaultSelections );
-	if ( defaultSelections && categories.find( ( { slug } ) => defaultSelectionsSet.has( slug ) ) ) {
-		return defaultSelections;
+	const categorySlugsSet = new Set( categories.map( ( { slug } ) => slug ) );
+	const availableDefaultSelections = defaultSelections.filter( ( selection ) =>
+		categorySlugsSet.has( selection )
+	);
+	if ( availableDefaultSelections.length > 0 ) {
+		return availableDefaultSelections;
 	}
 
 	return categories[ 0 ]?.slug ? [ categories[ 0 ]?.slug ] : [];