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

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { InspectorControls, useBlockProps, __experimentalGetSpacingClassesAndStyles as useSpacingProps, store as blockEditorStore } from '@wordpress/block-editor';
import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { __, isRTL } from '@wordpress/i18n';
export default function Edit(_ref) {
  let {
    attributes,
    context: {
      commentId
    },
    setAttributes,
    isSelected
  } = _ref;
  const {
    height,
    width
  } = attributes;
  const [avatars] = useEntityProp('root', 'comment', 'author_avatar_urls', commentId);
  const [authorName] = 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 = useBlockProps();
  const spacingProps = useSpacingProps(attributes);
  const maxSizeBuffer = Math.floor(maxSize * 2.5);
  const {
    avatarURL
  } = useSelect(select => {
    const {
      getSettings
    } = select(blockEditorStore);
    const {
      __experimentalDiscussionSettings
    } = getSettings();
    return __experimentalDiscussionSettings;
  });
  const inspectorControls = createElement(InspectorControls, null, createElement(PanelBody, {
    title: __('Avatar Settings')
  }, createElement(RangeControl, {
    label: __('Image size'),
    onChange: newWidth => setAttributes({
      width: newWidth,
      height: newWidth
    }),
    min: minSize,
    max: maxSizeBuffer,
    initialPosition: width,
    value: width
  })));
  const resizableAvatar = createElement(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: !isRTL(),
      bottom: true,
      left: isRTL()
    },
    minWidth: minSize,
    maxWidth: maxSizeBuffer
  }, createElement("img", _extends({
    src: avatarUrls ? avatarUrls[avatarUrls.length - 1] : avatarURL,
    alt: `${authorName} ${__('Avatar')}`
  }, blockProps)));
  return createElement(Fragment, null, inspectorControls, createElement("div", spacingProps, resizableAvatar));
}
//# sourceMappingURL=edit.js.map