@wordpress/block-library
Version:
Block library for the WordPress editor.
188 lines (183 loc) • 6.51 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 _i18n = require("@wordpress/i18n");
var _coreData = require("@wordpress/core-data");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
var _url = require("@wordpress/url");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Edit({
attributes: {
textAlign,
showPostTitle,
showCommentsCount,
level,
levelOptions
},
setAttributes,
context: {
postType,
postId
}
}) {
const TagName = 'h' + level;
const [commentsCount, setCommentsCount] = (0, _element.useState)();
const [rawTitle] = (0, _coreData.useEntityProp)('postType', postType, 'title', postId);
const isSiteEditor = typeof postId === 'undefined';
const blockProps = (0, _blockEditor.useBlockProps)({
className: (0, _clsx.default)({
[`has-text-align-${textAlign}`]: textAlign
})
});
const {
threadCommentsDepth,
threadComments,
commentsPerPage,
pageComments
} = (0, _data.useSelect)(select => {
const {
getSettings
} = select(_blockEditor.store);
return getSettings().__experimentalDiscussionSettings;
});
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
(0, _element.useEffect)(() => {
if (isSiteEditor) {
// Match the number of comments that will be shown in the comment-template/edit.js placeholder
const nestedCommentsNumber = threadComments ? Math.min(threadCommentsDepth, 3) - 1 : 0;
const topLevelCommentsNumber = pageComments ? commentsPerPage : 3;
const commentsNumber = parseInt(nestedCommentsNumber) + parseInt(topLevelCommentsNumber);
setCommentsCount(Math.min(commentsNumber, 3));
return;
}
const currentPostId = postId;
(0, _apiFetch.default)({
path: (0, _url.addQueryArgs)('/wp/v2/comments', {
post: postId,
_fields: 'id'
}),
method: 'HEAD',
parse: false
}).then(res => {
// Stale requests will have the `currentPostId` of an older closure.
if (currentPostId === postId) {
setCommentsCount(parseInt(res.headers.get('X-WP-Total')));
}
}).catch(() => {
setCommentsCount(0);
});
}, [postId]);
const blockControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
group: "block",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.AlignmentControl, {
value: textAlign,
onChange: newAlign => setAttributes({
textAlign: newAlign
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.HeadingLevelDropdown, {
value: level,
options: levelOptions,
onChange: newLevel => setAttributes({
level: newLevel
})
})]
});
const inspectorControls = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
showPostTitle: true,
showCommentsCount: true
});
},
dropdownMenuProps: dropdownMenuProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Show post title'),
isShownByDefault: true,
hasValue: () => !showPostTitle,
onDeselect: () => setAttributes({
showPostTitle: true
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show post title'),
checked: showPostTitle,
onChange: value => setAttributes({
showPostTitle: value
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Show comments count'),
isShownByDefault: true,
hasValue: () => !showCommentsCount,
onDeselect: () => setAttributes({
showCommentsCount: true
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show comments count'),
checked: showCommentsCount,
onChange: value => setAttributes({
showCommentsCount: value
})
})
})]
})
});
const postTitle = isSiteEditor ? (0, _i18n.__)('“Post Title”') : `"${rawTitle}"`;
let placeholder;
if (showCommentsCount && commentsCount !== undefined) {
if (showPostTitle) {
if (commentsCount === 1) {
/* translators: %s: Post title. */
placeholder = (0, _i18n.sprintf)((0, _i18n.__)('One response to %s'), postTitle);
} else {
placeholder = (0, _i18n.sprintf)(/* translators: 1: Number of comments, 2: Post title. */
(0, _i18n._n)('%1$s response to %2$s', '%1$s responses to %2$s', commentsCount), commentsCount, postTitle);
}
} else if (commentsCount === 1) {
placeholder = (0, _i18n.__)('One response');
} else {
placeholder = (0, _i18n.sprintf)(/* translators: %s: Number of comments. */
(0, _i18n._n)('%s response', '%s responses', commentsCount), commentsCount);
}
} else if (showPostTitle) {
if (commentsCount === 1) {
/* translators: %s: Post title. */
placeholder = (0, _i18n.sprintf)((0, _i18n.__)('Response to %s'), postTitle);
} else {
/* translators: %s: Post title. */
placeholder = (0, _i18n.sprintf)((0, _i18n.__)('Responses to %s'), postTitle);
}
} else if (commentsCount === 1) {
placeholder = (0, _i18n.__)('Response');
} else {
placeholder = (0, _i18n.__)('Responses');
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [blockControls, inspectorControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
...blockProps,
children: placeholder
})]
});
}
//# sourceMappingURL=edit.js.map