@wordpress/block-editor 15.9.1-next.8fd3f8831.0 → 15.10.1-next.06ee73755.0

package/build-module/components/colors/with-colors.mjs

@@ -0,0 +1,154 @@
+// packages/block-editor/src/components/colors/with-colors.js
+import { useMemo, Component } from "@wordpress/element";
+import { compose, createHigherOrderComponent } from "@wordpress/compose";
+import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import {
+  getColorClassName,
+  getColorObjectByColorValue,
+  getColorObjectByAttributeValues,
+  getMostReadableColor
+} from "./utils.mjs";
+import { useSettings } from "../use-settings/index.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { jsx } from "react/jsx-runtime";
+var { kebabCase } = unlock(componentsPrivateApis);
+var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
+var withCustomColorPalette = (colorsArray) => createHigherOrderComponent(
+  (WrappedComponent) => (props) => /* @__PURE__ */ jsx(WrappedComponent, { ...props, colors: colorsArray }),
+  "withCustomColorPalette"
+);
+var withEditorColorPalette = () => createHigherOrderComponent(
+  (WrappedComponent) => (props) => {
+    const [userPalette, themePalette, defaultPalette] = useSettings(
+      "color.palette.custom",
+      "color.palette.theme",
+      "color.palette.default"
+    );
+    const allColors = useMemo(
+      () => [
+        ...userPalette || [],
+        ...themePalette || [],
+        ...defaultPalette || []
+      ],
+      [userPalette, themePalette, defaultPalette]
+    );
+    return /* @__PURE__ */ jsx(WrappedComponent, { ...props, colors: allColors });
+  },
+  "withEditorColorPalette"
+);
+function createColorHOC(colorTypes, withColorPalette) {
+  const colorMap = colorTypes.reduce((colorObject, colorType) => {
+    return {
+      ...colorObject,
+      ...typeof colorType === "string" ? { [colorType]: kebabCase(colorType) } : colorType
+    };
+  }, {});
+  return compose([
+    withColorPalette,
+    (WrappedComponent) => {
+      return class extends Component {
+        constructor(props) {
+          super(props);
+          this.setters = this.createSetters();
+          this.colorUtils = {
+            getMostReadableColor: this.getMostReadableColor.bind(this)
+          };
+          this.state = {};
+        }
+        getMostReadableColor(colorValue) {
+          const { colors } = this.props;
+          return getMostReadableColor(colors, colorValue);
+        }
+        createSetters() {
+          return Object.keys(colorMap).reduce(
+            (settersAccumulator, colorAttributeName) => {
+              const upperFirstColorAttributeName = upperFirst(colorAttributeName);
+              const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
+              settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(
+                colorAttributeName,
+                customColorAttributeName
+              );
+              return settersAccumulator;
+            },
+            {}
+          );
+        }
+        createSetColor(colorAttributeName, customColorAttributeName) {
+          return (colorValue) => {
+            const colorObject = getColorObjectByColorValue(
+              this.props.colors,
+              colorValue
+            );
+            this.props.setAttributes({
+              [colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : void 0,
+              [customColorAttributeName]: colorObject && colorObject.slug ? void 0 : colorValue
+            });
+          };
+        }
+        static getDerivedStateFromProps({ attributes, colors }, previousState) {
+          return Object.entries(colorMap).reduce(
+            (newState, [colorAttributeName, colorContext]) => {
+              const colorObject = getColorObjectByAttributeValues(
+                colors,
+                attributes[colorAttributeName],
+                attributes[`custom${upperFirst(
+                  colorAttributeName
+                )}`]
+              );
+              const previousColorObject = previousState[colorAttributeName];
+              const previousColor = previousColorObject?.color;
+              if (previousColor === colorObject.color && previousColorObject) {
+                newState[colorAttributeName] = previousColorObject;
+              } else {
+                newState[colorAttributeName] = {
+                  ...colorObject,
+                  class: getColorClassName(
+                    colorContext,
+                    colorObject.slug
+                  )
+                };
+              }
+              return newState;
+            },
+            {}
+          );
+        }
+        render() {
+          return /* @__PURE__ */ jsx(
+            WrappedComponent,
+            {
+              ...{
+                ...this.props,
+                colors: void 0,
+                ...this.state,
+                ...this.setters,
+                colorUtils: this.colorUtils
+              }
+            }
+          );
+        }
+      };
+    }
+  ]);
+}
+function createCustomColorsHOC(colorsArray) {
+  return (...colorTypes) => {
+    const withColorPalette = withCustomColorPalette(colorsArray);
+    return createHigherOrderComponent(
+      createColorHOC(colorTypes, withColorPalette),
+      "withCustomColors"
+    );
+  };
+}
+function withColors(...colorTypes) {
+  const withColorPalette = withEditorColorPalette();
+  return createHigherOrderComponent(
+    createColorHOC(colorTypes, withColorPalette),
+    "withColors"
+  );
+}
+export {
+  createCustomColorsHOC,
+  withColors as default
+};
+//# sourceMappingURL=with-colors.mjs.map

package/build-module/components/colors-gradients/control.mjs

@@ -0,0 +1,149 @@
+// packages/block-editor/src/components/colors-gradients/control.js
+import clsx from "clsx";
+import { __ } from "@wordpress/i18n";
+import {
+  BaseControl,
+  __experimentalVStack as VStack,
+  ColorPalette,
+  GradientPicker,
+  privateApis as componentsPrivateApis
+} from "@wordpress/components";
+import { useSettings } from "../use-settings/index.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { Tabs } = unlock(componentsPrivateApis);
+var colorsAndGradientKeys = [
+  "colors",
+  "disableCustomColors",
+  "gradients",
+  "disableCustomGradients"
+];
+var TAB_IDS = { color: "color", gradient: "gradient" };
+function ColorGradientControlInner({
+  colors,
+  gradients,
+  disableCustomColors,
+  disableCustomGradients,
+  __experimentalIsRenderedInSidebar,
+  className,
+  label,
+  onColorChange,
+  onGradientChange,
+  colorValue,
+  gradientValue,
+  clearable,
+  showTitle = true,
+  enableAlpha,
+  headingLevel
+}) {
+  const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
+  const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);
+  if (!canChooseAColor && !canChooseAGradient) {
+    return null;
+  }
+  const tabPanels = {
+    [TAB_IDS.color]: /* @__PURE__ */ jsx(
+      ColorPalette,
+      {
+        value: colorValue,
+        onChange: canChooseAGradient ? (newColor) => {
+          onColorChange(newColor);
+          onGradientChange();
+        } : onColorChange,
+        ...{ colors, disableCustomColors },
+        __experimentalIsRenderedInSidebar,
+        clearable,
+        enableAlpha,
+        headingLevel
+      }
+    ),
+    [TAB_IDS.gradient]: /* @__PURE__ */ jsx(
+      GradientPicker,
+      {
+        value: gradientValue,
+        onChange: canChooseAColor ? (newGradient) => {
+          onGradientChange(newGradient);
+          onColorChange();
+        } : onGradientChange,
+        ...{ gradients, disableCustomGradients },
+        __experimentalIsRenderedInSidebar,
+        clearable,
+        headingLevel
+      }
+    )
+  };
+  const renderPanelType = (type) => /* @__PURE__ */ jsx("div", { className: "block-editor-color-gradient-control__panel", children: tabPanels[type] });
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      className: clsx(
+        "block-editor-color-gradient-control",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("fieldset", { className: "block-editor-color-gradient-control__fieldset", children: /* @__PURE__ */ jsxs(VStack, { spacing: 1, children: [
+        showTitle && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx("div", { className: "block-editor-color-gradient-control__color-indicator", children: /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: label }) }) }),
+        canChooseAColor && canChooseAGradient && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
+            children: [
+              /* @__PURE__ */ jsxs(Tabs.TabList, { children: [
+                /* @__PURE__ */ jsx(Tabs.Tab, { tabId: TAB_IDS.color, children: __("Color") }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { tabId: TAB_IDS.gradient, children: __("Gradient") })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Tabs.TabPanel,
+                {
+                  tabId: TAB_IDS.color,
+                  className: "block-editor-color-gradient-control__panel",
+                  focusable: false,
+                  children: tabPanels.color
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tabs.TabPanel,
+                {
+                  tabId: TAB_IDS.gradient,
+                  className: "block-editor-color-gradient-control__panel",
+                  focusable: false,
+                  children: tabPanels.gradient
+                }
+              )
+            ]
+          }
+        ) }),
+        !canChooseAGradient && renderPanelType(TAB_IDS.color),
+        !canChooseAColor && renderPanelType(TAB_IDS.gradient)
+      ] }) })
+    }
+  );
+}
+function ColorGradientControlSelect(props) {
+  const [colors, gradients, customColors, customGradients] = useSettings(
+    "color.palette",
+    "color.gradients",
+    "color.custom",
+    "color.customGradient"
+  );
+  return /* @__PURE__ */ jsx(
+    ColorGradientControlInner,
+    {
+      colors,
+      gradients,
+      disableCustomColors: !customColors,
+      disableCustomGradients: !customGradients,
+      ...props
+    }
+  );
+}
+function ColorGradientControl(props) {
+  if (colorsAndGradientKeys.every((key) => props.hasOwnProperty(key))) {
+    return /* @__PURE__ */ jsx(ColorGradientControlInner, { ...props });
+  }
+  return /* @__PURE__ */ jsx(ColorGradientControlSelect, { ...props });
+}
+var control_default = ColorGradientControl;
+export {
+  control_default as default
+};
+//# sourceMappingURL=control.mjs.map

