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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Edit;
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");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function Edit({
  attributes,
  context: {
    commentId
  },
  setAttributes,
  isSelected
}) {
  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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
      title: (0, _i18n.__)('Settings'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
        __nextHasNoMarginBottom: true,
        __next40pxDefaultSize: true,
        label: (0, _i18n.__)('Image size'),
        onChange: newWidth => setAttributes({
          width: newWidth,
          height: newWidth
        }),
        min: minSize,
        max: maxSizeBuffer,
        initialPosition: width,
        value: width
      })
    })
  });
  const resizableAvatar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_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,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      src: avatarUrls ? avatarUrls[avatarUrls.length - 1] : avatarURL,
      alt: `${authorName} ${(0, _i18n.__)('Avatar')}`,
      ...blockProps
    })
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [inspectorControls, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...spacingProps,
      children: resizableAvatar
    })]
  });
}
//# sourceMappingURL=edit.js.map