@wordpress/block-editor/build/hooks/border-color.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BorderColorEdit = BorderColorEdit;
exports.withBorderColorPaletteStyles = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _hooks = require("@wordpress/hooks");

var _i18n = require("@wordpress/i18n");

var _compose = require("@wordpress/compose");

var _control = _interopRequireDefault(require("../components/colors-gradients/control"));

var _colors = require("../components/colors");

var _useEditorFeature = _interopRequireDefault(require("../components/use-editor-feature"));

var _border = require("./border");

var _utils = require("./utils");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// Defining empty array here instead of inline avoids unnecessary re-renders of
// color control.
const EMPTY_ARRAY = [];
/**
 * Inspector control panel containing the border color related configuration.
 *
 * There is deliberate overlap between the colors and borders block supports
 * relating to border color. It can be argued the border color controls could
 * be included within either, or both, the colors and borders panels in the
 * inspector controls. If they share the same block attributes it should not
 * matter.
 *
 * @param  {Object} props Block properties.
 * @return {WPElement}    Border color edit element.
 */

function BorderColorEdit(props) {
  var _style$border;

  const {
    attributes: {
      borderColor,
      style
    },
    setAttributes
  } = props;
  const colors = (0, _useEditorFeature.default)('color.palette') || EMPTY_ARRAY;
  const disableCustomColors = !(0, _useEditorFeature.default)('color.custom');
  const disableCustomGradients = !(0, _useEditorFeature.default)('color.customGradient');

  const onChangeColor = value => {
    const colorObject = (0, _colors.getColorObjectByColorValue)(colors, value);
    const newStyle = { ...style,
      border: { ...(style === null || style === void 0 ? void 0 : style.border),
        color: colorObject !== null && colorObject !== void 0 && colorObject.slug ? undefined : value
      }
    }; // If empty slug, ensure undefined to remove attribute.

    const newNamedColor = colorObject !== null && colorObject !== void 0 && colorObject.slug ? colorObject.slug : undefined;
    setAttributes({
      style: (0, _utils.cleanEmptyObject)(newStyle),
      borderColor: newNamedColor
    });
  };

  return (0, _element.createElement)(_control.default, {
    label: (0, _i18n.__)('Border color'),
    value: borderColor || (style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.color),
    colors: colors,
    gradients: undefined,
    disableCustomColors: disableCustomColors,
    disableCustomGradients: disableCustomGradients,
    onColorChange: onChangeColor
  });
}
/**
 * Filters registered block settings, extending attributes to include
 * `borderColor` if needed.
 *
 * @param  {Object} settings Original block settings.
 * @return {Object}          Updated block settings.
 */


function addAttributes(settings) {
  if (!(0, _border.hasBorderSupport)(settings, 'color')) {
    return settings;
  } // Allow blocks to specify default value if needed.


  if (settings.attributes.borderColor) {
    return settings;
  } // Add new borderColor attribute to block settings.


  return { ...settings,
    attributes: { ...settings.attributes,
      borderColor: {
        type: 'string'
      }
    }
  };
}
/**
 * Override props assigned to save component to inject border color.
 *
 * @param  {Object} props      Additional props applied to save element.
 * @param  {Object} blockType  Block type definition.
 * @param  {Object} attributes Block's attributes
 * @return {Object}            Filtered props to apply to save element.
 */


function addSaveProps(props, blockType, attributes) {
  var _style$border2;

  if (!(0, _border.hasBorderSupport)(blockType, 'color') || (0, _border.shouldSkipSerialization)(blockType)) {
    return props;
  }

  const {
    borderColor,
    style
  } = attributes;
  const borderColorClass = (0, _colors.getColorClassName)('border-color', borderColor);
  const newClassName = (0, _classnames.default)(props.className, {
    'has-border-color': borderColor || (style === null || style === void 0 ? void 0 : (_style$border2 = style.border) === null || _style$border2 === void 0 ? void 0 : _style$border2.color),
    [borderColorClass]: !!borderColorClass
  }); // If we are clearing the last of the previous classes in `className`
  // set it to `undefined` to avoid rendering empty DOM attributes.

  props.className = newClassName ? newClassName : undefined;
  return props;
}
/**
 * Filters the registered block settings to apply border color styles and
 * classnames to the block edit wrapper.
 *
 * @param {Object} settings Original block settings.
 * @return {Object}         Filtered block settings.
 */


function addEditProps(settings) {
  if (!(0, _border.hasBorderSupport)(settings, 'color') || (0, _border.shouldSkipSerialization)(settings)) {
    return settings;
  }

  const existingGetEditWrapperProps = settings.getEditWrapperProps;

  settings.getEditWrapperProps = attributes => {
    let props = {};

    if (existingGetEditWrapperProps) {
      props = existingGetEditWrapperProps(attributes);
    }

    return addSaveProps(props, settings, attributes);
  };

  return settings;
}
/**
 * This adds inline styles for color palette colors.
 * Ideally, this is not needed and themes should load their palettes on the editor.
 *
 * @param  {Function} BlockListBlock Original component
 * @return {Function}                Wrapped component
 */


const withBorderColorPaletteStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
  var _getColorObjectByAttr, _props$wrapperProps;

  const {
    name,
    attributes
  } = props;
  const {
    borderColor
  } = attributes;
  const colors = (0, _useEditorFeature.default)('color.palette') || EMPTY_ARRAY;

  if (!(0, _border.hasBorderSupport)(name, 'color') || (0, _border.shouldSkipSerialization)(name)) {
    return (0, _element.createElement)(BlockListBlock, props);
  }

  const extraStyles = {
    borderColor: borderColor ? (_getColorObjectByAttr = (0, _colors.getColorObjectByAttributeValues)(colors, borderColor)) === null || _getColorObjectByAttr === void 0 ? void 0 : _getColorObjectByAttr.color : undefined
  };
  let wrapperProps = props.wrapperProps;
  wrapperProps = { ...props.wrapperProps,
    style: { ...extraStyles,
      ...((_props$wrapperProps = props.wrapperProps) === null || _props$wrapperProps === void 0 ? void 0 : _props$wrapperProps.style)
    }
  };
  return (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
    wrapperProps: wrapperProps
  }));
});
exports.withBorderColorPaletteStyles = withBorderColorPaletteStyles;
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addEditProps', addEditProps);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/border/with-border-color-palette-styles', withBorderColorPaletteStyles);
//# sourceMappingURL=border-color.js.map