@wordpress/block-editor 15.21.1 → 15.22.0

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

@@ -1,37 +1,26 @@
 // packages/block-editor/src/components/global-styles/color-panel.js
-import clsx from "clsx";
-import {
-  __experimentalToolsPanel as ToolsPanel,
-  __experimentalToolsPanelItem as ToolsPanelItem,
-  __experimentalHStack as HStack,
-  __experimentalZStack as ZStack,
-  __experimentalDropdownContentWrapper as DropdownContentWrapper,
-  ColorIndicator,
-  Flex,
-  FlexItem,
-  Dropdown,
-  Button,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
-import { useMemo, useRef } from "@wordpress/element";
+import { __experimentalToolsPanel as ToolsPanel } from "@wordpress/components";
+import { useCallback, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { getValueFromVariable } from "@wordpress/global-styles-engine";
-import { reset as resetIcon } from "@wordpress/icons";
-import ColorGradientControl from "../colors-gradients/control.mjs";
-import { useColorsPerOrigin, useGradientsPerOrigin } from "./hooks.mjs";
+import ColorGradientDropdownItem from "./color-gradient-dropdown-item.mjs";
+import {
+  useColorsPerOrigin,
+  useGradientsPerOrigin,
+  useColorGradientSettings
+} from "./hooks.mjs";
 import { useToolsPanelDropdownMenuProps } from "./utils.mjs";
 import { setImmutably } from "../../utils/object.mjs";
-import { extractPresetSlug } from "../../utils/color-values.mjs";
-import { unlock } from "../../lock-unlock.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  extractPresetSlug,
+  encodeColorValueWithPalette
+} from "../../utils/color-values.mjs";
+import { jsx, jsxs } from "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 = useColorsPerOrigin(settings);
@@ -89,165 +78,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 } = unlock(componentsPrivateApis);
-var LabeledColorIndicators = ({ indicators, label }) => /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
-  /* @__PURE__ */ jsx(ZStack, { isLayered: false, offset: -8, children: indicators.map((indicator, index) => /* @__PURE__ */ jsx(Flex, { expanded: false, children: /* @__PURE__ */ jsx(ColorIndicator, { colorValue: indicator }) }, index)) }),
-  /* @__PURE__ */ jsx(FlexItem, { className: "block-editor-panel-color-gradient-settings__color-name", children: label })
-] });
-function ColorPanelTab({
-  isGradient,
-  inheritedValue,
-  inheritedSlug,
-  userValue,
-  setValue,
-  colorGradientControlSettings
-}) {
-  return /* @__PURE__ */ jsx(
-    ColorGradientControl,
-    {
-      ...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 = useRef(void 0);
-  return /* @__PURE__ */ jsx(
-    ToolsPanelItem,
-    {
-      className,
-      hasValue,
-      label,
-      onDeselect: resetValue,
-      isShownByDefault,
-      panelId,
-      children: /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          popoverProps,
-          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
-          renderToggle: ({ onToggle, isOpen }) => {
-            const toggleProps = {
-              onClick: onToggle,
-              className: clsx(
-                "block-editor-panel-color-gradient-settings__dropdown",
-                { "is-open": isOpen }
-              ),
-              "aria-expanded": isOpen,
-              ref: colorGradientDropdownButtonRef
-            };
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { ...toggleProps, __next40pxDefaultSize: true, children: /* @__PURE__ */ jsx(
-                LabeledColorIndicators,
-                {
-                  indicators,
-                  label
-                }
-              ) }),
-              hasValue() && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  __next40pxDefaultSize: true,
-                  label: __("Reset"),
-                  className: "block-editor-panel-color-gradient-settings__reset",
-                  size: "small",
-                  icon: resetIcon,
-                  onClick: () => {
-                    resetValue();
-                    if (isOpen) {
-                      onToggle();
-                    }
-                    colorGradientDropdownButtonRef.current?.focus();
-                  }
-                }
-              )
-            ] });
-          },
-          renderContent: () => /* @__PURE__ */ jsx(DropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ jsxs("div", { className: "block-editor-panel-color-gradient-settings__dropdown-content", children: [
-            tabs.length === 1 && /* @__PURE__ */ jsx(
-              ColorPanelTab,
-              {
-                ...firstTab,
-                colorGradientControlSettings
-              },
-              firstTabKey
-            ),
-            tabs.length > 1 && /* @__PURE__ */ jsxs(Tabs, { defaultTabId: currentTab?.key, children: [
-              /* @__PURE__ */ jsx(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
-                Tabs.Tab,
-                {
-                  tabId: tab.key,
-                  children: tab.label
-                },
-                tab.key
-              )) }),
-              tabs.map((tab) => {
-                const { key: tabKey, ...restTabProps } = tab;
-                return /* @__PURE__ */ jsx(
-                  Tabs.TabPanel,
-                  {
-                    tabId: tabKey,
-                    focusable: false,
-                    children: /* @__PURE__ */ jsx(
-                      ColorPanelTab,
-                      {
-                        ...restTabProps,
-                        colorGradientControlSettings
-                      },
-                      tabKey
-                    )
-                  },
-                  tabKey
-                );
-              })
-            ] })
-          ] }) })
-        }
-      )
-    }
-  );
-}
 function ColorPanel({
   as: Wrapper = ColorToolsPanel,
   value,
@@ -257,67 +93,20 @@ function ColorPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   label,
-  children
+  children,
+  contrastWarning
 }) {
-  const colors = useColorsPerOrigin(settings);
-  const gradients = 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) => getValueFromVariable({ settings }, "", rawValue);
-  const allColors = 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 = setImmutably(
-      value,
-      ["color", "background"],
-      encodeColorValueWithPalette(allColors, newColor, newSlug)
-    );
-    if (!hasBackgroundGradientSupport) {
-      newValue.color.gradient = void 0;
-    }
-    onChange(newValue);
-  };
-  const setGradient = (newGradient) => {
-    const newValue = setImmutably(
-      value,
-      ["color", "gradient"],
-      encodeGradientValue(newGradient)
-    );
-    newValue.color.background = void 0;
-    onChange(newValue);
-  };
-  const resetBackground = () => {
-    const newValue = 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
+  } = useColorGradientSettings(settings);
   const showLinkPanel = useHasLinkPanel(settings);
   const linkColor = decodeValue(
     inheritedValue?.elements?.link?.color?.text
@@ -361,154 +150,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 = setImmutably(
-      value,
-      ["color", "text"],
-      encodeColorValueWithPalette(allColors, newColor, newSlug)
-    );
-    if (inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text) {
-      changedObject = setImmutably(
-        changedObject,
-        ["elements", "link", "color", "text"],
-        encodeColorValueWithPalette(allColors, newColor, newSlug)
-      );
-    }
-    onChange(changedObject);
-  };
-  const resetTextColor = () => setTextColor(void 0);
-  const elements = [
-    {
-      name: "caption",
-      label: __("Captions"),
-      showPanel: showCaptionPanel
-    },
-    {
-      name: "button",
-      label: __("Button"),
-      showPanel: showButtonPanel
-    },
-    {
-      name: "heading",
-      label: __("Heading"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h1",
-      label: __("H1"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h2",
-      label: __("H2"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h3",
-      label: __("H3"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h4",
-      label: __("H4"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h5",
-      label: __("H5"),
-      showPanel: showHeadingPanel
-    },
-    {
-      name: "h6",
-      label: __("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 = useMemo(
+    () => [
+      {
+        name: "caption",
+        label: __("Captions"),
+        showPanel: showCaptionPanel
+      },
+      {
+        name: "button",
+        label: __("Button"),
+        showPanel: showButtonPanel
+      },
+      {
+        name: "heading",
+        label: __("Heading"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h1",
+        label: __("H1"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h2",
+        label: __("H2"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h3",
+        label: __("H3"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h4",
+        label: __("H4"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h5",
+        label: __("H5"),
+        showPanel: showHeadingPanel
+      },
+      {
+        name: "h6",
+        label: __("H6"),
+        showPanel: showHeadingPanel
+      }
+    ],
+    [showCaptionPanel, showButtonPanel, showHeadingPanel]
+  );
+  const resetAllFilter = useCallback(
+    (previousValue) => {
+      return {
+        ...previousValue,
+        elements: {
+          ...previousValue?.elements,
+          link: {
+            ...previousValue?.elements?.link,
+            color: void 0,
+            ":hover": {
               color: void 0
             }
-          };
-        }, {})
-      }
-    };
-  };
-  const items = [
-    showTextPanel && {
-      key: "text",
-      label: __("Text"),
-      hasValue: hasTextColor,
-      resetValue: resetTextColor,
-      isShownByDefault: defaultControls.text,
-      indicators: [textColor],
-      tabs: [
-        {
-          key: "text",
-          label: __("Text"),
-          inheritedValue: textColor,
-          inheritedSlug: extractPresetSlug(
-            inheritedValue?.color?.text,
-            "color"
-          ),
-          setValue: setTextColor,
-          userValue: userTextColor
-        }
-      ]
-    },
-    showBackgroundPanel && {
-      key: "background",
-      label: __("Background"),
-      hasValue: hasBackground,
-      resetValue: resetBackground,
-      isShownByDefault: defaultControls.background,
-      indicators: [
-        (showGradientColors ? gradient : void 0) ?? backgroundColor
-      ],
-      tabs: [
-        hasSolidColors && {
-          key: "background",
-          label: __("Color"),
-          inheritedValue: backgroundColor,
-          inheritedSlug: extractPresetSlug(
-            inheritedValue?.color?.background,
-            "color"
-          ),
-          setValue: setBackgroundColor,
-          userValue: userBackgroundColor
-        },
-        showGradientColors && {
-          key: "gradient",
-          label: __("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: __("Link"),
@@ -516,6 +238,7 @@ function ColorPanel({
       resetValue: resetLink,
       isShownByDefault: defaultControls.link,
       indicators: [linkColor, hoverLinkColor],
+      contrastWarning,
       tabs: [
         {
           key: "link",
@@ -610,7 +333,6 @@ function ColorPanel({
       newValue.elements[name].color.background = void 0;
       onChange(newValue);
     };
-    const supportsTextColor = true;
     const supportsBackground = name !== "caption";
     items.push({
       key: name,
@@ -618,14 +340,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: __("Text"),
           inheritedValue: elementTextColor,
@@ -670,7 +390,7 @@ function ColorPanel({
         items.map((item) => {
           const { key, ...restItem } = item;
           return /* @__PURE__ */ jsx(
-            ColorPanelDropdown,
+            ColorGradientDropdownItem,
             {
               ...restItem,
               colorGradientControlSettings: {
@@ -690,7 +410,6 @@ function ColorPanel({
   );
 }
 export {
-  ColorPanelDropdown,
   ColorToolsPanel,
   ColorPanel as default,
   useHasBackgroundColorPanel,