Fix display of color palettes for global styles border panel

Also switches to use the new ColorGradientSettingsDropdown like the block editor.

packages/edit-site/src/components/global-styles/border-panel.js

@@ -4,15 +4,16 @@
 import {
 	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientControl as ColorGradientControl,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 } from '@wordpress/block-editor';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -21,10 +22,6 @@ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 
 const MIN_BORDER_WIDTH = 0;
 
-// Defining empty array here instead of inline avoids unnecessary re-renders of
-// color control.
-const EMPTY_ARRAY = [];
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -68,6 +65,52 @@ function useHasBorderWidthControl( name ) {
 	);
 }
 
+function useMultiOriginColors( name ) {
+	const [ customColors ] = useSetting( 'color.palette.custom', name );
+	const [ themeColors ] = useSetting( 'color.palette.theme', name );
+	const [ defaultColors ] = useSetting( 'color.palette.default', name );
+	const [ defaultPaletteEnabled ] = useSetting(
+		'color.defaultPalette',
+		name
+	);
+
+	return useMemo( () => {
+		const result = [];
+
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+
+		if ( defaultPaletteEnabled && defaultColors && defaultColors.length ) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: customColors,
+			} );
+		}
+
+		return result;
+	}, [ customColors, defaultColors, defaultPaletteEnabled, themeColors ] );
+}
+
 export default function BorderPanel( { name } ) {
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
@@ -100,13 +143,32 @@ export default function BorderPanel( { name } ) {
 	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
+
 	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
 	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
 
+	const borderColorSettings = [
+		{
+			label: __( 'Color' ),
+			colors: useMultiOriginColors(),
+			colorValue: borderColor,
+			onColorChange: handleOnChangeWithStyle( setBorderColor ),
+			clearable: false,
+		},
+	];
+
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
@@ -128,16 +190,6 @@ export default function BorderPanel( { name } ) {
 		setBorderWidth( undefined );
 	};
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
-
-		setStyle( value || undefined );
-	};
-
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
@@ -178,17 +230,13 @@ export default function BorderPanel( { name } ) {
 					onDeselect={ createResetCallback( setBorderColor ) }
 					isShownByDefault={ true }
 				>
-					<ColorGradientControl
-						label={ __( 'Color' ) }
-						colorValue={ borderColor }
-						colors={ colors }
-						gradients={ undefined }
+					<ColorGradientSettingsDropdown
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChangeWithStyle(
-							setBorderColor
-						) }
-						clearable={ false }
+						enableAlpha
+						settings={ borderColorSettings }
 					/>
 				</ToolsPanelItem>
 			) }