Update border color to display multiple color palette origins

WordPress · Nov 24, 2021 · 4579690 · 4579690
1 parent 30210e1
commit 4579690
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
@@ -3,8 +3,7 @@
  */
 import useSetting from '../use-setting';
 
-export default 
-function useCommonSingleMultipleSelects() {
+export default function useCommonSingleMultipleSelects() {
 	return {
 		disableCustomColors: ! useSetting( 'color.custom' ),
 		disableCustomGradients: ! useSetting( 'color.customGradient' ),

diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorGradientControl from '../components/colors-gradients/control';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import {
 	getColorClassName,
 	getColorObjectByColorValue,
@@ -50,13 +51,15 @@ export function BorderColorEdit( props ) {
 		attributes: { borderColor, style },
 		setAttributes,
 	} = props;
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const disableCustomColors = ! useSetting( 'color.custom' );
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableColors = colorGradientSettings.colors.reduce(
+		( colors, origin ) => colors.concat( origin.colors ),
+		[]
+	);
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
-				colors,
+				availableColors,
 				borderColor,
 				style?.border?.color
 			)?.color
@@ -65,7 +68,10 @@ export function BorderColorEdit( props ) {
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue(
+			availableColors,
+			value
+		);
 		const newStyle = {
 			...style,
 			border: {
@@ -87,12 +93,10 @@ export function BorderColorEdit( props ) {
 		<ColorGradientControl
 			label={ __( 'Color' ) }
 			colorValue={ colorValue }
-			colors={ colors }
-			gradients={ undefined }
-			disableCustomColors={ disableCustomColors }
-			disableCustomGradients={ disableCustomGradients }
 			onColorChange={ onChangeColor }
 			clearable={ false }
+			__experimentalHasMultipleOrigins
+			{ ...colorGradientSettings }
 		/>
 	);
 }