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

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.hasPaddingSupport = hasPaddingSupport;
exports.useIsPaddingDisabled = useIsPaddingDisabled;
exports.PaddingEdit = PaddingEdit;

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

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

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

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

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

var _spacing = require("./spacing");

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

var _unitControl = require("../components/unit-control");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const isWeb = _element.Platform.OS === 'web';
const CSS_UNITS = [{
  value: '%',
  label: isWeb ? '%' : (0, _i18n.__)('Percentage (%)'),
  default: ''
}, {
  value: 'px',
  label: isWeb ? 'px' : (0, _i18n.__)('Pixels (px)'),
  default: ''
}, {
  value: 'em',
  label: isWeb ? 'em' : (0, _i18n.__)('Relative to parent font size (em)'),
  default: ''
}, {
  value: 'rem',
  label: isWeb ? 'rem' : (0, _i18n.__)('Relative to root font size (rem)'),
  default: ''
}, {
  value: 'vw',
  label: isWeb ? 'vw' : (0, _i18n.__)('Viewport width (vw)'),
  default: ''
}];
/**
 * Determines if there is padding support.
 *
 * @param  {string|Object} blockType Block name or Block Type object.
 * @return {boolean}                 Whether there is support.
 */

function hasPaddingSupport(blockType) {
  const support = (0, _blocks.getBlockSupport)(blockType, _spacing.SPACING_SUPPORT_KEY);
  return !!(true === support || support !== null && support !== void 0 && support.padding);
}
/**
 * Custom hook that checks if padding settings have been disabled.
 *
 * @param  {string} name The name of the block.
 * @return {boolean}                 Whether padding setting is disabled.
 */


function useIsPaddingDisabled({
  name: blockName
} = {}) {
  const isDisabled = !(0, _useEditorFeature.default)('spacing.customPadding');
  return !hasPaddingSupport(blockName) || isDisabled;
}
/**
 * Inspector control panel containing the padding related configuration
 *
 * @param {Object} props
 *
 * @return {WPElement} Padding edit element.
 */


function PaddingEdit(props) {
  var _style$spacing;

  const {
    name: blockName,
    attributes: {
      style
    },
    setAttributes
  } = props;
  const units = (0, _unitControl.useCustomUnits)(CSS_UNITS);
  const sides = (0, _spacing.useCustomSides)(blockName, 'padding');

  if (!hasPaddingSupport(blockName)) {
    return null;
  }

  const onChange = next => {
    const newStyle = { ...style,
      spacing: { ...(style === null || style === void 0 ? void 0 : style.spacing),
        padding: next
      }
    };
    setAttributes({
      style: (0, _utils.cleanEmptyObject)(newStyle)
    });
  };

  const onChangeShowVisualizer = next => {
    const newStyle = { ...style,
      visualizers: {
        padding: next
      }
    };
    setAttributes({
      style: (0, _utils.cleanEmptyObject)(newStyle)
    });
  };

  return _element.Platform.select({
    web: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalBoxControl, {
      values: style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.padding,
      onChange: onChange,
      onChangeShowVisualizer: onChangeShowVisualizer,
      label: (0, _i18n.__)('Padding'),
      sides: sides,
      units: units
    })),
    native: null
  });
}
//# sourceMappingURL=padding.js.map