Fix usage of useSetting('color.palette') (#37108)

* Fix usage of useSetting('color.palette') * Add fallback empty array to prevent spread syntax error with undefined values Co-authored-by: Andrew Serong <[email protected]>
WordPress · Dec 6, 2021 · 8c4390d · 8c4390d
1 parent 4d3e957
commit 8c4390d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js
@@ -36,8 +36,6 @@ const withCustomColorPalette = ( colorsArray ) =>
 		'withCustomColorPalette'
 	);
 
-const EMPTY_OBJECT = {};
-
 /**
  * Higher order component factory for injecting the editor colors as the
  * `colors` prop in the `withColors` HOC.
@@ -50,15 +48,16 @@ const withEditorColorPalette = () =>
 			// Some color settings have a special handling for deprecated flags in `useSetting`,
 			// so we can't unwrap them by doing const { ... } = useSetting('color')
 			// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-			const colorPerOrigin =
-				useSetting( 'color.palette' ) || EMPTY_OBJECT;
+			const userPalette = useSetting( 'color.palette.custom' );
+			const themePalette = useSetting( 'color.palette.theme' );
+			const defaultPalette = useSetting( 'color.palette.default' );
 			const allColors = useMemo(
 				() => [
-					...( colorPerOrigin?.custom || [] ),
-					...( colorPerOrigin?.theme || [] ),
-					...( colorPerOrigin?.default || [] ),
+					...( userPalette || [] ),
+					...( themePalette || [] ),
+					...( defaultPalette || [] ),
 				],
-				[ colorPerOrigin ]
+				[ 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
@@ -221,7 +221,17 @@ export function ColorEdit( props ) {
 	// Some color settings have a special handling for deprecated flags in `useSetting`,
 	// so we can't unwrap them by doing const { ... } = useSetting('color')
 	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const solidsPerOrigin = useSetting( 'color.palette' ) || EMPTY_OBJECT;
+	const userPalette = useSetting( 'color.palette.custom' );
+	const themePalette = useSetting( 'color.palette.theme' );
+	const defaultPalette = useSetting( 'color.palette.default' );
+	const allSolids = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
@@ -230,24 +240,13 @@ export function ColorEdit( props ) {
 	const isTextEnabled = useSetting( 'color.text' );
 
 	const solidsEnabled =
-		areCustomSolidsEnabled ||
-		! solidsPerOrigin?.theme ||
-		solidsPerOrigin?.theme?.length > 0;
+		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
 
 	const gradientsEnabled =
 		areCustomGradientsEnabled ||
 		! gradientsPerOrigin?.theme ||
 		gradientsPerOrigin?.theme?.length > 0;
 
-	const allSolids = useMemo(
-		() => [
-			...( solidsPerOrigin?.custom || [] ),
-			...( solidsPerOrigin?.theme || [] ),
-			...( solidsPerOrigin?.default || [] ),
-		],
-		[ solidsPerOrigin ]
-	);
-
 	const allGradients = useMemo(
 		() => [
 			...( gradientsPerOrigin?.custom || [] ),
@@ -444,19 +443,20 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const solidsPerOrigin = useSetting( 'color.palette' ) || EMPTY_OBJECT;
+		const userPalette = useSetting( 'color.palette.custom' ) || [];
+		const themePalette = useSetting( 'color.palette.theme' ) || [];
+		const defaultPalette = useSetting( 'color.palette.default' ) || [];
 		const colors = useMemo(
 			() => [
-				...( solidsPerOrigin?.custom || [] ),
-				...( solidsPerOrigin?.theme || [] ),
-				...( solidsPerOrigin?.default || [] ),
+				...( userPalette || [] ),
+				...( themePalette || [] ),
+				...( defaultPalette || [] ),
 			],
-			[ solidsPerOrigin ]
+			[ userPalette, themePalette, defaultPalette ]
 		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}
-
 		const extraStyles = {};
 
 		if ( textColor ) {

diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js
@@ -92,16 +92,17 @@ export function useColorProps( attributes ) {
 	// Some color settings have a special handling for deprecated flags in `useSetting`,
 	// so we can't unwrap them by doing const { ... } = useSetting('color')
 	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const solidsPerOrigin = useSetting( 'color.palette' ) || EMPTY_OBJECT;
+	const userPalette = useSetting( 'color.palette.custom' ) || [];
+	const themePalette = useSetting( 'color.palette.theme' ) || [];
+	const defaultPalette = useSetting( 'color.palette.default' ) || [];
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
-
 	const colors = useMemo(
 		() => [
-			...( solidsPerOrigin?.custom || [] ),
-			...( solidsPerOrigin?.theme || [] ),
-			...( solidsPerOrigin?.default || [] ),
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
 		],
-		[ solidsPerOrigin ]
+		[ userPalette, themePalette, defaultPalette ]
 	);
 	const gradients = useMemo(
 		() => [