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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getColorClassesAndStyles = getColorClassesAndStyles;
exports.useColorProps = useColorProps;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _style = require("./style");
var _colors = require("../components/colors");
var _gradients = require("../components/gradients");
var _useSettings = require("../components/use-settings");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// The code in this file has largely been lifted from the color block support
// hook.
//
// This utility is intended to assist where the serialization of the colors
// block support is being skipped for a block but the color related CSS classes
// & styles still need to be generated so they can be applied to inner elements.

/**
 * Provides the CSS class names and inline styles for a block's color support
 * attributes.
 *
 * @param {Object} attributes Block attributes.
 *
 * @return {Object} Color block support derived CSS classes & styles.
 */
function getColorClassesAndStyles(attributes) {
  const {
    backgroundColor,
    textColor,
    gradient,
    style
  } = attributes;

  // Collect color CSS classes.
  const backgroundClass = (0, _colors.getColorClassName)('background-color', backgroundColor);
  const textClass = (0, _colors.getColorClassName)('color', textColor);
  const gradientClass = (0, _gradients.__experimentalGetGradientClass)(gradient);
  const hasGradient = gradientClass || style?.color?.gradient;

  // Determine color CSS class name list.
  const className = (0, _clsx.default)(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
  });

  // Collect inline styles for colors.
  const colorStyles = style?.color || {};
  const styleProp = (0, _style.getInlineStyles)({
    color: colorStyles
  });
  return {
    className: className || undefined,
    style: styleProp
  };
}

/**
 * Determines the color related props for a block derived from its color block
 * support attributes.
 *
 * Inline styles are forced for named colors to ensure these selections are
 * reflected when themes do not load their color stylesheets in the editor.
 *
 * @param {Object} attributes Block attributes.
 *
 * @return {Object} ClassName & style props from colors block support.
 */
function useColorProps(attributes) {
  const {
    backgroundColor,
    textColor,
    gradient
  } = attributes;
  const [userPalette, themePalette, defaultPalette, userGradients, themeGradients, defaultGradients] = (0, _useSettings.useSettings)('color.palette.custom', 'color.palette.theme', 'color.palette.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default');
  const colors = (0, _element.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
  const gradients = (0, _element.useMemo)(() => [...(userGradients || []), ...(themeGradients || []), ...(defaultGradients || [])], [userGradients, themeGradients, defaultGradients]);
  const colorProps = getColorClassesAndStyles(attributes);

  // Force inline styles to apply colors when themes do not load their color
  // stylesheets in the editor.
  if (backgroundColor) {
    const backgroundColorObject = (0, _colors.getColorObjectByAttributeValues)(colors, backgroundColor);
    colorProps.style.backgroundColor = backgroundColorObject.color;
  }
  if (gradient) {
    colorProps.style.background = (0, _gradients.getGradientValueBySlug)(gradients, gradient);
  }
  if (textColor) {
    const textColorObject = (0, _colors.getColorObjectByAttributeValues)(colors, textColor);
    colorProps.style.color = textColorObject.color;
  }
  return colorProps;
}
//# sourceMappingURL=use-color-props.js.map