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

Block library for the WordPress editor.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { InspectorControls, useBlockProps, __experimentalUseBorderProps as useBorderProps } from '@wordpress/block-editor';
import { PanelBody, RangeControl, ResizableBox, ToggleControl } from '@wordpress/components';
import { __, isRTL } from '@wordpress/i18n';
import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
/**
 * Internal dependencies
 */

import { useUserAvatar, useCommentAvatar } from './hooks';
import UserControl from './user-control';

const AvatarInspectorControls = _ref => {
  let {
    setAttributes,
    avatar,
    attributes,
    selectUser
  } = _ref;
  return createElement(InspectorControls, null, createElement(PanelBody, {
    title: __('Settings')
  }, createElement(RangeControl, {
    label: __('Image size'),
    onChange: newSize => setAttributes({
      size: newSize
    }),
    min: avatar.minSize,
    max: avatar.maxSize,
    initialPosition: attributes === null || attributes === void 0 ? void 0 : attributes.size,
    value: attributes === null || attributes === void 0 ? void 0 : attributes.size
  }), createElement(ToggleControl, {
    label: __('Link to user profile'),
    onChange: () => setAttributes({
      isLink: !attributes.isLink
    }),
    checked: attributes.isLink
  }), attributes.isLink && createElement(ToggleControl, {
    label: __('Open in new tab'),
    onChange: value => setAttributes({
      linkTarget: value ? '_blank' : '_self'
    }),
    checked: attributes.linkTarget === '_blank'
  }), selectUser && createElement(UserControl, {
    value: attributes === null || attributes === void 0 ? void 0 : attributes.userId,
    onChange: value => {
      setAttributes({
        userId: value
      });
    }
  })));
};

const ResizableAvatar = _ref2 => {
  let {
    setAttributes,
    attributes,
    avatar,
    blockProps,
    isSelected
  } = _ref2;
  const borderProps = useBorderProps(attributes);
  const doubledSizedSrc = addQueryArgs(removeQueryArgs(avatar === null || avatar === void 0 ? void 0 : avatar.src, ['s']), {
    s: (attributes === null || attributes === void 0 ? void 0 : attributes.size) * 2
  });
  return createElement("div", blockProps, createElement(ResizableBox, {
    size: {
      width: attributes.size,
      height: attributes.size
    },
    showHandle: isSelected,
    onResizeStop: (event, direction, elt, delta) => {
      setAttributes({
        size: parseInt(attributes.size + (delta.height || delta.width), 10)
      });
    },
    lockAspectRatio: true,
    enable: {
      top: false,
      right: !isRTL(),
      bottom: true,
      left: isRTL()
    },
    minWidth: avatar.minSize,
    maxWidth: avatar.maxSize
  }, createElement("img", _extends({
    src: doubledSizedSrc,
    alt: avatar.alt
  }, borderProps, {
    className: classnames('avatar', 'avatar-' + attributes.size, 'photo', 'wp-block-avatar__image', borderProps.className),
    style: { ...borderProps.style // Border radius, width and style.

    }
  }))));
};

const CommentEdit = _ref3 => {
  let {
    attributes,
    context,
    setAttributes,
    isSelected
  } = _ref3;
  const {
    commentId
  } = context;
  const blockProps = useBlockProps();
  const avatar = useCommentAvatar({
    commentId
  });
  return createElement(Fragment, null, createElement(AvatarInspectorControls, {
    avatar: avatar,
    setAttributes: setAttributes,
    attributes: attributes,
    selectUser: false
  }), attributes.isLink ? createElement("a", {
    href: "#avatar-pseudo-link",
    className: "wp-block-avatar__link",
    onClick: event => event.preventDefault()
  }, createElement(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })) : createElement(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  }));
};

const UserEdit = _ref4 => {
  let {
    attributes,
    context,
    setAttributes,
    isSelected
  } = _ref4;
  const {
    postId,
    postType
  } = context;
  const avatar = useUserAvatar({
    userId: attributes === null || attributes === void 0 ? void 0 : attributes.userId,
    postId,
    postType
  });
  const blockProps = useBlockProps();
  return createElement(Fragment, null, createElement(AvatarInspectorControls, {
    selectUser: true,
    attributes: attributes,
    avatar: avatar,
    setAttributes: setAttributes
  }), createElement("div", null, attributes.isLink ? createElement("a", {
    href: "#avatar-pseudo-link",
    className: "wp-block-avatar__link",
    onClick: event => event.preventDefault()
  }, createElement(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })) : createElement(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })));
};

export default function Edit(props) {
  var _props$context, _props$context2;

  // Don't show the Comment Edit controls if we have a comment ID set, or if we're in the Site Editor (where it is `null`).
  if (props !== null && props !== void 0 && (_props$context = props.context) !== null && _props$context !== void 0 && _props$context.commentId || (props === null || props === void 0 ? void 0 : (_props$context2 = props.context) === null || _props$context2 === void 0 ? void 0 : _props$context2.commentId) === null) {
    return createElement(CommentEdit, props);
  }

  return createElement(UserEdit, props);
}
//# sourceMappingURL=edit.js.map