package/build-module/components/colors-gradients/dropdown.mjs

@@ -0,0 +1,185 @@
+// packages/block-editor/src/components/colors-gradients/dropdown.js
+import clsx from "clsx";
+import {
+  Button,
+  ColorIndicator,
+  Dropdown,
+  FlexItem,
+  __experimentalDropdownContentWrapper as DropdownContentWrapper,
+  __experimentalHStack as HStack,
+  __experimentalToolsPanelItem as ToolsPanelItem
+} from "@wordpress/components";
+import { useRef } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { reset as resetIcon } from "@wordpress/icons";
+import ColorGradientControl from "./control.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WithToolsPanelItem = ({ setting, children, panelId, ...props }) => {
+  const clearValue = () => {
+    if (setting.colorValue) {
+      setting.onColorChange();
+    } else if (setting.gradientValue) {
+      setting.onGradientChange();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ToolsPanelItem,
+    {
+      hasValue: () => {
+        return !!setting.colorValue || !!setting.gradientValue;
+      },
+      label: setting.label,
+      onDeselect: clearValue,
+      isShownByDefault: setting.isShownByDefault !== void 0 ? setting.isShownByDefault : true,
+      ...props,
+      className: "block-editor-tools-panel-color-gradient-settings__item",
+      panelId,
+      resetAllFilter: setting.resetAllFilter,
+      children
+    }
+  );
+};
+var LabeledColorIndicator = ({ colorValue, label }) => /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
+  /* @__PURE__ */ jsx(
+    ColorIndicator,
+    {
+      className: "block-editor-panel-color-gradient-settings__color-indicator",
+      colorValue
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FlexItem,
+    {
+      className: "block-editor-panel-color-gradient-settings__color-name",
+      title: label,
+      children: label
+    }
+  )
+] });
+var renderToggle = (settings) => ({ onToggle, isOpen }) => {
+  const {
+    clearable,
+    colorValue,
+    gradientValue,
+    onColorChange,
+    onGradientChange,
+    label
+  } = settings;
+  const colorButtonRef = useRef(void 0);
+  const toggleProps = {
+    onClick: onToggle,
+    className: clsx(
+      "block-editor-panel-color-gradient-settings__dropdown",
+      { "is-open": isOpen }
+    ),
+    "aria-expanded": isOpen,
+    ref: colorButtonRef
+  };
+  const clearValue = () => {
+    if (colorValue) {
+      onColorChange();
+    } else if (gradientValue) {
+      onGradientChange();
+    }
+  };
+  const value = colorValue ?? gradientValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { __next40pxDefaultSize: true, ...toggleProps, children: /* @__PURE__ */ jsx(
+      LabeledColorIndicator,
+      {
+        colorValue: value,
+        label
+      }
+    ) }),
+    clearable && value && /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        label: __("Reset"),
+        className: "block-editor-panel-color-gradient-settings__reset",
+        size: "small",
+        icon: resetIcon,
+        onClick: () => {
+          clearValue();
+          if (isOpen) {
+            onToggle();
+          }
+          colorButtonRef.current?.focus();
+        }
+      }
+    )
+  ] });
+};
+function ColorGradientSettingsDropdown({
+  colors,
+  disableCustomColors,
+  disableCustomGradients,
+  enableAlpha,
+  gradients,
+  settings,
+  __experimentalIsRenderedInSidebar,
+  ...props
+}) {
+  let popoverProps;
+  if (__experimentalIsRenderedInSidebar) {
+    popoverProps = {
+      placement: "left-start",
+      offset: 36,
+      shift: true
+    };
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: settings.map((setting, index) => {
+    const controlProps = {
+      clearable: false,
+      colorValue: setting.colorValue,
+      colors,
+      disableCustomColors,
+      disableCustomGradients,
+      enableAlpha,
+      gradientValue: setting.gradientValue,
+      gradients,
+      label: setting.label,
+      onColorChange: setting.onColorChange,
+      onGradientChange: setting.onGradientChange,
+      showTitle: false,
+      __experimentalIsRenderedInSidebar,
+      ...setting
+    };
+    const toggleSettings = {
+      clearable: setting.clearable,
+      label: setting.label,
+      colorValue: setting.colorValue,
+      gradientValue: setting.gradientValue,
+      onColorChange: setting.onColorChange,
+      onGradientChange: setting.onGradientChange
+    };
+    return setting && // If not in an `ItemGroup` wrap the dropdown in a
+    // `ToolsPanelItem`
+    /* @__PURE__ */ jsx(
+      WithToolsPanelItem,
+      {
+        setting,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            popoverProps,
+            className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+            renderToggle: renderToggle(toggleSettings),
+            renderContent: () => /* @__PURE__ */ jsx(DropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ jsx("div", { className: "block-editor-panel-color-gradient-settings__dropdown-content", children: /* @__PURE__ */ jsx(
+              ColorGradientControl,
+              {
+                ...controlProps
+              }
+            ) }) })
+          }
+        )
+      },
+      index
+    );
+  }) });
+}
+export {
+  ColorGradientSettingsDropdown as default
+};
+//# sourceMappingURL=dropdown.mjs.map

