UNPKG

@wordpress/block-library

Version:
250 lines (246 loc) 8 kB
"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