@wordpress/block-editor 8.0.6 → 8.0.7

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+
+/**
+ * Retrieves color and gradient related settings.
+ *
+ * The arrays for colors and gradients are made up of color palettes from each
+ * origin i.e. "Core", "Theme", and "User".
+ *
+ * @return {Object} Color and gradient related settings.
+ */
+export default function useMultipleOriginColorsAndGradients() {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
+
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			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;
+	}, [ defaultColors, themeColors, customColors ] );
+
+	const customGradients = useSetting( 'color.gradients.custom' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const defaultGradients = useSetting( 'color.gradients.default' );
+	const shouldDisplayDefaultGradients = useSetting(
+		'color.defaultGradients'
+	);
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [ customGradients, themeGradients, defaultGradients ] );
+
+	return colorGradientSettings;
+}

package/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,
@@ -46,13 +47,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
@@ -61,7 +64,10 @@ export function BorderColorEdit( props ) {
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue(
+			availableColors,
+			value
+		);
 		const newStyle = {
 			...style,
 			border: {
@@ -83,11 +89,10 @@ export function BorderColorEdit( props ) {
 		<ColorGradientControl
 			label={ __( 'Color' ) }
 			colorValue={ colorValue }
-			colors={ colors }
-			gradients={ undefined }
-			disableCustomColors={ disableCustomColors }
-			disableCustomGradients={ disableCustomGradients }
 			onColorChange={ onChangeColor }
+			clearable={ false }
+			__experimentalHasMultipleOrigins
+			{ ...colorGradientSettings }
 		/>
 	);
 }