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

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BorderPanel = BorderPanel;
exports.hasBorderSupport = hasBorderSupport;
exports.shouldSkipSerialization = shouldSkipSerialization;
exports.BORDER_SUPPORT_KEY = void 0;

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

var _blocks = require("@wordpress/blocks");

var _components = require("@wordpress/components");

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

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

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

var _borderColor = require("./border-color");

var _borderRadius = require("./border-radius");

var _borderStyle = require("./border-style");

var _borderWidth = require("./border-width");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const BORDER_SUPPORT_KEY = '__experimentalBorder';
exports.BORDER_SUPPORT_KEY = BORDER_SUPPORT_KEY;

function BorderPanel(props) {
  const isDisabled = useIsBorderDisabled(props);
  const isSupported = hasBorderSupport(props.name);
  const isColorSupported = (0, _useEditorFeature.default)('border.customColor') && hasBorderSupport(props.name, 'color');
  const isRadiusSupported = (0, _useEditorFeature.default)('border.customRadius') && hasBorderSupport(props.name, 'radius');
  const isStyleSupported = (0, _useEditorFeature.default)('border.customStyle') && hasBorderSupport(props.name, 'style');
  const isWidthSupported = (0, _useEditorFeature.default)('border.customWidth') && hasBorderSupport(props.name, 'width');

  if (isDisabled || !isSupported) {
    return null;
  }

  return (0, _element.createElement)(_inspectorControls.default, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Border settings'),
    initialOpen: false
  }, isStyleSupported && (0, _element.createElement)(_borderStyle.BorderStyleEdit, props), isWidthSupported && (0, _element.createElement)(_borderWidth.BorderWidthEdit, props), isRadiusSupported && (0, _element.createElement)(_borderRadius.BorderRadiusEdit, props), isColorSupported && (0, _element.createElement)(_borderColor.BorderColorEdit, props)));
}
/**
 * Determine whether there is block support for border properties.
 *
 * @param  {string} blockName Block name.
 * @param  {string} feature   Border feature to check support for.
 * @return {boolean}          Whether there is support.
 */


function hasBorderSupport(blockName, feature = 'any') {
  if (_element.Platform.OS !== 'web') {
    return false;
  }

  const support = (0, _blocks.getBlockSupport)(blockName, BORDER_SUPPORT_KEY);

  if (support === true) {
    return true;
  }

  if (feature === 'any') {
    return !!(support !== null && support !== void 0 && support.color || support !== null && support !== void 0 && support.radius || support !== null && support !== void 0 && support.width || support !== null && support !== void 0 && support.style);
  }

  return !!(support !== null && support !== void 0 && support[feature]);
}
/**
 * Check whether serialization of border classes and styles should be skipped.
 *
 * @param  {string|Object} blockType Block name or block type object.
 * @return {boolean}                 Whether serialization of border properties should occur.
 */


function shouldSkipSerialization(blockType) {
  const support = (0, _blocks.getBlockSupport)(blockType, BORDER_SUPPORT_KEY);
  return support === null || support === void 0 ? void 0 : support.__experimentalSkipSerialization;
}
/**
 * Determines if all border support features have been disabled.
 *
 * @return {boolean} If border support is completely disabled.
 */


const useIsBorderDisabled = () => {
  const configs = [!(0, _useEditorFeature.default)('border.customColor'), !(0, _useEditorFeature.default)('border.customRadius'), !(0, _useEditorFeature.default)('border.customStyle'), !(0, _useEditorFeature.default)('border.customWidth')];
  return configs.every(Boolean);
};
//# sourceMappingURL=border.js.map