@wordpress/block-library/build/comment-author-avatar/edit.js

Block library for the WordPress editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Edit;

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

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

var _blockEditor = require("@wordpress/block-editor");

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

var _coreData = require("@wordpress/core-data");

var _data = require("@wordpress/data");

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

/**
 * WordPress dependencies
 */
function Edit(_ref) {
  let {
    attributes,
    context: {
      commentId
    },
    setAttributes,
    isSelected
  } = _ref;
  const {
    height,
    width
  } = attributes;
  const [avatars] = (0, _coreData.useEntityProp)('root', 'comment', 'author_avatar_urls', commentId);
  const [authorName] = (0, _coreData.useEntityProp)('root', 'comment', 'author_name', commentId);
  const avatarUrls = avatars ? Object.values(avatars) : null;
  const sizes = avatars ? Object.keys(avatars) : null;
  const minSize = sizes ? sizes[0] : 24;
  const maxSize = sizes ? sizes[sizes.length - 1] : 96;
  const blockProps = (0, _blockEditor.useBlockProps)();
  const spacingProps = (0, _blockEditor.__experimentalGetSpacingClassesAndStyles)(attributes);
  const maxSizeBuffer = Math.floor(maxSize * 2.5);
  const {
    avatarURL
  } = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    const {
      __experimentalDiscussionSettings
    } = getSettings();
    return __experimentalDiscussionSettings;
  });
  const inspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Avatar Settings')
  }, (0, _element.createElement)(_components.RangeControl, {
    label: (0, _i18n.__)('Image size'),
    onChange: newWidth => setAttributes({
      width: newWidth,
      height: newWidth
    }),
    min: minSize,
    max: maxSizeBuffer,
    initialPosition: width,
    value: width
  })));
  const resizableAvatar = (0, _element.createElement)(_components.ResizableBox, {
    size: {
      width,
      height
    },
    showHandle: isSelected,
    onResizeStop: (event, direction, elt, delta) => {
      setAttributes({
        height: parseInt(height + delta.height, 10),
        width: parseInt(width + delta.width, 10)
      });
    },
    lockAspectRatio: true,
    enable: {
      top: false,
      right: !(0, _i18n.isRTL)(),
      bottom: true,
      left: (0, _i18n.isRTL)()
    },
    minWidth: minSize,
    maxWidth: maxSizeBuffer
  }, (0, _element.createElement)("img", (0, _extends2.default)({
    src: avatarUrls ? avatarUrls[avatarUrls.length - 1] : avatarURL,
    alt: `${authorName} ${(0, _i18n.__)('Avatar')}`
  }, blockProps)));
  return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)("div", spacingProps, resizableAvatar));
}
//# sourceMappingURL=edit.js.map