Leverage useColorsPerOrigin hook

WordPress · Mar 16, 2022 · c8da70d · c8da70d
1 parent 50d00a2
commit c8da70d
Showing 1 changed file with 8 additions and 50 deletions.
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -12,13 +12,17 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import {
+	getSupportedGlobalStylesPanels,
+	useColorsPerOrigin,
+	useSetting,
+	useStyle,
+} from './hooks';
 
 const MIN_BORDER_WIDTH = 0;
 
@@ -65,52 +69,6 @@ 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.
@@ -162,7 +120,7 @@ export default function BorderPanel( { name } ) {
 	const borderColorSettings = [
 		{
 			label: __( 'Color' ),
-			colors: useMultiOriginColors(),
+			colors: useColorsPerOrigin( name ),
 			colorValue: borderColor,
 			onColorChange: handleOnChangeWithStyle( setBorderColor ),
 			clearable: false,