@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.0

package/build/components/global-styles/background-panel.cjs

@@ -30,10 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/global-styles/background-panel.js
 var background_panel_exports = {};
 __export(background_panel_exports, {
+  BackgroundToolsPanel: () => BackgroundToolsPanel,
   default: () => BackgroundImagePanel,
+  hasBackgroundColorValue: () => hasBackgroundColorValue,
   hasBackgroundGradientValue: () => hasBackgroundGradientValue,
   hasBackgroundImageValue: () => hasBackgroundImageValue,
   hasBackgroundSizeValue: () => hasBackgroundSizeValue,
+  hasLegacyColorGradientValue: () => hasLegacyColorGradientValue,
   useHasBackgroundControl: () => useHasBackgroundControl,
   useHasBackgroundPanel: () => useHasBackgroundPanel
 });
@@ -41,23 +44,26 @@ module.exports = __toCommonJS(background_panel_exports);
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
-var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_background_image_control = __toESM(require("../background-image-control/index.cjs"));
+var import_color_gradient_dropdown_item = __toESM(require("./color-gradient-dropdown-item.cjs"));
 var import_color_panel = require("./color-panel.cjs");
 var import_hooks = require("./hooks.cjs");
 var import_utils = require("./utils.cjs");
 var import_object = require("../../utils/object.cjs");
