Do not render the duotone present if color.duotone is null

WordPress · Jul 8, 2021 · 4423ef4 · 4423ef4
1 parent 62bd98f
commit 4423ef4
Showing 1 changed file with 40 additions and 35 deletions.
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
@@ -29,43 +29,48 @@ function DuotonePicker( {
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
 	);
-	return (
-		<CircularOptionPicker
-			options={ duotonePalette.map( ( { colors, slug, name } ) => {
-				const style = {
-					background: getGradientFromCSSColors( colors, '135deg' ),
-					color: 'transparent',
-				};
-				const tooltipText =
-					name ??
-					sprintf(
-						// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-						__( 'Duotone code: %s' ),
-						slug
-					);
-				const label = name
-					? sprintf(
-							// translators: %s: The name of the option e.g: "Dark grayscale".
-							__( 'Duotone: %s' ),
-							name
-					  )
-					: tooltipText;
-				const isSelected = isEqual( colors, value );
 
-				return (
-					<CircularOptionPicker.Option
-						key={ slug }
-						value={ colors }
-						isSelected={ isSelected }
-						aria-label={ label }
-						tooltipText={ tooltipText }
-						style={ style }
-						onClick={ () => {
-							onChange( isSelected ? undefined : colors );
-						} }
-					/>
+	let duotonePresets = null;
+	if ( !! duotonePalette ) {
+		duotonePresets = duotonePalette.map( ( { colors, slug, name } ) => {
+			const style = {
+				background: getGradientFromCSSColors( colors, '135deg' ),
+				color: 'transparent',
+			};
+			const tooltipText =
+				name ??
+				sprintf(
+					// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+					__( 'Duotone code: %s' ),
+					slug
 				);
-			} ) }
+			const label = name
+				? sprintf(
+						// translators: %s: The name of the option e.g: "Dark grayscale".
+						__( 'Duotone: %s' ),
+						name
+				  )
+				: tooltipText;
+			const isSelected = isEqual( colors, value );
+
+			return (
+				<CircularOptionPicker.Option
+					key={ slug }
+					value={ colors }
+					isSelected={ isSelected }
+					aria-label={ label }
+					tooltipText={ tooltipText }
+					style={ style }
+					onClick={ () => {
+						onChange( isSelected ? undefined : colors );
+					} }
+				/>
+			);
+		} );
+	}
+	return (
+		<CircularOptionPicker
+			options={ duotonePresets }
 			actions={
 				<CircularOptionPicker.ButtonAction
 					onClick={ () => onChange( undefined ) }