Add fallback empty array to prevent spread syntax error with undefine…

…d values
WordPress · Dec 6, 2021 · 5af4d2e · 5af4d2e
1 parent 8c52346
commit 5af4d2e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js
@@ -52,7 +52,11 @@ const withEditorColorPalette = () =>
 			const themePalette = useSetting( 'color.palette.theme' );
 			const defaultPalette = useSetting( 'color.palette.default' );
 			const allColors = useMemo(
-				() => [ ...userPalette, ...themePalette, ...defaultPalette ],
+				() => [
+					...( userPalette || [] ),
+					...( themePalette || [] ),
+					...( defaultPalette || [] ),
+				],
 				[ userPalette, themePalette, defaultPalette ]
 			);
 			return <WrappedComponent { ...props } colors={ allColors } />;

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -225,7 +225,11 @@ export function ColorEdit( props ) {
 	const themePalette = useSetting( 'color.palette.theme' );
 	const defaultPalette = useSetting( 'color.palette.default' );
 	const allSolids = useMemo(
-		() => [ ...userPalette, ...themePalette, ...defaultPalette ],
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
 		[ userPalette, themePalette, defaultPalette ]
 	);
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
@@ -442,7 +446,14 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 		const userPalette = useSetting( 'color.palette.custom' ) || [];
 		const themePalette = useSetting( 'color.palette.theme' ) || [];
 		const defaultPalette = useSetting( 'color.palette.default' ) || [];
-		const colors = [ ...userPalette, ...themePalette, ...defaultPalette ];
+		const colors = useMemo(
+			() => [
+				...( userPalette || [] ),
+				...( themePalette || [] ),
+				...( defaultPalette || [] ),
+			],
+			[ userPalette, themePalette, defaultPalette ]
+		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}

diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js
@@ -96,7 +96,14 @@ export function useColorProps( attributes ) {
 	const themePalette = useSetting( 'color.palette.theme' ) || [];
 	const defaultPalette = useSetting( 'color.palette.default' ) || [];
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
-	const colors = [ ...userPalette, ...themePalette, ...defaultPalette ];
+	const colors = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
 	const gradients = useMemo(
 		() => [
 			...( gradientsPerOrigin?.custom || [] ),