+var import_color_values = require("../../utils/color-values.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_CONTROLS = {
   backgroundImage: true,
+  backgroundColor: true,
   gradient: true
 };
 function useHasBackgroundControl(settings, feature) {
   return settings?.background?.[feature];
 }
 function useHasBackgroundPanel(settings) {
+  const hasBackgroundColor = (0, import_color_panel.useHasBackgroundColorPanel)(settings);
   const { backgroundImage, gradient } = settings?.background || {};
-  return backgroundImage || gradient;
+  return backgroundImage || gradient || hasBackgroundColor;
 }
 function hasBackgroundSizeValue(style) {
   return style?.background?.backgroundPosition !== void 0 || style?.background?.backgroundSize !== void 0;
@@ -69,6 +75,12 @@ function hasBackgroundImageValue(style) {
 function hasBackgroundGradientValue(style) {
   return "string" === typeof style?.background?.gradient && style?.background?.gradient !== "";
 }
+function hasBackgroundColorValue(style) {
+  return !!style?.color?.background;
+}
+function hasLegacyColorGradientValue(style) {
+  return !!style?.color?.gradient;
+}
 function BackgroundToolsPanel({
   resetAllFilter,
   onChange,
@@ -101,51 +113,63 @@ function BackgroundImagePanel({
   as: Wrapper = BackgroundToolsPanel,
   value,
   onChange,
-  inheritedValue,
+  inheritedValue = value,
   settings,
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   defaultValues = {},
-  headerLabel = (0, import_i18n.__)("Background")
+  headerLabel = (0, import_i18n.__)("Background"),
+  contrastWarning
 }) {
-  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
-  const areCustomGradientsEnabled = settings?.color?.customGradient;
-  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const {
+    colors,
+    gradients,
+    allColors,
+    areCustomSolidsEnabled,
+    areCustomGradientsEnabled,
+    hasSolidColors,
+    hasGradientColors,
+    decodeValue,
+    encodeGradientValue
+  } = (0, import_hooks.useColorGradientSettings)(settings);
   const hasBackgroundGradientControl = useHasBackgroundControl(
     settings,
     "gradient"
   );
+  const hasColorPanelBackgroundSupport = (0, import_color_panel.useHasBackgroundColorPanel)(settings);
+  const showBackgroundColorControl = hasColorPanelBackgroundSupport && hasSolidColors;
   const showBackgroundGradientControl = hasGradientColors && hasBackgroundGradientControl;
+  const showLegacyColorGradientControl = hasColorPanelBackgroundSupport && hasGradientColors && !hasBackgroundGradientControl;
   const showBackgroundImageControl = useHasBackgroundControl(
     settings,
     "backgroundImage"
   );
   const resetAllFilter = (0, import_element.useCallback)(
     (previousValue) => {
+      const clearsColorBackground = showBackgroundColorControl;
+      const clearsColorGradient = hasBackgroundGradientControl || showLegacyColorGradientControl;
+      if (!clearsColorBackground && !clearsColorGradient) {
+        return { ...previousValue, background: {} };
+      }
       return {
         ...previousValue,
         background: {},
-        color: hasBackgroundGradientControl ? {
+        color: {
           ...previousValue?.color,
-          gradient: void 0
-        } : previousValue?.color
+          ...clearsColorBackground && { background: void 0 },
+          ...clearsColorGradient && { gradient: void 0 }
+        }
       };
     },
-    [hasBackgroundGradientControl]
+    [
+      hasBackgroundGradientControl,
+      showBackgroundColorControl,
+      showLegacyColorGradientControl
+    ]
   );
-  if (!showBackgroundGradientControl && !showBackgroundImageControl) {
+  if (!showBackgroundImageControl && !showBackgroundColorControl && !showBackgroundGradientControl && !showLegacyColorGradientControl) {
     return null;
   }
-  const decodeValue = (rawValue) => (0, import_global_styles_engine.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(
     (0, import_object.setImmutably)(
       value,
@@ -162,6 +186,42 @@ function BackgroundImagePanel({
     newValue = (0, import_object.setImmutably)(newValue, ["color", "gradient"], void 0);
     onChange(newValue);
   };
+  const backgroundColor = decodeValue(inheritedValue?.color?.background);
+  const userBackgroundColor = decodeValue(value?.color?.background);
+  const setBackgroundColor = (newColor, newSlug) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      (0, import_color_values.encodeColorValueWithPalette)(allColors, newColor, newSlug)
+    );
+    if (showLegacyColorGradientControl) {
+      newValue.color.gradient = void 0;
+    }
+    onChange(newValue);
+  };
+  const resetBackgroundColor = () => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      void 0
+    );
+    if (showLegacyColorGradientControl) {
+      newValue.color.gradient = void 0;
+    }
+    onChange(newValue);
+  };
+  const legacyColorGradient = decodeValue(inheritedValue?.color?.gradient);
+  const userLegacyColorGradient = decodeValue(value?.color?.gradient);
+  const setLegacyColorGradient = (newGradient) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "gradient"],
+      encodeGradientValue(newGradient)
+    );
+    newValue.color.background = void 0;
+    onChange(newValue);
+  };
+  const resetLegacyColorGradient = () => onChange((0, import_object.setImmutably)(value, ["color", "gradient"], void 0));
   const currentGradient = decodeValue(
     value?.background?.gradient ?? value?.color?.gradient
   );
@@ -189,7 +249,7 @@ function BackgroundImagePanel({
         showBackgroundImageControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.__experimentalToolsPanelItem,
           {
-            className: "block-editor-background-panel__item",
+            className: "block-editor-color-gradient-item",
             hasValue: () => hasBackgroundImageValue(value),
             label: (0, import_i18n.__)("Image"),
             onDeselect: resetBackground,
@@ -208,10 +268,48 @@ function BackgroundImagePanel({
             )
           }
         ),
+        showBackgroundColorControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_color_gradient_dropdown_item.default,
+          {
+            label: (0, import_i18n.__)("Color"),
+            hasValue: () => hasBackgroundColorValue(value),
+            resetValue: resetBackgroundColor,
+            isShownByDefault: defaultControls.backgroundColor,
+            indicators: [userBackgroundColor ?? backgroundColor],
+            contrastWarning,
+            tabs: [
+              {
+                key: "background",
+                label: (0, import_i18n.__)("Color"),
+                inheritedValue: userBackgroundColor ?? backgroundColor,
+                // Resolve the slug from the same source as the
+                // displayed value (user value first, then the
+                // inherited fallback). For a block instance the
+                // selection lives in `value` while `inheritedValue`
+                // only holds the global styles fallback, so reading
+                // the slug from `inheritedValue` alone would miss it
+                // and two same-hex presets would both appear selected.
+                inheritedSlug: (0, import_color_values.extractPresetSlug)(
+                  value?.color?.background,
+                  "color"
+                ) ?? (0, import_color_values.extractPresetSlug)(
+                  inheritedValue?.color?.background,
+                  "color"
+                ),
+                setValue: setBackgroundColor,
+                userValue: userBackgroundColor
+              }
+            ],
+            colorGradientControlSettings: {
+              colors,
+              disableCustomColors: !areCustomSolidsEnabled
+            },
+            panelId
+          }
+        ),
         showBackgroundGradientControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_color_panel.ColorPanelDropdown,
+          import_color_gradient_dropdown_item.default,
           {
-            className: "block-editor-background-panel__item",
             label: (0, import_i18n.__)("Gradient"),
             hasValue: () => hasBackgroundGradientValue(value),
             resetValue: resetGradient,
@@ -233,6 +331,33 @@ function BackgroundImagePanel({
             },
             panelId
           }
+        ),
+        showLegacyColorGradientControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_color_gradient_dropdown_item.default,
+          {
+            label: (0, import_i18n.__)("Gradient"),
+            hasValue: () => hasLegacyColorGradientValue(value),
+            resetValue: resetLegacyColorGradient,
+            isShownByDefault: defaultControls.gradient,
+            indicators: [
+              userLegacyColorGradient ?? legacyColorGradient
+            ],
+            tabs: [
+              {
+                key: "gradient",
+                label: (0, import_i18n.__)("Gradient"),
+                inheritedValue: userLegacyColorGradient ?? legacyColorGradient,
+                setValue: setLegacyColorGradient,
+                userValue: userLegacyColorGradient,
+                isGradient: true
+              }
+            ],
+            colorGradientControlSettings: {
+              gradients,
+              disableCustomGradients: !areCustomGradientsEnabled
+            },
+            panelId
+          }
         )
       ]
     }
@@ -240,9 +365,12 @@ function BackgroundImagePanel({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BackgroundToolsPanel,
+  hasBackgroundColorValue,
   hasBackgroundGradientValue,
   hasBackgroundImageValue,
   hasBackgroundSizeValue,
+  hasLegacyColorGradientValue,
   useHasBackgroundControl,
   useHasBackgroundPanel
 });

package/build/components/global-styles/background-panel.cjs.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 } 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 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 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": ["ToolsPanel", "ToolsPanelItem", "BackgroundImageControl"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport ColorGradientDropdownItem from './color-gradient-dropdown-item';\nimport { useHasBackgroundColorPanel } from './color-panel';\nimport { useColorGradientSettings } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport {\n\textractPresetSlug,\n\tencodeColorValueWithPalette,\n} from '../../utils/color-values';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tbackgroundColor: 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 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 * The panel is also shown when the block has color panel background\n * support (`settings.color.background`), because background color and\n * the legacy `color.gradient` control are rendered here.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\tconst hasBackgroundColor = useHasBackgroundColorPanel( settings );\n\tconst { backgroundImage, gradient } = settings?.background || {};\n\treturn backgroundImage || gradient || hasBackgroundColor;\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\n/**\n * Checks if there is a current value for the background color (written to\n * `color.background`).\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background color value set.\n */\nexport function hasBackgroundColorValue( style ) {\n\treturn !! style?.color?.background;\n}\n\n/**\n * Checks if there is a current value in the legacy `color.gradient` location\n * (used by blocks with color panel gradient support that haven't adopted the\n * `background.gradient` block support).\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a legacy color gradient value set.\n */\nexport function hasLegacyColorGradientValue( style ) {\n\treturn !! style?.color?.gradient;\n}\n\nexport function 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 = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n\tcontrastWarning,\n} ) {\n\tconst {\n\t\tcolors,\n\t\tgradients,\n\t\tallColors,\n\t\tareCustomSolidsEnabled,\n\t\tareCustomGradientsEnabled,\n\t\thasSolidColors,\n\t\thasGradientColors,\n\t\tdecodeValue,\n\t\tencodeGradientValue,\n\t} = useColorGradientSettings( settings );\n\n\tconst hasBackgroundGradientControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'gradient'\n\t);\n\tconst hasColorPanelBackgroundSupport =\n\t\tuseHasBackgroundColorPanel( settings );\n\tconst showBackgroundColorControl =\n\t\thasColorPanelBackgroundSupport && hasSolidColors;\n\t// New `background.gradient` block support — gradient lives under the\n\t// `background` style path.\n\tconst showBackgroundGradientControl =\n\t\thasGradientColors && hasBackgroundGradientControl;\n\t// Legacy `color.gradient` path — only rendered when the block has\n\t// color panel background support and hasn't adopted the newer\n\t// `background.gradient` support. Keeps the UI consistent for blocks\n\t// that still write gradients to `color.gradient`.\n\tconst showLegacyColorGradientControl =\n\t\thasColorPanelBackgroundSupport &&\n\t\thasGradientColors &&\n\t\t! 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\tconst clearsColorBackground = showBackgroundColorControl;\n\t\t\tconst clearsColorGradient =\n\t\t\t\thasBackgroundGradientControl || showLegacyColorGradientControl;\n\t\t\tif ( ! clearsColorBackground && ! clearsColorGradient ) {\n\t\t\t\treturn { ...previousValue, background: {} };\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tbackground: {},\n\t\t\t\tcolor: {\n\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\t...( clearsColorBackground && { background: undefined } ),\n\t\t\t\t\t...( clearsColorGradient && { gradient: undefined } ),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\thasBackgroundGradientControl,\n\t\t\tshowBackgroundColorControl,\n\t\t\tshowLegacyColorGradientControl,\n\t\t]\n\t);\n\n\tif (\n\t\t! showBackgroundImageControl &&\n\t\t! showBackgroundColorControl &&\n\t\t! showBackgroundGradientControl &&\n\t\t! showLegacyColorGradientControl\n\t) {\n\t\treturn null;\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// Background color (written to `color.background`).\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst userBackgroundColor = decodeValue( value?.color?.background );\n\tconst setBackgroundColor = ( newColor, newSlug ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tencodeColorValueWithPalette( allColors, newColor, newSlug )\n\t\t);\n\t\t// Legacy `color.gradient` is mutually exclusive with\n\t\t// `color.background`. `background.gradient` is independent and\n\t\t// should not be touched.\n\t\tif ( showLegacyColorGradientControl ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\tconst resetBackgroundColor = () => {\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 ( showLegacyColorGradientControl ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\t// Legacy `color.gradient` setters.\n\tconst legacyColorGradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst userLegacyColorGradient = decodeValue( value?.color?.gradient );\n\tconst setLegacyColorGradient = ( 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 resetLegacyColorGradient = () =>\n\t\tonChange( setImmutably( value, [ 'color', 'gradient' ], undefined ) );\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-color-gradient-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{ showBackgroundColorControl && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundColorValue( value ) }\n\t\t\t\t\tresetValue={ resetBackgroundColor }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundColor }\n\t\t\t\t\tindicators={ [ userBackgroundColor ?? backgroundColor ] }\n\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'background',\n\t\t\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tuserBackgroundColor ?? backgroundColor,\n\t\t\t\t\t\t\t// Resolve the slug from the same source as the\n\t\t\t\t\t\t\t// displayed value (user value first, then the\n\t\t\t\t\t\t\t// inherited fallback). For a block instance the\n\t\t\t\t\t\t\t// selection lives in `value` while `inheritedValue`\n\t\t\t\t\t\t\t// only holds the global styles fallback, so reading\n\t\t\t\t\t\t\t// the slug from `inheritedValue` alone would miss it\n\t\t\t\t\t\t\t// and two same-hex presets would both appear selected.\n\t\t\t\t\t\t\tinheritedSlug:\n\t\t\t\t\t\t\t\textractPresetSlug(\n\t\t\t\t\t\t\t\t\tvalue?.color?.background,\n\t\t\t\t\t\t\t\t\t'color'\n\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\textractPresetSlug(\n\t\t\t\t\t\t\t\t\tinheritedValue?.color?.background,\n\t\t\t\t\t\t\t\t\t'color'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tsetValue: setBackgroundColor,\n\t\t\t\t\t\t\tuserValue: userBackgroundColor,\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\tcolors,\n\t\t\t\t\t\tdisableCustomColors: ! areCustomSolidsEnabled,\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\t{ showBackgroundGradientControl && (\n\t\t\t\t<ColorGradientDropdownItem\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\t{ showLegacyColorGradientControl && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasLegacyColorGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetLegacyColorGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [\n\t\t\t\t\t\tuserLegacyColorGradient ?? legacyColorGradient,\n\t\t\t\t\t] }\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\tuserLegacyColorGradient ?? legacyColorGradient,\n\t\t\t\t\t\t\tsetValue: setLegacyColorGradient,\n\t\t\t\t\t\t\tuserValue: userLegacyColorGradient,\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": ["ToolsPanel", "ToolsPanelItem", "BackgroundImageControl", "ColorGradientDropdownItem"]
 }

