Fix: apply by slug on all origins (#36841)

Co-authored-by: André <583546+oandregal@users.noreply.github.com>
WordPress · Nov 26, 2021 · 4332a5e · 4332a5e
1 parent 628e956
commit 4332a5e
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 42 deletions.
diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js
@@ -6,7 +6,7 @@ import { isString, kebabCase, reduce, upperFirst } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useMemo, Component } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -20,8 +20,6 @@ import {
 } from './utils';
 import useSetting from '../use-setting';
 
-const DEFAULT_COLORS = [];
-
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.
@@ -47,8 +45,16 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS;
-			return <WrappedComponent { ...props } colors={ colors } />;
+			const { palette: colorPerOrigin } = useSetting( 'color' ) || {};
+			const allColors = useMemo(
+				() => [
+					...( colorPerOrigin?.custom || [] ),
+					...( colorPerOrigin?.theme || [] ),
+					...( colorPerOrigin?.default || [] ),
+				],
+				[ colorPerOrigin ]
+			);
+			return <WrappedComponent { ...props } colors={ allColors } />;
 		},
 		'withEditorColorPalette'
 	);

diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
@@ -6,7 +6,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -16,8 +16,6 @@ import { useBlockEditContext } from '../block-edit';
 import useSetting from '../use-setting';
 import { store as blockEditorStore } from '../../store';
 
-const EMPTY_ARRAY = [];
-
 export function __experimentalGetGradientClass( gradientSlug ) {
 	if ( ! gradientSlug ) {
 		return undefined;
@@ -67,7 +65,15 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const { gradients: gradientsPerOrigin } = useSetting( 'color' ) || {};
+	const allGradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 	const { gradient, customGradient } = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = select( blockEditorStore );
@@ -83,7 +89,10 @@ export function __experimentalUseGradient( {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const setGradient = useCallback(
 		( newGradientValue ) => {
-			const slug = getGradientSlugByValue( gradients, newGradientValue );
+			const slug = getGradientSlugByValue(
+				allGradients,
+				newGradientValue
+			);
 			if ( slug ) {
 				updateBlockAttributes( clientId, {
 					[ gradientAttribute ]: slug,
@@ -96,13 +105,13 @@ export function __experimentalUseGradient( {
 				[ customGradientAttribute ]: newGradientValue,
 			} );
 		},
-		[ gradients, clientId, updateBlockAttributes ]
+		[ allGradients, clientId, updateBlockAttributes ]
 	);
 
 	const gradientClass = __experimentalGetGradientClass( gradient );
 	let gradientValue;
 	if ( gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
+		gradientValue = getGradientValueBySlug( allGradients, gradient );
 	} else {
 		gradientValue = customGradient;
 	}

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -10,7 +10,7 @@ import { isObject, setWith, clone } from 'lodash';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, Platform } from '@wordpress/element';
+import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -31,7 +31,6 @@ import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
-const EMPTY_ARRAY = [];
 
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
@@ -217,13 +216,43 @@ function immutableSet( object, path, value ) {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
-	const areCustomSolidsEnabled = useSetting( 'color.custom' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
+	const {
+		palette: solidsPerOrigin,
+		gradients: gradientsPerOrigin,
+		customGradient: areCustomGradientsEnabled,
+		custom: areCustomSolidsEnabled,
+		text: isTextEnabled,
+		background: isBackgroundEnabled,
+		link: isLinkEnabled,
+	} = useSetting( 'color' ) || {};
+
+	const solidsEnabled =
+		areCustomSolidsEnabled ||
+		! solidsPerOrigin?.theme ||
+		solidsPerOrigin?.theme?.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 || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -239,20 +268,15 @@ export function ColorEdit( props ) {
 	}
 
 	const hasLinkColor =
-		hasLinkColorSupport( blockName ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
 	const hasTextColor =
-		hasTextColorSupport( blockName ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
 	const hasBackgroundColor =
 		hasBackgroundColorSupport( blockName ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		solidsEnabled;
 	const hasGradientColor =
-		hasGradientSupport( blockName ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
+		hasGradientSupport( blockName ) && gradientsEnabled;
 
 	if (
 		! hasLinkColor &&
@@ -266,13 +290,13 @@ export function ColorEdit( props ) {
 	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
+		gradientValue = getGradientValueBySlug( allGradients, gradient );
 	} else if ( hasGradientColor ) {
 		gradientValue = style?.color?.gradient;
 	}
 
 	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
@@ -296,7 +320,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( gradients, value );
+		const slug = getGradientSlugByValue( allGradients, value );
 		let newAttributes;
 		if ( slug ) {
 			const newStyle = {
@@ -331,7 +355,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const newLinkColorValue = colorObject?.slug
 			? `var:preset|color|${ colorObject.slug }`
 			: value;
@@ -360,7 +384,7 @@ export function ColorEdit( props ) {
 								label: __( 'Text color' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									textColor,
 									style?.color?.text
 								).color,
@@ -375,7 +399,7 @@ export function ColorEdit( props ) {
 									? onChangeColor( 'background' )
 									: undefined,
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									backgroundColor,
 									style?.color?.background
 								).color,
@@ -392,7 +416,7 @@ export function ColorEdit( props ) {
 								label: __( 'Link Color' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
-									solids,
+									allSolids,
 									style?.elements?.link?.color?.text
 								),
 								clearable: !! style?.elements?.link?.color
@@ -417,7 +441,15 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+		const { palette: solidsPerOrigin } = useSetting( 'color' ) || {};
+		const colors = useMemo(
+			() => [
+				...( solidsPerOrigin?.custom || [] ),
+				...( solidsPerOrigin?.theme || [] ),
+				...( solidsPerOrigin?.default || [] ),
+			],
+			[ solidsPerOrigin ]
+		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}

diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js
@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -24,8 +29,6 @@ import useSetting from '../components/use-setting';
 // block support is being skipped for a block but the color related CSS classes
 // & styles still need to be generated so they can be applied to inner elements.
 
-const EMPTY_ARRAY = [];
-
 /**
  * Provides the CSS class names and inline styles for a block's color support
  * attributes.
@@ -84,8 +87,24 @@ export function getColorClassesAndStyles( attributes ) {
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const { palette: solidsPerOrigin, gradients: gradientsPerOrigin } =
+		useSetting( 'color' ) || {};
+	const colors = useMemo(
+		() => [
+			...( solidsPerOrigin?.custom || [] ),
+			...( solidsPerOrigin?.theme || [] ),
+			...( solidsPerOrigin?.default || [] ),
+		],
+		[ solidsPerOrigin ]
+	);
+	const gradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	const colorProps = getColorClassesAndStyles( attributes );