@wordpress/block-editor 15.21.1 → 15.22.0

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

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/global-styles/color-panel.js
 var color_panel_exports = {};
 __export(color_panel_exports, {
-  ColorPanelDropdown: () => ColorPanelDropdown,
   ColorToolsPanel: () => ColorToolsPanel,
   default: () => ColorPanel,
   useHasBackgroundColorPanel: () => useHasBackgroundColorPanel,
@@ -42,27 +41,21 @@ __export(color_panel_exports, {
   useHasTextPanel: () => useHasTextPanel
 });
 module.exports = __toCommonJS(color_panel_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_global_styles_engine = require("@wordpress/global-styles-engine");
-var import_icons = require("@wordpress/icons");
-var import_control = __toESM(require("../colors-gradients/control.cjs"));
+var import_color_gradient_dropdown_item = __toESM(require("./color-gradient-dropdown-item.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_lock_unlock = require("../../lock-unlock.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function useHasColorPanel(settings) {
-  const hasTextPanel = useHasTextPanel(settings);
-  const hasBackgroundPanel = useHasBackgroundColorPanel(settings);
   const hasLinkPanel = useHasLinkPanel(settings);
   const hasHeadingPanel = useHasHeadingPanel(settings);
   const hasButtonPanel = useHasButtonPanel(settings);
   const hasCaptionPanel = useHasCaptionPanel(settings);
-  return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
+  return hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
 }
 function useHasTextPanel(settings) {
   const colors = (0, import_hooks.useColorsPerOrigin)(settings);
@@ -120,165 +113,12 @@ function ColorToolsPanel({
     }
   );
 }
-function encodeColorValueWithPalette(allColors, colorValue, slug) {
-  if (slug) {
-    return "var:preset|color|" + slug;
-  }
-  const colorObject = allColors.find(({ color }) => color === colorValue);
-  return colorObject ? "var:preset|color|" + colorObject.slug : colorValue;
-}
 var DEFAULT_CONTROLS = {
-  text: true,
-  background: true,
   link: true,
   heading: true,
   button: true,
   caption: true
 };
-var popoverProps = {
-  placement: "left-start",
-  offset: 36,
-  shift: true
-};
-var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
-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 ColorPanelTab({
-  isGradient,
-  inheritedValue,
-  inheritedSlug,
-  userValue,
-  setValue,
-  colorGradientControlSettings
-}) {
-  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
-    }
-  );
-}
-function ColorPanelDropdown({
-  label,
-  hasValue,
-  resetValue,
-  isShownByDefault,
-  indicators,
-  tabs,
-  colorGradientControlSettings,
-  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] ?? {};
-  const colorGradientDropdownButtonRef = (0, import_element.useRef)(void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.__experimentalToolsPanelItem,
-    {
-      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 }
-              ),
-              "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();
-                  }
-                }
-              )
-            ] });
-          },
-          renderContent: () => /* @__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)(
-              ColorPanelTab,
-              {
-                ...firstTab,
-                colorGradientControlSettings
-              },
-              firstTabKey
-            ),
-            tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { defaultTabId: currentTab?.key, 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)(
-                      ColorPanelTab,
-                      {
-                        ...restTabProps,
-                        colorGradientControlSettings
-                      },
-                      tabKey
-                    )
-                  },
-                  tabKey
-                );
-              })
-            ] })
-          ] }) })
-        }
-      )
-    }
-  );
-}
 function ColorPanel({
   as: Wrapper = ColorToolsPanel,
   value,
@@ -288,67 +128,20 @@ function ColorPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   label,
-  children
+  children,
+  contrastWarning
 }) {
-  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
-  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
-  const areCustomSolidsEnabled = settings?.color?.custom;
-  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) => (0, import_global_styles_engine.getValueFromVariable)({ settings }, "", rawValue);
-  const allColors = (0, import_element.useMemo)(
-    () => colors.flatMap(({ colors: originColors }) => originColors),
-    [colors]
-  );
-  const encodeGradientValue = (gradientValue) => {
-    const allGradients = gradients.flatMap(
-      ({ gradients: originGradients }) => originGradients
-    );
-    const gradientObject = allGradients.find(
-      ({ gradient: gradient2 }) => gradient2 === gradientValue
-    );
-    return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
-  };
-  const showBackgroundPanel = useHasBackgroundColorPanel(settings);
-  const backgroundColor = decodeValue(inheritedValue?.color?.background);
-  const userBackgroundColor = decodeValue(value?.color?.background);
-  const gradient = decodeValue(inheritedValue?.color?.gradient);
-  const userGradient = decodeValue(value?.color?.gradient);
-  const hasBackground = () => !!userBackgroundColor || !hasBackgroundGradientSupport && !!userGradient;
-  const setBackgroundColor = (newColor, newSlug) => {
-    const newValue = (0, import_object.setImmutably)(
-      value,
-      ["color", "background"],
-      encodeColorValueWithPalette(allColors, newColor, newSlug)
-    );
-    if (!hasBackgroundGradientSupport) {
-      newValue.color.gradient = void 0;
-    }
-    onChange(newValue);
-  };
-  const setGradient = (newGradient) => {
-    const newValue = (0, import_object.setImmutably)(
-      value,
-      ["color", "gradient"],
-      encodeGradientValue(newGradient)
-    );
-    newValue.color.background = void 0;
-    onChange(newValue);
-  };
-  const resetBackground = () => {
-    const newValue = (0, import_object.setImmutably)(
-      value,
-      ["color", "background"],
-      void 0
-    );
-    if (!hasBackgroundGradientSupport) {
-      newValue.color.gradient = void 0;
-    }
-    onChange(newValue);
-  };
+  const {
+    colors,
+    gradients,
+    areCustomSolidsEnabled,
+    areCustomGradientsEnabled,
+    hasSolidColors,
+    hasGradientColors,
+    allColors,
+    decodeValue,
+    encodeGradientValue
+  } = (0, import_hooks.useColorGradientSettings)(settings);
   const showLinkPanel = useHasLinkPanel(settings);
   const linkColor = decodeValue(
     inheritedValue?.elements?.link?.color?.text
@@ -359,7 +152,7 @@ function ColorPanel({
       (0, import_object.setImmutably)(
         value,
         ["elements", "link", "color", "text"],
-        encodeColorValueWithPalette(allColors, newColor, newSlug)
+        (0, import_color_values.encodeColorValueWithPalette)(allColors, newColor, newSlug)
       )
     );
   };
@@ -374,7 +167,7 @@ function ColorPanel({
       (0, import_object.setImmutably)(
         value,
         ["elements", "link", ":hover", "color", "text"],
-        encodeColorValueWithPalette(allColors, newColor, newSlug)
+        (0, import_color_values.encodeColorValueWithPalette)(allColors, newColor, newSlug)
       )
     );
   };
@@ -392,154 +185,87 @@ function ColorPanel({
     );
     onChange(newValue);
   };
-  const showTextPanel = useHasTextPanel(settings);
   const showCaptionPanel = useHasCaptionPanel(settings);
   const showButtonPanel = useHasButtonPanel(settings);
   const showHeadingPanel = useHasHeadingPanel(settings);
-  const textColor = decodeValue(inheritedValue?.color?.text);
-  const userTextColor = decodeValue(value?.color?.text);
-  const hasTextColor = () => !!userTextColor;
-  const setTextColor = (newColor, newSlug) => {
-    let changedObject = (0, import_object.setImmutably)(
-      value,
-      ["color", "text"],
-      encodeColorValueWithPalette(allColors, newColor, newSlug)
-    );
-    if (inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text) {
-      changedObject = (0, import_object.setImmutably)(
-        changedObject,
-        ["elements", "link", "color", "text"],
-        encodeColorValueWithPalette(allColors, newColor, newSlug)
-      );
-    }
-    onChange(changedObject);
-  };
-  const resetTextColor = () => setTextColor(void 0);
-  const elements = [
-    {
-      name: "caption",
-      label: (0, import_i18n.__)("Captions"),
-      showPanel: showCaptionPanel
-    },
-    {
-      name: "button",
-      label: (0, import_i18n.__)("Button"),
-      showPanel: showButtonPanel
-    },
-    {
-      name: "heading",
-      label: (0, import_i18n.__)("Heading"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h1",
-      label: (0, import_i18n.__)("H1"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h2",
-      label: (0, import_i18n.__)("H2"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h3",
-      label: (0, import_i18n.__)("H3"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h4",
-      label: (0, import_i18n.__)("H4"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h5",
-      label: (0, import_i18n.__)("H5"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h6",
-      label: (0, import_i18n.__)("H6"),
-      showPanel: showHeadingPanel
-    }
-  ];
-  const resetAllFilter = (previousValue) => {
-    return {
-      ...previousValue,
-      color: void 0,
-      elements: {
-        ...previousValue?.elements,
-        link: {
-          ...previousValue?.elements?.link,
-          color: void 0,
-          ":hover": {
-            color: void 0
-          }
-        },
-        ...elements.reduce((acc, element) => {
-          return {
-            ...acc,
-            [element.name]: {
-              ...previousValue?.elements?.[element.name],
+  const elements = (0, import_element.useMemo)(
+    () => [
+      {
+        name: "caption",
+        label: (0, import_i18n.__)("Captions"),
+        showPanel: showCaptionPanel
+      },
+      {
+        name: "button",
+        label: (0, import_i18n.__)("Button"),
+        showPanel: showButtonPanel
+      },
+      {
+        name: "heading",
+        label: (0, import_i18n.__)("Heading"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h1",
+        label: (0, import_i18n.__)("H1"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h2",
+        label: (0, import_i18n.__)("H2"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h3",
+        label: (0, import_i18n.__)("H3"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h4",
+        label: (0, import_i18n.__)("H4"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h5",
+        label: (0, import_i18n.__)("H5"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h6",
+        label: (0, import_i18n.__)("H6"),
+        showPanel: showHeadingPanel
+      }
+    ],
+    [showCaptionPanel, showButtonPanel, showHeadingPanel]
+  );
+  const resetAllFilter = (0, import_element.useCallback)(
+    (previousValue) => {
+      return {
+        ...previousValue,
+        elements: {
+          ...previousValue?.elements,
+          link: {
+            ...previousValue?.elements?.link,
+            color: void 0,
+            ":hover": {
               color: void 0
             }
-          };
-        }, {})
-      }
-    };
-  };
-  const items = [
-    showTextPanel && {
-      key: "text",
-      label: (0, import_i18n.__)("Text"),
-      hasValue: hasTextColor,
-      resetValue: resetTextColor,
-      isShownByDefault: defaultControls.text,
-      indicators: [textColor],
-      tabs: [
-        {
-          key: "text",
-          label: (0, import_i18n.__)("Text"),
-          inheritedValue: textColor,
-          inheritedSlug: (0, import_color_values.extractPresetSlug)(
-            inheritedValue?.color?.text,
-            "color"
-          ),
-          setValue: setTextColor,
-          userValue: userTextColor
-        }
-      ]
-    },
-    showBackgroundPanel && {
-      key: "background",
-      label: (0, import_i18n.__)("Background"),
-      hasValue: hasBackground,
-      resetValue: resetBackground,
-      isShownByDefault: defaultControls.background,
-      indicators: [
-        (showGradientColors ? gradient : void 0) ?? backgroundColor
-      ],
-      tabs: [
-        hasSolidColors && {
-          key: "background",
-          label: (0, import_i18n.__)("Color"),
-          inheritedValue: backgroundColor,
-          inheritedSlug: (0, import_color_values.extractPresetSlug)(
-            inheritedValue?.color?.background,
-            "color"
-          ),
-          setValue: setBackgroundColor,
-          userValue: userBackgroundColor
-        },
-        showGradientColors && {
-          key: "gradient",
-          label: (0, import_i18n.__)("Gradient"),
-          inheritedValue: gradient,
-          setValue: setGradient,
-          userValue: userGradient,
-          isGradient: true
+          },
+          ...elements.reduce((acc, element) => {
+            return {
+              ...acc,
+              [element.name]: {
+                ...previousValue?.elements?.[element.name],
+                color: void 0
+              }
+            };
+          }, {})
         }
-      ].filter(Boolean)
+      };
     },
+    [elements]
+  );
+  const items = [
     showLinkPanel && {
       key: "link",
       label: (0, import_i18n.__)("Link"),
@@ -547,6 +273,7 @@ function ColorPanel({
       resetValue: resetLink,
       isShownByDefault: defaultControls.link,
       indicators: [linkColor, hoverLinkColor],
+      contrastWarning,
       tabs: [
         {
           key: "link",
@@ -611,7 +338,7 @@ function ColorPanel({
         (0, import_object.setImmutably)(
           value,
           ["elements", name, "color", "text"],
-          encodeColorValueWithPalette(
+          (0, import_color_values.encodeColorValueWithPalette)(
             allColors,
             newTextColor,
             newSlug
@@ -623,7 +350,7 @@ function ColorPanel({
       const newValue = (0, import_object.setImmutably)(
         value,
         ["elements", name, "color", "background"],
-        encodeColorValueWithPalette(
+        (0, import_color_values.encodeColorValueWithPalette)(
           allColors,
           newBackgroundColor,
           newSlug
@@ -641,7 +368,6 @@ function ColorPanel({
       newValue.elements[name].color.background = void 0;
       onChange(newValue);
     };
-    const supportsTextColor = true;
     const supportsBackground = name !== "caption";
     items.push({
       key: name,
@@ -649,14 +375,12 @@ function ColorPanel({
       hasValue: hasElement,
       resetValue: resetElement,
       isShownByDefault: defaultControls[name],
-      indicators: supportsTextColor && supportsBackground ? [
+      indicators: supportsBackground ? [
         elementTextColor,
         elementGradient ?? elementBackgroundColor
-      ] : [
-        supportsTextColor ? elementTextColor : elementGradient ?? elementBackgroundColor
-      ],
+      ] : [elementTextColor],
       tabs: [
-        hasSolidColors && supportsTextColor && {
+        hasSolidColors && {
           key: "text",
           label: (0, import_i18n.__)("Text"),
           inheritedValue: elementTextColor,
@@ -701,7 +425,7 @@ function ColorPanel({
         items.map((item) => {
           const { key, ...restItem } = item;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            ColorPanelDropdown,
+            import_color_gradient_dropdown_item.default,
             {
               ...restItem,
               colorGradientControlSettings: {
@@ -722,7 +446,6 @@ function ColorPanel({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ColorPanelDropdown,
   ColorToolsPanel,
   useHasBackgroundColorPanel,
   useHasButtonPanel,