package/build/components/global-styles/color-gradient-dropdown-item.cjs

@@ -0,0 +1,227 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
+var color_gradient_dropdown_item_exports = {};
+__export(color_gradient_dropdown_item_exports, {
+  default: () => ColorGradientDropdownItem
+});
+module.exports = __toCommonJS(color_gradient_dropdown_item_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_control = __toESM(require("../colors-gradients/control.cjs"));
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+function DropdownContent({
+  tabs,
+  colorGradientControlSettings,
+  contrastWarning
+}) {
+  const { key: firstTabKey, ...firstTab } = tabs[0] ?? {};
+  const defaultTabId = tabs.find(
+    (tab) => tab.userValue !== void 0
+  )?.key;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-panel-color-gradient-settings__dropdown-content", children: [
+    tabs.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ColorGradientTab,
+      {
+        ...firstTab,
+        colorGradientControlSettings,
+        contrastWarning
+      },
+      firstTabKey
+    ),
+    tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { defaultTabId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: tab.key, children: tab.label }, tab.key)) }),
+      tabs.map((tab) => {
+        const { key: tabKey, ...restTabProps } = tab;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Tabs.TabPanel,
+          {
+            tabId: tabKey,
+            focusable: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ColorGradientTab,
+              {
+                ...restTabProps,
+                colorGradientControlSettings,
+                contrastWarning
+              },
+              tabKey
+            )
+          },
+          tabKey
+        );
+      })
+    ] })
+  ] }) });
+}
+var popoverProps = {
+  placement: "left-start",
+  offset: 36,
+  shift: true
+};
+var LabeledColorIndicators = ({ indicators, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalZStack, { isLayered: false, offset: -8, children: indicators.map((indicator, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Flex, { expanded: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ColorIndicator, { colorValue: indicator }) }, index)) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { className: "block-editor-panel-color-gradient-settings__color-name", children: label })
+] });
+function ColorGradientTab({
+  isGradient,
+  inheritedValue,
+  inheritedSlug,
+  userValue,
+  setValue,
+  colorGradientControlSettings,
+  contrastWarning
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_control.default,
+    {
+      ...colorGradientControlSettings,
+      showTitle: false,
+      enableAlpha: true,
+      __experimentalIsRenderedInSidebar: true,
+      colorValue: isGradient ? void 0 : inheritedValue,
+      colorSlug: isGradient ? void 0 : inheritedSlug,
+      gradientValue: isGradient ? inheritedValue : void 0,
+      onColorChange: isGradient ? void 0 : setValue,
+      onGradientChange: isGradient ? setValue : void 0,
+      clearable: inheritedValue === userValue,
+      headingLevel: 3,
+      noticeProps: !isGradient && contrastWarning ? {
+        children: contrastWarning,
+        status: "warning",
+        spokenMessage: null,
+        className: "block-editor-panel-color-gradient-settings__contrast-notice"
+      } : void 0
+    }
+  );
+}
+function ColorGradientDropdownItem({
+  label,
+  hasValue,
+  resetValue,
+  isShownByDefault,
+  indicators,
+  tabs,
+  colorGradientControlSettings,
+  panelId,
+  contrastWarning,
+  className = "block-editor-tools-panel-color-gradient-settings__item"
+}) {
+  const colorGradientDropdownButtonRef = (0, import_element.useRef)(void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanelItem,
+    {
+      className: (0, import_clsx.default)("block-editor-color-gradient-item", className),
+      hasValue,
+      label,
+      onDeselect: resetValue,
+      isShownByDefault,
+      panelId,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Dropdown,
+        {
+          popoverProps,
+          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+          renderToggle: ({ onToggle, isOpen }) => {
+            const toggleProps = {
+              onClick: onToggle,
+              className: (0, import_clsx.default)(
+                "block-editor-panel-color-gradient-settings__dropdown",
+                {
+                  "is-open": isOpen,
+                  "has-contrast-warning": !!contrastWarning
+                }
+              ),
+              "aria-expanded": isOpen,
+              ref: colorGradientDropdownButtonRef
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { ...toggleProps, __next40pxDefaultSize: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                LabeledColorIndicators,
+                {
+                  indicators,
+                  label
+                }
+              ) }),
+              hasValue() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  label: (0, import_i18n.__)("Reset"),
+                  className: "block-editor-panel-color-gradient-settings__reset",
+                  size: "small",
+                  icon: import_icons.reset,
+                  onClick: () => {
+                    resetValue();
+                    if (isOpen) {
+                      onToggle();
+                    }
+                    colorGradientDropdownButtonRef.current?.focus();
+                  }
+                }
+              ),
+              contrastWarning && // An icon-only warning that stays visible while a
+              // contrast warning is in effect. It is not a menu;
+              // activating it opens the color picker popover where
+              // the full warning notice is shown, so the indicator
+              // doubles as a shortcut to where the issue is fixed.
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  size: "small",
+                  icon: import_icons.caution,
+                  label: (0, import_i18n.__)("Low contrast"),
+                  className: "block-editor-panel-color-gradient-settings__contrast-warning",
+                  "aria-expanded": isOpen,
+                  onClick: onToggle
+                }
+              )
+            ] });
+          },
+          renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DropdownContent,
+            {
+              tabs,
+              colorGradientControlSettings,
+              contrastWarning
+            }
+          )
+        }
+      )
+    }
+  );
+}
+//# sourceMappingURL=color-gradient-dropdown-item.cjs.map