package/build-module/components/colors-gradients/panel-color-gradient-settings.mjs

@@ -0,0 +1,112 @@
+// packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+import clsx from "clsx";
+import {
+  __experimentalSpacer as Spacer,
+  __experimentalToolsPanel as ToolsPanel
+} from "@wordpress/components";
+import { useRegistry } from "@wordpress/data";
+import { useInstanceId } from "@wordpress/compose";
+import ColorGradientSettingsDropdown from "./dropdown.mjs";
+import useColorsAndGradientsPalettes from "./use-multiple-origin-colors-and-gradients.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var colorsAndGradientKeys = [
+  "colors",
+  "disableCustomColors",
+  "gradients",
+  "disableCustomGradients"
+];
+var PanelColorGradientSettingsInner = ({
+  className,
+  colors,
+  gradients,
+  disableCustomColors,
+  disableCustomGradients,
+  children,
+  settings,
+  title,
+  showTitle = true,
+  __experimentalIsRenderedInSidebar,
+  enableAlpha
+}) => {
+  const panelId = useInstanceId(PanelColorGradientSettingsInner);
+  const { batch } = useRegistry();
+  if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(
+    (setting) => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === void 0 || setting.disableCustomColors) && (setting.disableCustomGradients === void 0 || setting.disableCustomGradients)
+  )) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    ToolsPanel,
+    {
+      className: clsx(
+        "block-editor-panel-color-gradient-settings",
+        className
+      ),
+      label: showTitle ? title : void 0,
+      resetAll: () => {
+        batch(() => {
+          settings.forEach(
+            ({
+              colorValue,
+              gradientValue,
+              onColorChange,
+              onGradientChange
+            }) => {
+              if (colorValue) {
+                onColorChange();
+              } else if (gradientValue) {
+                onGradientChange();
+              }
+            }
+          );
+        });
+      },
+      panelId,
+      __experimentalFirstVisibleItemClass: "first",
+      __experimentalLastVisibleItemClass: "last",
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorGradientSettingsDropdown,
+          {
+            settings,
+            panelId,
+            ...{
+              colors,
+              gradients,
+              disableCustomColors,
+              disableCustomGradients,
+              __experimentalIsRenderedInSidebar,
+              enableAlpha
+            }
+          }
+        ),
+        !!children && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spacer, { marginY: 4 }),
+          " ",
+          children
+        ] })
+      ]
+    }
+  );
+};
+var PanelColorGradientSettingsSelect = (props) => {
+  const colorGradientSettings = useColorsAndGradientsPalettes();
+  return /* @__PURE__ */ jsx(
+    PanelColorGradientSettingsInner,
+    {
+      ...{ ...colorGradientSettings, ...props }
+    }
+  );
+};
+var PanelColorGradientSettings = (props) => {
+  if (colorsAndGradientKeys.every((key) => props.hasOwnProperty(key))) {
+    return /* @__PURE__ */ jsx(PanelColorGradientSettingsInner, { ...props });
+  }
+  return /* @__PURE__ */ jsx(PanelColorGradientSettingsSelect, { ...props });
+};
+var panel_color_gradient_settings_default = PanelColorGradientSettings;
+export {
+  PanelColorGradientSettingsInner,
+  panel_color_gradient_settings_default as default
+};
+//# sourceMappingURL=panel-color-gradient-settings.mjs.map