@wordpress/block-library
Version:
Block library for the WordPress editor.
250 lines (246 loc) • 8 kB
JavaScript
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
;