@wordpress/block-library/build/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 _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _url = require("@wordpress/url");
var _hooks = require("../utils/hooks");
var _hooks2 = require("./hooks");
var _userControl = _interopRequireDefault(require("./user-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const AvatarInspectorControls = ({
  setAttributes,
  avatar,
  attributes,
  selectUser
}) => {
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
      label: (0, _i18n.__)('Settings'),
      resetAll: () => {
        setAttributes({
          size: 96,
          isLink: false,
          linkTarget: '_self',
          userId: undefined
        });
      },
      dropdownMenuProps: dropdownMenuProps,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('Image size'),
        isShownByDefault: true,
        hasValue: () => attributes?.size !== 96,
        onDeselect: () => setAttributes({
          size: 96
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: true,
          label: (0, _i18n.__)('Image size'),
          onChange: newSize => setAttributes({
            size: newSize
          }),
          min: avatar.minSize,
          max: avatar.maxSize,
          initialPosition: attributes?.size,
          value: attributes?.size
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('Link to user profile'),
        isShownByDefault: true,
        hasValue: () => attributes?.isLink,
        onDeselect: () => setAttributes({
          isLink: false
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Link to user profile'),
          onChange: () => setAttributes({
            isLink: !attributes.isLink
          }),
          checked: attributes.isLink
        })
      }), attributes.isLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('Open in new tab'),
        isShownByDefault: true,
        hasValue: () => attributes?.linkTarget !== '_self',
        onDeselect: () => setAttributes({
          linkTarget: '_self'
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Open in new tab'),
          onChange: value => setAttributes({
            linkTarget: value ? '_blank' : '_self'
          }),
          checked: attributes.linkTarget === '_blank'
        })
      }), selectUser && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('User'),
        isShownByDefault: true,
        hasValue: () => !!attributes?.userId,
        onDeselect: () => setAttributes({
          userId: undefined
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userControl.default, {
          value: attributes?.userId,
          onChange: value => {
            setAttributes({
              userId: value
            });
          }
        })
      })]
    })
  });
};
const ResizableAvatar = ({
  setAttributes,
  attributes,
  avatar,
  blockProps,
  isSelected
}) => {
  const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
  const doubledSizedSrc = (0, _url.addQueryArgs)((0, _url.removeQueryArgs)(avatar?.src, ['s']), {
    s: attributes?.size * 2
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ...blockProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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: !(0, _i18n.isRTL)(),
        bottom: true,
        left: (0, _i18n.isRTL)()
      },
      minWidth: avatar.minSize,
      maxWidth: avatar.maxSize,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        src: doubledSizedSrc,
        alt: avatar.alt,
        className: (0, _clsx.default)('avatar', 'avatar-' + attributes.size, 'photo', 'wp-block-avatar__image', borderProps.className),
        style: borderProps.style
      })
    })
  });
};
const CommentEdit = ({
  attributes,
  context,
  setAttributes,
  isSelected
}) => {
  const {
    commentId
  } = context;
  const blockProps = (0, _blockEditor.useBlockProps)();
  const avatar = (0, _hooks2.useCommentAvatar)({
    commentId
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarInspectorControls, {
      avatar: avatar,
      setAttributes: setAttributes,
      attributes: attributes,
      selectUser: false
    }), attributes.isLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
      href: "#avatar-pseudo-link",
      className: "wp-block-avatar__link",
      onClick: event => event.preventDefault(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableAvatar, {
        attributes: attributes,
        avatar: avatar,
        blockProps: blockProps,
        isSelected: isSelected,
        setAttributes: setAttributes
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableAvatar, {
      attributes: attributes,
      avatar: avatar,
      blockProps: blockProps,
      isSelected: isSelected,
      setAttributes: setAttributes
    })]
  });
};
const UserEdit = ({
  attributes,
  context,
  setAttributes,
  isSelected
}) => {
  const {
    postId,
    postType
  } = context;
  const avatar = (0, _hooks2.useUserAvatar)({
    userId: attributes?.userId,
    postId,
    postType
  });
  const blockProps = (0, _blockEditor.useBlockProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarInspectorControls, {
      selectUser: true,
      attributes: attributes,
      avatar: avatar,
      setAttributes: setAttributes
    }), attributes.isLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
      href: "#avatar-pseudo-link",
      className: "wp-block-avatar__link",
      onClick: event => event.preventDefault(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableAvatar, {
        attributes: attributes,
        avatar: avatar,
        blockProps: blockProps,
        isSelected: isSelected,
        setAttributes: setAttributes
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableAvatar, {
      attributes: attributes,
      avatar: avatar,
      blockProps: blockProps,
      isSelected: isSelected,
      setAttributes: setAttributes
    })]
  });
};
function Edit(props) {
  // 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?.context?.commentId || props?.context?.commentId === null) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentEdit, {
      ...props
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(UserEdit, {
    ...props
  });
}
//# sourceMappingURL=edit.js.map