From 41e150b6ca5ca40d131e21aac09b0c1deb073141 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 26 Nov 2021 20:42:04 +0000 Subject: [PATCH] Fix: apply by slug on all origins (#36841) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: André <583546+oandregal@users.noreply.github.com> --- .../src/components/colors/with-colors.js | 16 ++-- .../src/components/gradients/use-gradient.js | 23 +++-- packages/block-editor/src/hooks/color.js | 84 +++++++++++++------ .../block-editor/src/hooks/use-color-props.js | 27 +++++- 4 files changed, 108 insertions(+), 42 deletions(-) diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 0dfe68314ff1f..2f40462857d33 100644 --- 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 ; + const { palette: colorPerOrigin } = useSetting( 'color' ) || {}; + const allColors = useMemo( + () => [ + ...( colorPerOrigin?.custom || [] ), + ...( colorPerOrigin?.theme || [] ), + ...( colorPerOrigin?.default || [] ), + ], + [ colorPerOrigin ] + ); + return ; }, 'withEditorColorPalette' ); diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js index dcd8b36ff7db3..52a4fee408b70 100644 --- 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 index ea4a47f06c3fe..6dc0fe991a2c6 100644 --- 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 ; } diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index a7ba08121fd0a..a3aa77901f028 100644 --- 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 );