package/build/components/global-styles/color-gradient-dropdown-item.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/color-gradient-dropdown-item.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalHStack as HStack,\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 { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\n/**\n * @typedef {Object} DropdownContentProps\n * @property {Array}  tabs                         Tab configurations to render.\n * @property {Object} colorGradientControlSettings Settings passed to ColorGradientControl.\n * @property {string} [contrastWarning]            Contrast warning message for the color value.\n */\n\n/**\n * Renders the dropdown content containing the color/gradient picker tabs.\n *\n * @param {DropdownContentProps} props\n */\nfunction DropdownContent( {\n\ttabs,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\n} ) {\n\tconst { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};\n\tconst defaultTabId = tabs.find(\n\t\t( tab ) => tab.userValue !== undefined\n\t)?.key;\n\treturn (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t{ tabs.length === 1 && (\n\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\tkey={ firstTabKey }\n\t\t\t\t\t\t{ ...firstTab }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ tabs.length > 1 && (\n\t\t\t\t\t<Tabs defaultTabId={ defaultTabId }>\n\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.Tab key={ tab.key } tabId={ tab.key }>\n\t\t\t\t\t\t\t\t\t{ tab.label }\n\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs.TabList>\n\n\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\tconst { key: tabKey, ...restTabProps } = tab;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\ttabId={ tabKey }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t{ ...restTabProps }\n\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Tabs>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DropdownContentWrapper>\n\t);\n}\n\nconst popoverProps = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n};\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 ColorGradientTab( {\n\tisGradient,\n\tinheritedValue,\n\tinheritedSlug,\n\tuserValue,\n\tsetValue,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\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\tcolorSlug={ isGradient ? undefined : inheritedSlug }\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\tnoticeProps={\n\t\t\t\t! isGradient && contrastWarning\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tchildren: contrastWarning,\n\t\t\t\t\t\t\tstatus: 'warning',\n\t\t\t\t\t\t\tspokenMessage: null,\n\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__contrast-notice',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// Renders a ToolsPanelItem that opens a dropdown containing one or more\n// color/gradient pickers. Shared between the Color, Background, and\n// Typography panels for consistent color-style controls.\nexport default function ColorGradientDropdownItem( {\n\tlabel,\n\thasValue,\n\tresetValue,\n\tisShownByDefault,\n\tindicators,\n\ttabs,\n\tcolorGradientControlSettings,\n\tpanelId,\n\tcontrastWarning,\n\tclassName = 'block-editor-tools-panel-color-gradient-settings__item',\n} ) {\n\tconst colorGradientDropdownButtonRef = useRef( undefined );\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName={ clsx( 'block-editor-color-gradient-item', 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{\n\t\t\t\t\t\t\t\t'is-open': isOpen,\n\t\t\t\t\t\t\t\t'has-contrast-warning': !! contrastWarning,\n\t\t\t\t\t\t\t}\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\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\t{ contrastWarning && (\n\t\t\t\t\t\t\t\t// An icon-only warning that stays visible while a\n\t\t\t\t\t\t\t\t// contrast warning is in effect. It is not a menu;\n\t\t\t\t\t\t\t\t// activating it opens the color picker popover where\n\t\t\t\t\t\t\t\t// the full warning notice is shown, so the indicator\n\t\t\t\t\t\t\t\t// doubles as a shortcut to where the issue is fixed.\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\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ cautionIcon }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Low contrast' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__contrast-warning\"\n\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\tonClick={ onToggle }\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<DropdownContent\n\t\t\t\t\t\ttabs={ tabs }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["componentsPrivateApis", "DropdownContentWrapper", "HStack", "ZStack", "ColorGradientControl", "ToolsPanelItem", "clsx", "resetIcon", "cautionIcon"]
+}