Fix: Gradients are not being applied by class (#37597)

Co-authored-by: André <[email protected]>
WordPress · Dec 27, 2021 · 1bdb0bc · 1bdb0bc
1 parent 6d0421e
commit 1bdb0bc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
@@ -59,22 +59,22 @@ export function getGradientSlugByValue( gradients, value ) {
  return gradient && gradient.slug;
 }
 
-const EMPTY_OBJECT = {};
-
 export function __experimentalUseGradient( {
  gradientAttribute = 'gradient',
  customGradientAttribute = 'customGradient',
 } = {} ) {
  const { clientId } = useBlockEditContext();
 
- const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+ const userGradientPalette = useSetting( 'color.gradients.custom' );
+ const themeGradientPalette = useSetting( 'color.gradients.theme' );
+ const defaultGradientPalette = useSetting( 'color.gradients.default' );
  const allGradients = useMemo(
  () => [
- ...( gradientsPerOrigin?.custom || [] ),
- ...( gradientsPerOrigin?.theme || [] ),
- ...( gradientsPerOrigin?.default || [] ),
+ ...( userGradientPalette || [] ),
+ ...( themeGradientPalette || [] ),
+ ...( defaultGradientPalette || [] ),
  ],
- [ gradientsPerOrigin ]
+ [ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
  );
  const { gradient, customGradient } = useSelect(
  ( select ) => {

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -32,8 +32,6 @@ import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const EMPTY_OBJECT = {};
-
 const hasColorSupport = ( blockType ) => {
  const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
  return (
@@ -232,7 +230,17 @@ export function ColorEdit( props ) {
  ],
  [ userPalette, themePalette, defaultPalette ]
  );
- const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+ const userGradientPalette = useSetting( 'color.gradients.custom' );
+ const themeGradientPalette = useSetting( 'color.gradients.theme' );
+ const defaultGradientPalette = useSetting( 'color.gradients.default' );
+ const allGradients = useMemo(
+ () => [
+ ...( userGradientPalette || [] ),
+ ...( themeGradientPalette || [] ),
+ ...( defaultGradientPalette || [] ),
+ ],
+ [ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+ );
  const areCustomSolidsEnabled = useSetting( 'color.custom' );
  const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
  const isBackgroundEnabled = useSetting( 'color.background' );
@@ -244,17 +252,8 @@ export function ColorEdit( props ) {
 
  const gradientsEnabled =
  areCustomGradientsEnabled ||
- ! gradientsPerOrigin?.theme ||
- gradientsPerOrigin?.theme?.length > 0;
-
- const allGradients = useMemo(
- () => [
- ...( gradientsPerOrigin?.custom || [] ),
- ...( gradientsPerOrigin?.theme || [] ),
- ...( gradientsPerOrigin?.default || [] ),
- ],
- [ gradientsPerOrigin ]
- );
+ ! themeGradientPalette ||
+ themeGradientPalette?.length > 0;
 
  // Shouldn't be needed but right now the ColorGradientsPanel
  // can trigger both onChangeColor and onChangeBackground