@wordpress/block-editor/build-module/hooks/use-color-props.js

Generic block editor.

// packages/block-editor/src/hooks/use-color-props.js
import clsx from "clsx";
import { useMemo } from "@wordpress/element";
import { getInlineStyles } from "./style";
import {
  getColorClassName,
  getColorObjectByAttributeValues
} from "../components/colors";
import {
  __experimentalGetGradientClass,
  getGradientValueBySlug
} from "../components/gradients";
import { useSettings } from "../components/use-settings";
function getColorClassesAndStyles(attributes) {
  const { backgroundColor, textColor, gradient, style } = attributes;
  const backgroundClass = getColorClassName(
    "background-color",
    backgroundColor
  );
  const textClass = getColorClassName("color", textColor);
  const gradientClass = __experimentalGetGradientClass(gradient);
  const hasGradient = gradientClass || style?.color?.gradient;
  const className = clsx(textClass, gradientClass, {
    // Don't apply the background class if there's a gradient.
    [backgroundClass]: !hasGradient && !!backgroundClass,
    "has-text-color": textColor || style?.color?.text,
    "has-background": backgroundColor || style?.color?.background || gradient || style?.color?.gradient,
    "has-link-color": style?.elements?.link?.color
  });
  const colorStyles = style?.color || {};
  const styleProp = getInlineStyles({ color: colorStyles });
  return {
    className: className || void 0,
    style: styleProp
  };
}
function useColorProps(attributes) {
  const { backgroundColor, textColor, gradient } = attributes;
  const [
    userPalette,
    themePalette,
    defaultPalette,
    userGradients,
    themeGradients,
    defaultGradients
  ] = useSettings(
    "color.palette.custom",
    "color.palette.theme",
    "color.palette.default",
    "color.gradients.custom",
    "color.gradients.theme",
    "color.gradients.default"
  );
  const colors = useMemo(
    () => [
      ...userPalette || [],
      ...themePalette || [],
      ...defaultPalette || []
    ],
    [userPalette, themePalette, defaultPalette]
  );
  const gradients = useMemo(
    () => [
      ...userGradients || [],
      ...themeGradients || [],
      ...defaultGradients || []
    ],
    [userGradients, themeGradients, defaultGradients]
  );
  const colorProps = getColorClassesAndStyles(attributes);
  if (backgroundColor) {
    const backgroundColorObject = getColorObjectByAttributeValues(
      colors,
      backgroundColor
    );
    colorProps.style.backgroundColor = backgroundColorObject.color;
  }
  if (gradient) {
    colorProps.style.background = getGradientValueBySlug(
      gradients,
      gradient
    );
  }
  if (textColor) {
    const textColorObject = getColorObjectByAttributeValues(
      colors,
      textColor
    );
    colorProps.style.color = textColorObject.color;
  }
  return colorProps;
}
export {
  getColorClassesAndStyles,
  useColorProps
};
//# sourceMappingURL=use-color-props.js.map