@wordpress/block-editor 15.15.0 → 15.16.1-next.v.202604091042.0

package/build-module/components/block-visibility/viewport-visibility-info.mjs

@@ -11,6 +11,7 @@ import { unseen } from "@wordpress/icons";
 import { unlock } from "../../lock-unlock.mjs";
 import { store as blockEditorStore } from "../../store/index.mjs";
 import useBlockVisibility from "./use-block-visibility.mjs";
+import { useBlockElement } from "../block-list/use-block-props/use-block-refs.mjs";
 import { deviceTypeKey } from "../../store/private-keys.mjs";
 import { BLOCK_VISIBILITY_VIEWPORTS } from "./constants.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,9 +44,13 @@ function ViewportVisibilityInfo({ clientId }) {
     },
     [clientId]
   );
+  const blockElement = useBlockElement(clientId);
+  const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+  const canvasView = rawCanvasView === null ? void 0 : rawCanvasView;
   const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility({
     blockVisibility: currentBlockVisibility,
-    deviceType: selectedDeviceType
+    deviceType: selectedDeviceType,
+    view: canvasView
   });
   const isBlockParentHiddenAtViewport = useSelect(
     (select) => {

package/build-module/components/block-visibility/viewport-visibility-info.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/viewport-visibility-info.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tgetSettings()?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<Badge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<Icon icon={ unseen } />\n\t\t\t\t<Text>{ label }</Text>\n\t\t\t</HStack>\n\t\t</Badge>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,eAAe;AAAA,OACT;AACP,SAAS,iBAAiB;AAC1B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AAKvB,SAAS,cAAc;AACvB,SAAS,SAAS,wBAAwB;AAC1C,OAAO,wBAAwB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAwGxC,SACC,KADD;AAtGH,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AAChD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,2BAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AAEvC,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,YAAY,IAAK,aAAc,GAAG,YAAY,KAC9C,2BAA2B,QAAQ;AAAA,QACpC,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAGA,QAAM,EAAE,wBAAwB,gBAAgB,IAAI,mBAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,EACb,CAAE;AAMF,QAAM,gCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,OAAQ,gBAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,cAAQ,GAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,cAAQ;AAAA;AAAA,QAEP,GAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,YAAQ,GAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,YAAQ;AAAA;AAAA,MAEP,GAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,oBAAC,SAAM,WAAU,sCAChB,+BAAC,UAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,wBAAC,QAAK,MAAO,QAAS;AAAA,IACtB,oBAAC,QAAO,iBAAO;AAAA,KAChB,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tgetSettings()?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Get the block's DOM element to derive the canvas iframe window,\n\t// so viewport detection matches the actual block rendering context.\n\tconst blockElement = useBlockElement( clientId );\n\tconst rawCanvasView = blockElement?.ownerDocument?.defaultView;\n\tconst canvasView = rawCanvasView === null ? undefined : rawCanvasView;\n\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t\tview: canvasView,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<Badge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<Icon icon={ unseen } />\n\t\t\t\t<Text>{ label }</Text>\n\t\t\t</HStack>\n\t\t</Badge>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,eAAe;AAAA,OACT;AACP,SAAS,iBAAiB;AAC1B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AAKvB,SAAS,cAAc;AACvB,SAAS,SAAS,wBAAwB;AAC1C,OAAO,wBAAwB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AA8GxC,SACC,KADD;AA5GH,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AAChD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,2BAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AAEvC,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,YAAY,IAAK,aAAc,GAAG,YAAY,KAC9C,2BAA2B,QAAQ;AAAA,QACpC,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAIA,QAAM,eAAe,gBAAiB,QAAS;AAC/C,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,aAAa,kBAAkB,OAAO,SAAY;AAExD,QAAM,EAAE,wBAAwB,gBAAgB,IAAI,mBAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,MAAM;AAAA,EACP,CAAE;AAMF,QAAM,gCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,OAAQ,gBAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,cAAQ,GAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,cAAQ;AAAA;AAAA,QAEP,GAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,YAAQ,GAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,YAAQ;AAAA;AAAA,MAEP,GAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,oBAAC,SAAM,WAAU,sCAChB,+BAAC,UAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,wBAAC,QAAK,MAAO,QAAS;AAAA,IACtB,oBAAC,QAAO,iBAAO;AAAA,KAChB,GACD;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/background-panel.mjs

@@ -5,15 +5,23 @@ import {
 } from "@wordpress/components";
 import { useCallback, Platform } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import { getValueFromVariable } from "@wordpress/global-styles-engine";
 import BackgroundImageControl from "../background-image-control/index.mjs";
+import { ColorPanelDropdown } from "./color-panel.mjs";
+import { useGradientsPerOrigin } from "./hooks.mjs";
 import { useToolsPanelDropdownMenuProps } from "./utils.mjs";
 import { setImmutably } from "../../utils/object.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_CONTROLS = {
-  backgroundImage: true
+  backgroundImage: true,
+  gradient: true
 };
+function useHasBackgroundControl(settings, feature) {
+  return Platform.OS === "web" && settings?.background?.[feature];
+}
 function useHasBackgroundPanel(settings) {
-  return Platform.OS === "web" && settings?.background?.backgroundImage;
+  const { backgroundImage, gradient } = settings?.background || {};
+  return Platform.OS === "web" && (backgroundImage || gradient);
 }
 function hasBackgroundSizeValue(style) {
   return style?.background?.backgroundPosition !== void 0 || style?.background?.backgroundSize !== void 0;
@@ -22,6 +30,9 @@ function hasBackgroundImageValue(style) {
   return !!style?.background?.backgroundImage?.id || // Supports url() string values in theme.json.
   "string" === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
 }
+function hasBackgroundGradientValue(style) {
+  return "string" === typeof style?.background?.gradient && style?.background?.gradient !== "";
+}
 function BackgroundToolsPanel({
   resetAllFilter,
   onChange,
@@ -41,8 +52,12 @@ function BackgroundToolsPanel({
       label: headerLabel,
       resetAll,
       panelId,
+      hasInnerWrapper: true,
+      className: "background-block-support-panel",
+      __experimentalFirstVisibleItemClass: "first",
+      __experimentalLastVisibleItemClass: "last",
       dropdownMenuProps,
-      children
+      children: /* @__PURE__ */ jsx("div", { className: "background-block-support-panel__inner-wrapper", children })
     }
   );
 }
@@ -57,15 +72,76 @@ function BackgroundImagePanel({
   defaultValues = {},
   headerLabel = __("Background")
 }) {
-  const showBackgroundImageControl = useHasBackgroundPanel(settings);
-  const resetBackground = () => onChange(setImmutably(value, ["background"], {}));
-  const resetAllFilter = useCallback((previousValue) => {
-    return {
-      ...previousValue,
-      background: {}
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
+  const gradients = useGradientsPerOrigin(settings);
+  const areCustomGradientsEnabled = settings?.color?.customGradient;
+  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const hasBackgroundGradientControl = useHasBackgroundControl(
+    settings,
+    "gradient"
+  );
+  const showBackgroundGradientControl = hasGradientColors && hasBackgroundGradientControl;
+  const showBackgroundImageControl = useHasBackgroundControl(
+    settings,
+    "backgroundImage"
+  );
+  const resetAllFilter = useCallback(
+    (previousValue) => {
+      return {
+        ...previousValue,
+        background: {},
+        color: hasBackgroundGradientControl ? {
+          ...previousValue?.color,
+          gradient: void 0
+        } : previousValue?.color
+      };
+    },
+    [hasBackgroundGradientControl]
+  );
+  if (!showBackgroundGradientControl && !showBackgroundImageControl) {
+    return null;
+  }
+  const decodeValue = (rawValue) => getValueFromVariable({ settings }, "", rawValue);
+  const encodeGradientValue = (gradientValue) => {
+    const allGradients = gradients.flatMap(
+      ({ gradients: originGradients }) => originGradients
+    );
+    const gradientObject = allGradients.find(
+      ({ gradient }) => gradient === gradientValue
+    );
+    return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
+  };
+  const resetBackground = () => onChange(
+    setImmutably(
+      value,
+      ["background", "backgroundImage"],
+      void 0
+    )
+  );
+  const resetGradient = () => {
+    let newValue = setImmutably(
+      value,
+      ["background", "gradient"],
+      void 0
+    );
+    newValue = setImmutably(newValue, ["color", "gradient"], void 0);
+    onChange(newValue);
+  };
+  const currentGradient = decodeValue(
+    value?.background?.gradient ?? value?.color?.gradient
+  );
+  const inheritedGradient = decodeValue(
+    inheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient
+  );
+  const setGradient = (newGradient) => {
+    let newValue = setImmutably(
+      value,
+      ["background", "gradient"],
+      encodeGradientValue(newGradient)
+    );
+    newValue = setImmutably(newValue, ["color", "gradient"], void 0);
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs(
     Wrapper,
     {
       resetAllFilter,
@@ -73,34 +149,65 @@ function BackgroundImagePanel({
       onChange,
       panelId,
       headerLabel,
-      children: showBackgroundImageControl && /* @__PURE__ */ jsx(
-        ToolsPanelItem,
-        {
-          hasValue: () => !!value?.background,
-          label: __("Image"),
-          onDeselect: resetBackground,
-          isShownByDefault: defaultControls.backgroundImage,
-          panelId,
-          children: /* @__PURE__ */ jsx(
-            BackgroundImageControl,
-            {
-              value,
-              onChange,
-              settings,
-              inheritedValue,
-              defaultControls,
-              defaultValues
-            }
-          )
-        }
-      )
+      children: [
+        showBackgroundImageControl && /* @__PURE__ */ jsx(
+          ToolsPanelItem,
+          {
+            className: "block-editor-background-panel__item",
+            hasValue: () => hasBackgroundImageValue(value),
+            label: __("Image"),
+            onDeselect: resetBackground,
+            isShownByDefault: defaultControls.backgroundImage,
+            panelId,
+            children: /* @__PURE__ */ jsx(
+              BackgroundImageControl,
+              {
+                value,
+                onChange,
+                settings,
+                inheritedValue,
+                defaultControls,
+                defaultValues
+              }
+            )
+          }
+        ),
+        showBackgroundGradientControl && /* @__PURE__ */ jsx(
+          ColorPanelDropdown,
+          {
+            className: "block-editor-background-panel__item",
+            label: __("Gradient"),
+            hasValue: () => hasBackgroundGradientValue(value),
+            resetValue: resetGradient,
+            isShownByDefault: defaultControls.gradient,
+            indicators: [currentGradient],
+            tabs: [
+              {
+                key: "gradient",
+                label: __("Gradient"),
+                inheritedValue: currentGradient ?? inheritedGradient,
+                setValue: setGradient,
+                userValue: currentGradient,
+                isGradient: true
+              }
+            ],
+            colorGradientControlSettings: {
+              gradients,
+              disableCustomGradients: !areCustomGradientsEnabled
+            },
+            panelId
+          }
+        )
+      ]
     }
   );
 }
 export {
   BackgroundImagePanel as default,
+  hasBackgroundGradientValue,
   hasBackgroundImageValue,
   hasBackgroundSizeValue,
+  useHasBackgroundControl,
   useHasBackgroundPanel
 };
 //# sourceMappingURL=background-panel.mjs.map

package/build-module/components/global-styles/background-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/background-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback, Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n};\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\treturn Platform.OS === 'web' && settings?.background?.backgroundImage;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n} ) {\n\tconst showBackgroundImageControl = useHasBackgroundPanel( settings );\n\tconst resetBackground = () =>\n\t\tonChange( setImmutably( value, [ 'background' ], {} ) );\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tbackground: {},\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! value?.background }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,OAC1B;AACP,SAAS,aAAa,gBAAgB;AACtC,SAAS,UAAU;AAInB,OAAO,4BAA4B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB;AAgE3B;AA9DF,IAAM,mBAAmB;AAAA,EACxB,iBAAiB;AAClB;AAUO,SAAS,sBAAuB,UAAW;AACjD,SAAO,SAAS,OAAO,SAAS,UAAU,YAAY;AACvD;AAUO,SAAS,uBAAwB,OAAQ;AAC/C,SACC,OAAO,YAAY,uBAAuB,UAC1C,OAAO,YAAY,mBAAmB;AAExC;AASO,SAAS,wBAAyB,OAAQ;AAChD,SACC,CAAC,CAAE,OAAO,YAAY,iBAAiB;AAAA,EAEvC,aAAa,OAAO,OAAO,YAAY,mBACvC,CAAC,CAAE,OAAO,YAAY,iBAAiB;AAEzC;AAEA,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,oBAAoB,+BAA+B;AACzD,QAAM,WAAW,MAAM;AACtB,UAAM,eAAe,eAAgB,KAAM;AAC3C,aAAU,YAAa;AAAA,EACxB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;AAEe,SAAR,qBAAuC;AAAA,EAC7C,IAAI,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,gBAAgB,CAAC;AAAA,EACjB,cAAc,GAAI,YAAa;AAChC,GAAI;AACH,QAAM,6BAA6B,sBAAuB,QAAS;AACnE,QAAM,kBAAkB,MACvB,SAAU,aAAc,OAAO,CAAE,YAAa,GAAG,CAAC,CAAE,CAAE;AACvD,QAAM,iBAAiB,YAAa,CAAE,kBAAmB;AACxD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,YAAY,CAAC;AAAA,IACd;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,wCACD;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,MAAM,CAAC,CAAE,OAAO;AAAA,UAC3B,OAAQ,GAAI,OAAQ;AAAA,UACpB,YAAa;AAAA,UACb,kBAAmB,gBAAgB;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback, Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport { ColorPanelDropdown } from './color-panel';\nimport { useGradientsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tgradient: true,\n};\n\n/**\n * Checks site settings to see if the requested feature's control may be used.\n *\n * @param {Object} settings Site settings.\n * @param {string} feature  Background feature to check.\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundControl( settings, feature ) {\n\treturn Platform.OS === 'web' && settings?.background?.[ feature ];\n}\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\tconst { backgroundImage, gradient } = settings?.background || {};\n\treturn Platform.OS === 'web' && ( backgroundImage || gradient );\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\n/**\n * Checks if there is a current value in the background gradient block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background gradient value set.\n */\nexport function hasBackgroundGradientValue( style ) {\n\treturn (\n\t\t'string' === typeof style?.background?.gradient &&\n\t\tstyle?.background?.gradient !== ''\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\tclassName=\"background-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"background-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n} ) {\n\tconst gradients = useGradientsPerOrigin( settings );\n\tconst areCustomGradientsEnabled = settings?.color?.customGradient;\n\tconst hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;\n\n\tconst hasBackgroundGradientControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'gradient'\n\t);\n\tconst showBackgroundGradientControl =\n\t\thasGradientColors && hasBackgroundGradientControl;\n\tconst showBackgroundImageControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'backgroundImage'\n\t);\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tbackground: {},\n\t\t\t\tcolor: hasBackgroundGradientControl\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t  }\n\t\t\t\t\t: previousValue?.color,\n\t\t\t};\n\t\t},\n\t\t[ hasBackgroundGradientControl ]\n\t);\n\n\tif ( ! showBackgroundGradientControl && ! showBackgroundImageControl ) {\n\t\treturn null;\n\t}\n\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeGradientValue = ( gradientValue ) => {\n\t\tconst allGradients = gradients.flatMap(\n\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t);\n\t\tconst gradientObject = allGradients.find(\n\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t);\n\t\treturn gradientObject\n\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t: gradientValue;\n\t};\n\n\tconst resetBackground = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst resetGradient = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\t// Get current gradient value, decoding preset slug references.\n\t// Fall back to color.gradient for legacy blocks that haven't migrated\n\t// to background.gradient yet (mirrors block inspector fallback in\n\t// packages/block-editor/src/hooks/background.js).\n\tconst currentGradient = decodeValue(\n\t\tvalue?.background?.gradient ?? value?.color?.gradient\n\t);\n\tconst inheritedGradient = decodeValue(\n\t\tinheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient\n\t);\n\n\t// Set gradient value, encoding preset matches as slug references.\n\t// Also clear color.gradient to migrate from the legacy location,\n\t// matching the block inspector behavior in hooks/background.js.\n\tconst setGradient = ( newGradient ) => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\thasValue={ () => hasBackgroundImageValue( value ) }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBackgroundGradientControl && (\n\t\t\t\t<ColorPanelDropdown\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [ currentGradient ] }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tcurrentGradient ?? inheritedGradient,\n\t\t\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\t\t\tuserValue: currentGradient,\n\t\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/global-styles/color-panel.mjs

@@ -137,7 +137,8 @@ function ColorPanelDropdown({
   indicators,
   tabs,
   colorGradientControlSettings,
-  panelId
+  panelId,
+  className = "block-editor-tools-panel-color-gradient-settings__item"
 }) {
   const currentTab = tabs.find((tab) => tab.userValue !== void 0);
   const { key: firstTabKey, ...firstTab } = tabs[0] ?? {};
@@ -145,7 +146,7 @@ function ColorPanelDropdown({
   return /* @__PURE__ */ jsx(
     ToolsPanelItem,
     {
-      className: "block-editor-tools-panel-color-gradient-settings__item",
+      className,
       hasValue,
       label,
       onDeselect: resetValue,
@@ -254,6 +255,8 @@ function ColorPanel({
   const areCustomGradientsEnabled = settings?.color?.customGradient;
   const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
   const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const hasBackgroundGradientSupport = !!settings?.background?.gradient;
+  const showGradientColors = hasGradientColors && !hasBackgroundGradientSupport;
   const decodeValue = (rawValue) => getValueFromVariable({ settings }, "", rawValue);
   const encodeColorValue = (colorValue) => {
     const allColors = colors.flatMap(
@@ -278,14 +281,16 @@ function ColorPanel({
   const userBackgroundColor = decodeValue(value?.color?.background);
   const gradient = decodeValue(inheritedValue?.color?.gradient);
   const userGradient = decodeValue(value?.color?.gradient);
-  const hasBackground = () => !!userBackgroundColor || !!userGradient;
+  const hasBackground = () => !!userBackgroundColor || !hasBackgroundGradientSupport && !!userGradient;
   const setBackgroundColor = (newColor) => {
     const newValue = setImmutably(
       value,
       ["color", "background"],
       encodeColorValue(newColor)
     );
-    newValue.color.gradient = void 0;
+    if (!hasBackgroundGradientSupport) {
+      newValue.color.gradient = void 0;
+    }
     onChange(newValue);
   };
   const setGradient = (newGradient) => {
@@ -303,7 +308,9 @@ function ColorPanel({
       ["color", "background"],
       void 0
     );
-    newValue.color.gradient = void 0;
+    if (!hasBackgroundGradientSupport) {
+      newValue.color.gradient = void 0;
+    }
     onChange(newValue);
   };
   const showLinkPanel = useHasLinkPanel(settings);
@@ -468,7 +475,9 @@ function ColorPanel({
       hasValue: hasBackground,
       resetValue: resetBackground,
       isShownByDefault: defaultControls.background,
-      indicators: [gradient ?? backgroundColor],
+      indicators: [
+        (showGradientColors ? gradient : void 0) ?? backgroundColor
+      ],
       tabs: [
         hasSolidColors && {
           key: "background",
@@ -477,7 +486,7 @@ function ColorPanel({
           setValue: setBackgroundColor,
           userValue: userBackgroundColor
         },
-        hasGradientColors && {
+        showGradientColors && {
           key: "gradient",
           label: __("Gradient"),
           inheritedValue: gradient,
@@ -644,6 +653,7 @@ function ColorPanel({
   );
 }
 export {
+  ColorPanelDropdown,
   ColorToolsPanel,
   ColorPanel as default,
   useHasBackgroundColorPanel,

package/build-module/components/global-styles/color-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/color-panel.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalHStack as HStack,\n\t// TODO: Replace this ZStack with ad hoc CSS.\n\t// eslint-disable-next-line @wordpress/use-recommended-components\n\t__experimentalZStack as ZStack,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tColorIndicator,\n\tFlex,\n\tFlexItem,\n\tDropdown,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\nimport { reset as resetIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\nimport { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { unlock } from '../../lock-unlock';\n\nexport function useHasColorPanel( settings ) {\n\tconst hasTextPanel = useHasTextPanel( settings );\n\tconst hasBackgroundPanel = useHasBackgroundColorPanel( settings );\n\tconst hasLinkPanel = useHasLinkPanel( settings );\n\tconst hasHeadingPanel = useHasHeadingPanel( settings );\n\tconst hasButtonPanel = useHasButtonPanel( settings );\n\tconst hasCaptionPanel = useHasCaptionPanel( settings );\n\n\treturn (\n\t\thasTextPanel ||\n\t\thasBackgroundPanel ||\n\t\thasLinkPanel ||\n\t\thasHeadingPanel ||\n\t\thasButtonPanel ||\n\t\thasCaptionPanel\n\t);\n}\n\nexport function useHasTextPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.text &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasLinkPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.link &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasCaptionPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.caption &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasHeadingPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.heading &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function useHasButtonPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.button &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function useHasBackgroundColorPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.background &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function ColorToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label || __( 'Elements' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\theadingLevel={ 3 }\n\t\t\tclassName=\"color-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"color-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\ttext: true,\n\tbackground: true,\n\tlink: true,\n\theading: true,\n\tbutton: true,\n\tcaption: true,\n};\n\nconst popoverProps = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n};\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst LabeledColorIndicators = ( { indicators, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t{ indicators.map( ( indicator, index ) => (\n\t\t\t\t<Flex key={ index } expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ indicator } />\n\t\t\t\t</Flex>\n\t\t\t) ) }\n\t\t</ZStack>\n\t\t<FlexItem className=\"block-editor-panel-color-gradient-settings__color-name\">\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\nfunction ColorPanelTab( {\n\tisGradient,\n\tinheritedValue,\n\tuserValue,\n\tsetValue,\n\tcolorGradientControlSettings,\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...colorGradientControlSettings }\n\t\t\tshowTitle={ false }\n\t\t\tenableAlpha\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\tcolorValue={ isGradient ? undefined : inheritedValue }\n\t\t\tgradientValue={ isGradient ? inheritedValue : undefined }\n\t\t\tonColorChange={ isGradient ? undefined : setValue }\n\t\t\tonGradientChange={ isGradient ? setValue : undefined }\n\t\t\tclearable={ inheritedValue === userValue }\n\t\t\theadingLevel={ 3 }\n\t\t/>\n\t);\n}\n\nfunction ColorPanelDropdown( {\n\tlabel,\n\thasValue,\n\tresetValue,\n\tisShownByDefault,\n\tindicators,\n\ttabs,\n\tcolorGradientControlSettings,\n\tpanelId,\n} ) {\n\tconst currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );\n\tconst { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};\n\tconst colorGradientDropdownButtonRef = useRef( undefined );\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\thasValue={ hasValue }\n\t\t\tlabel={ label }\n\t\t\tonDeselect={ resetValue }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\t\tconst toggleProps = {\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\tref: colorGradientDropdownButtonRef,\n\t\t\t\t\t};\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button { ...toggleProps } __next40pxDefaultSize>\n\t\t\t\t\t\t\t\t<LabeledColorIndicators\n\t\t\t\t\t\t\t\t\tindicators={ indicators }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{ hasValue() && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetValue();\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\t\t\t\tcolorGradientDropdownButtonRef.current?.focus();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t{ tabs.length === 1 && (\n\t\t\t\t\t\t\t\t<ColorPanelTab\n\t\t\t\t\t\t\t\t\tkey={ firstTabKey }\n\t\t\t\t\t\t\t\t\t{ ...firstTab }\n\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ tabs.length > 1 && (\n\t\t\t\t\t\t\t\t<Tabs defaultTabId={ currentTab?.key }>\n\t\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ tab.key }\n\t\t\t\t\t\t\t\t\t\t\t\ttabId={ tab.key }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ tab.label }\n\t\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t</Tabs.TabList>\n\n\t\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\t\tconst { key: tabKey, ...restTabProps } =\n\t\t\t\t\t\t\t\t\t\t\ttab;\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\ttabId={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorPanelTab\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ ...restTabProps }\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport default function ColorPanel( {\n\tas: Wrapper = ColorToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tlabel,\n\tchildren,\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst areCustomGradientsEnabled = settings?.color?.customGradient;\n\tconst hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;\n\tconst hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\tconst encodeGradientValue = ( gradientValue ) => {\n\t\tconst allGradients = gradients.flatMap(\n\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t);\n\t\tconst gradientObject = allGradients.find(\n\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t);\n\t\treturn gradientObject\n\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t: gradientValue;\n\t};\n\n\t// BackgroundColor\n\tconst showBackgroundPanel = useHasBackgroundColorPanel( settings );\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst userBackgroundColor = decodeValue( value?.color?.background );\n\tconst gradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst userGradient = decodeValue( value?.color?.gradient );\n\tconst hasBackground = () => !! userBackgroundColor || !! userGradient;\n\tconst setBackgroundColor = ( newColor ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tencodeColorValue( newColor )\n\t\t);\n\t\tnewValue.color.gradient = undefined;\n\t\tonChange( newValue );\n\t};\n\tconst setGradient = ( newGradient ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue.color.background = undefined;\n\t\tonChange( newValue );\n\t};\n\tconst resetBackground = () => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue.color.gradient = undefined;\n\t\tonChange( newValue );\n\t};\n\n\t// Links\n\tconst showLinkPanel = useHasLinkPanel( settings );\n\tconst linkColor = decodeValue(\n\t\tinheritedValue?.elements?.link?.color?.text\n\t);\n\tconst userLinkColor = decodeValue( value?.elements?.link?.color?.text );\n\tconst setLinkColor = ( newColor ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t)\n\t\t);\n\t};\n\tconst hoverLinkColor = decodeValue(\n\t\tinheritedValue?.elements?.link?.[ ':hover' ]?.color?.text\n\t);\n\tconst userHoverLinkColor = decodeValue(\n\t\tvalue?.elements?.link?.[ ':hover' ]?.color?.text\n\t);\n\tconst setHoverLinkColor = ( newColor ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', 'link', ':hover', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLink = () => !! userLinkColor || !! userHoverLinkColor;\n\tconst resetLink = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'elements', 'link', ':hover', 'color', 'text' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably(\n\t\t\tnewValue,\n\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\tundefined\n\t\t);\n\t\tonChange( newValue );\n\t};\n\n\t// Text Color\n\tconst showTextPanel = useHasTextPanel( settings );\n\tconst textColor = decodeValue( inheritedValue?.color?.text );\n\tconst userTextColor = decodeValue( value?.color?.text );\n\tconst hasTextColor = () => !! userTextColor;\n\tconst setTextColor = ( newColor ) => {\n\t\tlet changedObject = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'text' ],\n\t\t\tencodeColorValue( newColor )\n\t\t);\n\t\tif ( textColor === linkColor ) {\n\t\t\tchangedObject = setImmutably(\n\t\t\t\tchangedObject,\n\t\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t);\n\t\t}\n\n\t\tonChange( changedObject );\n\t};\n\tconst resetTextColor = () => setTextColor( undefined );\n\n\t// Elements\n\tconst elements = [\n\t\t{\n\t\t\tname: 'caption',\n\t\t\tlabel: __( 'Captions' ),\n\t\t\tshowPanel: useHasCaptionPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'button',\n\t\t\tlabel: __( 'Button' ),\n\t\t\tshowPanel: useHasButtonPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'heading',\n\t\t\tlabel: __( 'Heading' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h1',\n\t\t\tlabel: __( 'H1' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h2',\n\t\t\tlabel: __( 'H2' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h3',\n\t\t\tlabel: __( 'H3' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h4',\n\t\t\tlabel: __( 'H4' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h5',\n\t\t\tlabel: __( 'H5' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h6',\n\t\t\tlabel: __( 'H6' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t];\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tcolor: undefined,\n\t\t\t\telements: {\n\t\t\t\t\t...previousValue?.elements,\n\t\t\t\t\tlink: {\n\t\t\t\t\t\t...previousValue?.elements?.link,\n\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t':hover': {\n\t\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t...elements.reduce( ( acc, element ) => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...acc,\n\t\t\t\t\t\t\t[ element.name ]: {\n\t\t\t\t\t\t\t\t...previousValue?.elements?.[ element.name ],\n\t\t\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t}, {} ),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t\t[ elements ]\n\t);\n\n\tconst items = [\n\t\tshowTextPanel && {\n\t\t\tkey: 'text',\n\t\t\tlabel: __( 'Text' ),\n\t\t\thasValue: hasTextColor,\n\t\t\tresetValue: resetTextColor,\n\t\t\tisShownByDefault: defaultControls.text,\n\t\t\tindicators: [ textColor ],\n\t\t\ttabs: [\n\t\t\t\t{\n\t\t\t\t\tkey: 'text',\n\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\tinheritedValue: textColor,\n\t\t\t\t\tsetValue: setTextColor,\n\t\t\t\t\tuserValue: userTextColor,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\tshowBackgroundPanel && {\n\t\t\tkey: 'background',\n\t\t\tlabel: __( 'Background' ),\n\t\t\thasValue: hasBackground,\n\t\t\tresetValue: resetBackground,\n\t\t\tisShownByDefault: defaultControls.background,\n\t\t\tindicators: [ gradient ?? backgroundColor ],\n\t\t\ttabs: [\n\t\t\t\thasSolidColors && {\n\t\t\t\t\tkey: 'background',\n\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\tinheritedValue: backgroundColor,\n\t\t\t\t\tsetValue: setBackgroundColor,\n\t\t\t\t\tuserValue: userBackgroundColor,\n\t\t\t\t},\n\t\t\t\thasGradientColors && {\n\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\tinheritedValue: gradient,\n\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\tuserValue: userGradient,\n\t\t\t\t\tisGradient: true,\n\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t},\n\t\tshowLinkPanel && {\n\t\t\tkey: 'link',\n\t\t\tlabel: __( 'Link' ),\n\t\t\thasValue: hasLink,\n\t\t\tresetValue: resetLink,\n\t\t\tisShownByDefault: defaultControls.link,\n\t\t\tindicators: [ linkColor, hoverLinkColor ],\n\t\t\ttabs: [\n\t\t\t\t{\n\t\t\t\t\tkey: 'link',\n\t\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\t\tinheritedValue: linkColor,\n\t\t\t\t\tsetValue: setLinkColor,\n\t\t\t\t\tuserValue: userLinkColor,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tkey: 'hover',\n\t\t\t\t\tlabel: __( 'Hover' ),\n\t\t\t\t\tinheritedValue: hoverLinkColor,\n\t\t\t\t\tsetValue: setHoverLinkColor,\n\t\t\t\t\tuserValue: userHoverLinkColor,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t].filter( Boolean );\n\n\telements.forEach( ( { name, label: elementLabel, showPanel } ) => {\n\t\tif ( ! showPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementBackgroundColor = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.background\n\t\t);\n\t\tconst elementGradient = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.gradient\n\t\t);\n\t\tconst elementTextColor = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.text\n\t\t);\n\t\tconst elementBackgroundUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.background\n\t\t);\n\t\tconst elementGradientUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.gradient\n\t\t);\n\t\tconst elementTextUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.text\n\t\t);\n\t\tconst hasElement = () =>\n\t\t\t!! (\n\t\t\t\telementTextUserColor ||\n\t\t\t\telementBackgroundUserColor ||\n\t\t\t\telementGradientUserColor\n\t\t\t);\n\t\tconst resetElement = () => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'background' ],\n\t\t\t\tundefined\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.gradient = undefined;\n\t\t\tnewValue.elements[ name ].color.text = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\n\t\tconst setElementTextColor = ( newTextColor ) => {\n\t\t\tonChange(\n\t\t\t\tsetImmutably(\n\t\t\t\t\tvalue,\n\t\t\t\t\t[ 'elements', name, 'color', 'text' ],\n\t\t\t\t\tencodeColorValue( newTextColor )\n\t\t\t\t)\n\t\t\t);\n\t\t};\n\t\tconst setElementBackgroundColor = ( newBackgroundColor ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'background' ],\n\t\t\t\tencodeColorValue( newBackgroundColor )\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.gradient = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\t\tconst setElementGradient = ( newGradient ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'gradient' ],\n\t\t\t\tencodeGradientValue( newGradient )\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.background = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\t\tconst supportsTextColor = true;\n\t\t// Background color is not supported for `caption`\n\t\t// as there isn't yet a way to set padding for the element.\n\t\tconst supportsBackground = name !== 'caption';\n\n\t\titems.push( {\n\t\t\tkey: name,\n\t\t\tlabel: elementLabel,\n\t\t\thasValue: hasElement,\n\t\t\tresetValue: resetElement,\n\t\t\tisShownByDefault: defaultControls[ name ],\n\t\t\tindicators:\n\t\t\t\tsupportsTextColor && supportsBackground\n\t\t\t\t\t? [\n\t\t\t\t\t\t\telementTextColor,\n\t\t\t\t\t\t\telementGradient ?? elementBackgroundColor,\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\tsupportsTextColor\n\t\t\t\t\t\t\t\t? elementTextColor\n\t\t\t\t\t\t\t\t: elementGradient ?? elementBackgroundColor,\n\t\t\t\t\t  ],\n\t\t\ttabs: [\n\t\t\t\thasSolidColors &&\n\t\t\t\t\tsupportsTextColor && {\n\t\t\t\t\t\tkey: 'text',\n\t\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\t\tinheritedValue: elementTextColor,\n\t\t\t\t\t\tsetValue: setElementTextColor,\n\t\t\t\t\t\tuserValue: elementTextUserColor,\n\t\t\t\t\t},\n\t\t\t\thasSolidColors &&\n\t\t\t\t\tsupportsBackground && {\n\t\t\t\t\t\tkey: 'background',\n\t\t\t\t\t\tlabel: __( 'Background' ),\n\t\t\t\t\t\tinheritedValue: elementBackgroundColor,\n\t\t\t\t\t\tsetValue: setElementBackgroundColor,\n\t\t\t\t\t\tuserValue: elementBackgroundUserColor,\n\t\t\t\t\t},\n\t\t\t\thasGradientColors &&\n\t\t\t\t\tsupportsBackground && {\n\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\tinheritedValue: elementGradient,\n\t\t\t\t\t\tsetValue: setElementGradient,\n\t\t\t\t\t\tuserValue: elementGradientUserColor,\n\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t} );\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ items.map( ( item ) => {\n\t\t\t\tconst { key, ...restItem } = item;\n\t\t\t\treturn (\n\t\t\t\t\t<ColorPanelDropdown\n\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t{ ...restItem }\n\t\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\tdisableCustomColors: ! areCustomSolidsEnabled,\n\t\t\t\t\t\t\tgradients,\n\t\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ children }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalHStack as HStack,\n\t// TODO: Replace this ZStack with ad hoc CSS.\n\t// eslint-disable-next-line @wordpress/use-recommended-components\n\t__experimentalZStack as ZStack,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tColorIndicator,\n\tFlex,\n\tFlexItem,\n\tDropdown,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\nimport { reset as resetIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\nimport { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { unlock } from '../../lock-unlock';\n\nexport function useHasColorPanel( settings ) {\n\tconst hasTextPanel = useHasTextPanel( settings );\n\tconst hasBackgroundPanel = useHasBackgroundColorPanel( settings );\n\tconst hasLinkPanel = useHasLinkPanel( settings );\n\tconst hasHeadingPanel = useHasHeadingPanel( settings );\n\tconst hasButtonPanel = useHasButtonPanel( settings );\n\tconst hasCaptionPanel = useHasCaptionPanel( settings );\n\n\treturn (\n\t\thasTextPanel ||\n\t\thasBackgroundPanel ||\n\t\thasLinkPanel ||\n\t\thasHeadingPanel ||\n\t\thasButtonPanel ||\n\t\thasCaptionPanel\n\t);\n}\n\nexport function useHasTextPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.text &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasLinkPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.link &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasCaptionPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.caption &&\n\t\t( colors?.length > 0 || settings?.color?.custom )\n\t);\n}\n\nexport function useHasHeadingPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.heading &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function useHasButtonPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.button &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function useHasBackgroundColorPanel( settings ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\treturn (\n\t\tsettings?.color?.background &&\n\t\t( colors?.length > 0 ||\n\t\t\tsettings?.color?.custom ||\n\t\t\tgradients?.length > 0 ||\n\t\t\tsettings?.color?.customGradient )\n\t);\n}\n\nexport function ColorToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label || __( 'Elements' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\theadingLevel={ 3 }\n\t\t\tclassName=\"color-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"color-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\ttext: true,\n\tbackground: true,\n\tlink: true,\n\theading: true,\n\tbutton: true,\n\tcaption: true,\n};\n\nconst popoverProps = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n};\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst LabeledColorIndicators = ( { indicators, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t{ indicators.map( ( indicator, index ) => (\n\t\t\t\t<Flex key={ index } expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ indicator } />\n\t\t\t\t</Flex>\n\t\t\t) ) }\n\t\t</ZStack>\n\t\t<FlexItem className=\"block-editor-panel-color-gradient-settings__color-name\">\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\nfunction ColorPanelTab( {\n\tisGradient,\n\tinheritedValue,\n\tuserValue,\n\tsetValue,\n\tcolorGradientControlSettings,\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...colorGradientControlSettings }\n\t\t\tshowTitle={ false }\n\t\t\tenableAlpha\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\tcolorValue={ isGradient ? undefined : inheritedValue }\n\t\t\tgradientValue={ isGradient ? inheritedValue : undefined }\n\t\t\tonColorChange={ isGradient ? undefined : setValue }\n\t\t\tonGradientChange={ isGradient ? setValue : undefined }\n\t\t\tclearable={ inheritedValue === userValue }\n\t\t\theadingLevel={ 3 }\n\t\t/>\n\t);\n}\n\nexport function ColorPanelDropdown( {\n\tlabel,\n\thasValue,\n\tresetValue,\n\tisShownByDefault,\n\tindicators,\n\ttabs,\n\tcolorGradientControlSettings,\n\tpanelId,\n\tclassName = 'block-editor-tools-panel-color-gradient-settings__item',\n} ) {\n\tconst currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );\n\tconst { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};\n\tconst colorGradientDropdownButtonRef = useRef( undefined );\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName={ className }\n\t\t\thasValue={ hasValue }\n\t\t\tlabel={ label }\n\t\t\tonDeselect={ resetValue }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\t\tconst toggleProps = {\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\tref: colorGradientDropdownButtonRef,\n\t\t\t\t\t};\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button { ...toggleProps } __next40pxDefaultSize>\n\t\t\t\t\t\t\t\t<LabeledColorIndicators\n\t\t\t\t\t\t\t\t\tindicators={ indicators }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{ hasValue() && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetValue();\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\t\t\t\tcolorGradientDropdownButtonRef.current?.focus();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t{ tabs.length === 1 && (\n\t\t\t\t\t\t\t\t<ColorPanelTab\n\t\t\t\t\t\t\t\t\tkey={ firstTabKey }\n\t\t\t\t\t\t\t\t\t{ ...firstTab }\n\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ tabs.length > 1 && (\n\t\t\t\t\t\t\t\t<Tabs defaultTabId={ currentTab?.key }>\n\t\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ tab.key }\n\t\t\t\t\t\t\t\t\t\t\t\ttabId={ tab.key }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ tab.label }\n\t\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t</Tabs.TabList>\n\n\t\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\t\tconst { key: tabKey, ...restTabProps } =\n\t\t\t\t\t\t\t\t\t\t\ttab;\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\ttabId={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorPanelTab\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ ...restTabProps }\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport default function ColorPanel( {\n\tas: Wrapper = ColorToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tlabel,\n\tchildren,\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst areCustomGradientsEnabled = settings?.color?.customGradient;\n\tconst hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;\n\tconst hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;\n\t// When a block opts into background.gradient support, the gradient\n\t// picker moves to the Background panel. Hide it here to avoid\n\t// showing duplicate gradient controls.\n\tconst hasBackgroundGradientSupport = !! settings?.background?.gradient;\n\tconst showGradientColors =\n\t\thasGradientColors && ! hasBackgroundGradientSupport;\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\tconst encodeGradientValue = ( gradientValue ) => {\n\t\tconst allGradients = gradients.flatMap(\n\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t);\n\t\tconst gradientObject = allGradients.find(\n\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t);\n\t\treturn gradientObject\n\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t: gradientValue;\n\t};\n\n\t// BackgroundColor\n\tconst showBackgroundPanel = useHasBackgroundColorPanel( settings );\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst userBackgroundColor = decodeValue( value?.color?.background );\n\tconst gradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst userGradient = decodeValue( value?.color?.gradient );\n\tconst hasBackground = () =>\n\t\t!! userBackgroundColor ||\n\t\t( ! hasBackgroundGradientSupport && !! userGradient );\n\tconst setBackgroundColor = ( newColor ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tencodeColorValue( newColor )\n\t\t);\n\t\tif ( ! hasBackgroundGradientSupport ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\tconst setGradient = ( newGradient ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue.color.background = undefined;\n\t\tonChange( newValue );\n\t};\n\tconst resetBackground = () => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tundefined\n\t\t);\n\t\tif ( ! hasBackgroundGradientSupport ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\t// Links\n\tconst showLinkPanel = useHasLinkPanel( settings );\n\tconst linkColor = decodeValue(\n\t\tinheritedValue?.elements?.link?.color?.text\n\t);\n\tconst userLinkColor = decodeValue( value?.elements?.link?.color?.text );\n\tconst setLinkColor = ( newColor ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t)\n\t\t);\n\t};\n\tconst hoverLinkColor = decodeValue(\n\t\tinheritedValue?.elements?.link?.[ ':hover' ]?.color?.text\n\t);\n\tconst userHoverLinkColor = decodeValue(\n\t\tvalue?.elements?.link?.[ ':hover' ]?.color?.text\n\t);\n\tconst setHoverLinkColor = ( newColor ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', 'link', ':hover', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLink = () => !! userLinkColor || !! userHoverLinkColor;\n\tconst resetLink = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'elements', 'link', ':hover', 'color', 'text' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably(\n\t\t\tnewValue,\n\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\tundefined\n\t\t);\n\t\tonChange( newValue );\n\t};\n\n\t// Text Color\n\tconst showTextPanel = useHasTextPanel( settings );\n\tconst textColor = decodeValue( inheritedValue?.color?.text );\n\tconst userTextColor = decodeValue( value?.color?.text );\n\tconst hasTextColor = () => !! userTextColor;\n\tconst setTextColor = ( newColor ) => {\n\t\tlet changedObject = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'text' ],\n\t\t\tencodeColorValue( newColor )\n\t\t);\n\t\tif ( textColor === linkColor ) {\n\t\t\tchangedObject = setImmutably(\n\t\t\t\tchangedObject,\n\t\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t);\n\t\t}\n\n\t\tonChange( changedObject );\n\t};\n\tconst resetTextColor = () => setTextColor( undefined );\n\n\t// Elements\n\tconst elements = [\n\t\t{\n\t\t\tname: 'caption',\n\t\t\tlabel: __( 'Captions' ),\n\t\t\tshowPanel: useHasCaptionPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'button',\n\t\t\tlabel: __( 'Button' ),\n\t\t\tshowPanel: useHasButtonPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'heading',\n\t\t\tlabel: __( 'Heading' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h1',\n\t\t\tlabel: __( 'H1' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h2',\n\t\t\tlabel: __( 'H2' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h3',\n\t\t\tlabel: __( 'H3' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h4',\n\t\t\tlabel: __( 'H4' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h5',\n\t\t\tlabel: __( 'H5' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t\t{\n\t\t\tname: 'h6',\n\t\t\tlabel: __( 'H6' ),\n\t\t\tshowPanel: useHasHeadingPanel( settings ),\n\t\t},\n\t];\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tcolor: undefined,\n\t\t\t\telements: {\n\t\t\t\t\t...previousValue?.elements,\n\t\t\t\t\tlink: {\n\t\t\t\t\t\t...previousValue?.elements?.link,\n\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t':hover': {\n\t\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t...elements.reduce( ( acc, element ) => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...acc,\n\t\t\t\t\t\t\t[ element.name ]: {\n\t\t\t\t\t\t\t\t...previousValue?.elements?.[ element.name ],\n\t\t\t\t\t\t\t\tcolor: undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t}, {} ),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t\t[ elements ]\n\t);\n\n\tconst items = [\n\t\tshowTextPanel && {\n\t\t\tkey: 'text',\n\t\t\tlabel: __( 'Text' ),\n\t\t\thasValue: hasTextColor,\n\t\t\tresetValue: resetTextColor,\n\t\t\tisShownByDefault: defaultControls.text,\n\t\t\tindicators: [ textColor ],\n\t\t\ttabs: [\n\t\t\t\t{\n\t\t\t\t\tkey: 'text',\n\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\tinheritedValue: textColor,\n\t\t\t\t\tsetValue: setTextColor,\n\t\t\t\t\tuserValue: userTextColor,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\tshowBackgroundPanel && {\n\t\t\tkey: 'background',\n\t\t\tlabel: __( 'Background' ),\n\t\t\thasValue: hasBackground,\n\t\t\tresetValue: resetBackground,\n\t\t\tisShownByDefault: defaultControls.background,\n\t\t\tindicators: [\n\t\t\t\t( showGradientColors ? gradient : undefined ) ??\n\t\t\t\t\tbackgroundColor,\n\t\t\t],\n\t\t\ttabs: [\n\t\t\t\thasSolidColors && {\n\t\t\t\t\tkey: 'background',\n\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\tinheritedValue: backgroundColor,\n\t\t\t\t\tsetValue: setBackgroundColor,\n\t\t\t\t\tuserValue: userBackgroundColor,\n\t\t\t\t},\n\t\t\t\tshowGradientColors && {\n\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\tinheritedValue: gradient,\n\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\tuserValue: userGradient,\n\t\t\t\t\tisGradient: true,\n\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t},\n\t\tshowLinkPanel && {\n\t\t\tkey: 'link',\n\t\t\tlabel: __( 'Link' ),\n\t\t\thasValue: hasLink,\n\t\t\tresetValue: resetLink,\n\t\t\tisShownByDefault: defaultControls.link,\n\t\t\tindicators: [ linkColor, hoverLinkColor ],\n\t\t\ttabs: [\n\t\t\t\t{\n\t\t\t\t\tkey: 'link',\n\t\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\t\tinheritedValue: linkColor,\n\t\t\t\t\tsetValue: setLinkColor,\n\t\t\t\t\tuserValue: userLinkColor,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tkey: 'hover',\n\t\t\t\t\tlabel: __( 'Hover' ),\n\t\t\t\t\tinheritedValue: hoverLinkColor,\n\t\t\t\t\tsetValue: setHoverLinkColor,\n\t\t\t\t\tuserValue: userHoverLinkColor,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t].filter( Boolean );\n\n\telements.forEach( ( { name, label: elementLabel, showPanel } ) => {\n\t\tif ( ! showPanel ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementBackgroundColor = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.background\n\t\t);\n\t\tconst elementGradient = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.gradient\n\t\t);\n\t\tconst elementTextColor = decodeValue(\n\t\t\tinheritedValue?.elements?.[ name ]?.color?.text\n\t\t);\n\t\tconst elementBackgroundUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.background\n\t\t);\n\t\tconst elementGradientUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.gradient\n\t\t);\n\t\tconst elementTextUserColor = decodeValue(\n\t\t\tvalue?.elements?.[ name ]?.color?.text\n\t\t);\n\t\tconst hasElement = () =>\n\t\t\t!! (\n\t\t\t\telementTextUserColor ||\n\t\t\t\telementBackgroundUserColor ||\n\t\t\t\telementGradientUserColor\n\t\t\t);\n\t\tconst resetElement = () => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'background' ],\n\t\t\t\tundefined\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.gradient = undefined;\n\t\t\tnewValue.elements[ name ].color.text = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\n\t\tconst setElementTextColor = ( newTextColor ) => {\n\t\t\tonChange(\n\t\t\t\tsetImmutably(\n\t\t\t\t\tvalue,\n\t\t\t\t\t[ 'elements', name, 'color', 'text' ],\n\t\t\t\t\tencodeColorValue( newTextColor )\n\t\t\t\t)\n\t\t\t);\n\t\t};\n\t\tconst setElementBackgroundColor = ( newBackgroundColor ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'background' ],\n\t\t\t\tencodeColorValue( newBackgroundColor )\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.gradient = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\t\tconst setElementGradient = ( newGradient ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'elements', name, 'color', 'gradient' ],\n\t\t\t\tencodeGradientValue( newGradient )\n\t\t\t);\n\t\t\tnewValue.elements[ name ].color.background = undefined;\n\t\t\tonChange( newValue );\n\t\t};\n\t\tconst supportsTextColor = true;\n\t\t// Background color is not supported for `caption`\n\t\t// as there isn't yet a way to set padding for the element.\n\t\tconst supportsBackground = name !== 'caption';\n\n\t\titems.push( {\n\t\t\tkey: name,\n\t\t\tlabel: elementLabel,\n\t\t\thasValue: hasElement,\n\t\t\tresetValue: resetElement,\n\t\t\tisShownByDefault: defaultControls[ name ],\n\t\t\tindicators:\n\t\t\t\tsupportsTextColor && supportsBackground\n\t\t\t\t\t? [\n\t\t\t\t\t\t\telementTextColor,\n\t\t\t\t\t\t\telementGradient ?? elementBackgroundColor,\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\tsupportsTextColor\n\t\t\t\t\t\t\t\t? elementTextColor\n\t\t\t\t\t\t\t\t: elementGradient ?? elementBackgroundColor,\n\t\t\t\t\t  ],\n\t\t\ttabs: [\n\t\t\t\thasSolidColors &&\n\t\t\t\t\tsupportsTextColor && {\n\t\t\t\t\t\tkey: 'text',\n\t\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\t\tinheritedValue: elementTextColor,\n\t\t\t\t\t\tsetValue: setElementTextColor,\n\t\t\t\t\t\tuserValue: elementTextUserColor,\n\t\t\t\t\t},\n\t\t\t\thasSolidColors &&\n\t\t\t\t\tsupportsBackground && {\n\t\t\t\t\t\tkey: 'background',\n\t\t\t\t\t\tlabel: __( 'Background' ),\n\t\t\t\t\t\tinheritedValue: elementBackgroundColor,\n\t\t\t\t\t\tsetValue: setElementBackgroundColor,\n\t\t\t\t\t\tuserValue: elementBackgroundUserColor,\n\t\t\t\t\t},\n\t\t\t\thasGradientColors &&\n\t\t\t\t\tsupportsBackground && {\n\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\tinheritedValue: elementGradient,\n\t\t\t\t\t\tsetValue: setElementGradient,\n\t\t\t\t\t\tuserValue: elementGradientUserColor,\n\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t} );\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ items.map( ( item ) => {\n\t\t\t\tconst { key, ...restItem } = item;\n\t\t\t\treturn (\n\t\t\t\t\t<ColorPanelDropdown\n\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t{ ...restItem }\n\t\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\tdisableCustomColors: ! areCustomSolidsEnabled,\n\t\t\t\t\t\t\tgradients,\n\t\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ children }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["gradient"]
 }

package/build-module/components/global-styles/hooks.mjs

@@ -41,7 +41,7 @@ function useSettingsForBlockElement(parentSettings, blockName, element) {
       link: updatedSettings.color?.link && supportedStyles.includes("linkColor"),
       caption: updatedSettings.color?.caption && supportedStyles.includes("captionColor")
     };
-    if (!supportedStyles.includes("background")) {
+    if (!supportedStyles.includes("background") && !supportedStyles.includes("backgroundGradient")) {
       updatedSettings.color.gradients = [];
       updatedSettings.color.customGradient = false;
     }
@@ -123,11 +123,15 @@ function useSettingsForBlockElement(parentSettings, blockName, element) {
         };
       }
     });
-    ["backgroundImage", "backgroundSize"].forEach((key) => {
-      if (!supportedStyles.includes(key)) {
+    [
+      ["backgroundImage", "backgroundImage"],
+      ["backgroundSize", "backgroundSize"],
+      ["backgroundGradient", "gradient"]
+    ].forEach(([styleKey, settingKey]) => {
+      if (!supportedStyles.includes(styleKey)) {
         updatedSettings.background = {
           ...updatedSettings.background,
-          [key]: false
+          [settingKey]: false
         };
       }
     });