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

Generic block editor.

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * Internal dependencies
 */

import { getInlineStyles } from './style';
import { getColorClassName, getColorObjectByAttributeValues } from '../components/colors';
import { __experimentalGetGradientClass, getGradientValueBySlug } from '../components/gradients';
import useEditorFeature from '../components/use-editor-feature'; // 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.

const EMPTY_ARRAY = [];
/**
 * 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.
 */

export function getColorClassesAndStyles(attributes) {
  var _style$color, _style$color2, _style$color3, _style$color4, _style$color5;

  const {
    backgroundColor,
    textColor,
    gradient,
    style
  } = attributes; // Collect color CSS classes.

  const backgroundClass = getColorClassName('background-color', backgroundColor);
  const textClass = getColorClassName('color', textColor);

  const gradientClass = __experimentalGetGradientClass(gradient);

  const hasGradient = gradientClass || (style === null || style === void 0 ? void 0 : (_style$color = style.color) === null || _style$color === void 0 ? void 0 : _style$color.gradient); // Determine color CSS class name list.

  const className = classnames(textClass, gradientClass, {
    // Don't apply the background class if there's a gradient.
    [backgroundClass]: !hasGradient && !!backgroundClass,
    'has-text-color': textColor || (style === null || style === void 0 ? void 0 : (_style$color2 = style.color) === null || _style$color2 === void 0 ? void 0 : _style$color2.text),
    'has-background': backgroundColor || (style === null || style === void 0 ? void 0 : (_style$color3 = style.color) === null || _style$color3 === void 0 ? void 0 : _style$color3.background) || gradient || (style === null || style === void 0 ? void 0 : (_style$color4 = style.color) === null || _style$color4 === void 0 ? void 0 : _style$color4.gradient),
    'has-link-color': style === null || style === void 0 ? void 0 : (_style$color5 = style.color) === null || _style$color5 === void 0 ? void 0 : _style$color5.link
  }); // Collect inline styles for colors.

  const colorStyles = (style === null || style === void 0 ? void 0 : style.color) || {};
  const styleProp = 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.
 */

export function useColorProps(attributes) {
  const {
    backgroundColor,
    textColor,
    gradient
  } = attributes;
  const colors = useEditorFeature('color.palette') || EMPTY_ARRAY;
  const gradients = useEditorFeature('color.gradients') || EMPTY_ARRAY;
  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 = 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;
}
//# sourceMappingURL=use-color-props.js.map