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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getBorderClassesAndStyles = getBorderClassesAndStyles;
exports.useBorderProps = useBorderProps;
var _style = require("./style");
var _border = require("./border");
var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("../components/colors-gradients/use-multiple-origin-colors-and-gradients"));
/**
 * Internal dependencies
 */

// This utility is intended to assist where the serialization of the border
// block support is being skipped for a block but the border 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 border support
 * attributes.
 *
 * @param {Object} attributes Block attributes.
 * @return {Object} Border block support derived CSS classes & styles.
 */
function getBorderClassesAndStyles(attributes) {
  const border = attributes.style?.border || {};
  const className = (0, _border.getBorderClasses)(attributes);
  return {
    className: className || undefined,
    style: (0, _style.getInlineStyles)({
      border
    })
  };
}

/**
 * Derives the border related props for a block from its border 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 border block support.
 */
function useBorderProps(attributes) {
  const {
    colors
  } = (0, _useMultipleOriginColorsAndGradients.default)();
  const borderProps = getBorderClassesAndStyles(attributes);
  const {
    borderColor
  } = attributes;

  // Force inline styles to apply named border colors when themes do not load
  // their color stylesheets in the editor.
  if (borderColor) {
    const borderColorObject = (0, _border.getMultiOriginColor)({
      colors,
      namedColor: borderColor
    });
    borderProps.style.borderColor = borderColorObject.color;
  }
  return borderProps;
}
//# sourceMappingURL=use-border-props.js.map