@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
239 lines (236 loc) • 8.48 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.STATUS_OPTIONS = void 0;
exports.default = PostStatus;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _coreData = require("@wordpress/core-data");
var _blockEditor = require("@wordpress/block-editor");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _constants = require("../../store/constants");
var _postPanelRow = _interopRequireDefault(require("../post-panel-row"));
var _postSticky = _interopRequireDefault(require("../post-sticky"));
var _postSchedule = require("../post-schedule");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const postStatusesInfo = {
'auto-draft': {
label: (0, _i18n.__)('Draft'),
icon: _icons.drafts
},
draft: {
label: (0, _i18n.__)('Draft'),
icon: _icons.drafts
},
pending: {
label: (0, _i18n.__)('Pending'),
icon: _icons.pending
},
private: {
label: (0, _i18n.__)('Private'),
icon: _icons.notAllowed
},
future: {
label: (0, _i18n.__)('Scheduled'),
icon: _icons.scheduled
},
publish: {
label: (0, _i18n.__)('Published'),
icon: _icons.published
}
};
const STATUS_OPTIONS = exports.STATUS_OPTIONS = [{
label: (0, _i18n.__)('Draft'),
value: 'draft',
description: (0, _i18n.__)('Not ready to publish.')
}, {
label: (0, _i18n.__)('Pending'),
value: 'pending',
description: (0, _i18n.__)('Waiting for review before publishing.')
}, {
label: (0, _i18n.__)('Private'),
value: 'private',
description: (0, _i18n.__)('Only visible to site admins and editors.')
}, {
label: (0, _i18n.__)('Scheduled'),
value: 'future',
description: (0, _i18n.__)('Publish automatically on a chosen date.')
}, {
label: (0, _i18n.__)('Published'),
value: 'publish',
description: (0, _i18n.__)('Visible to everyone.')
}];
const DESIGN_POST_TYPES = [_constants.TEMPLATE_POST_TYPE, _constants.TEMPLATE_PART_POST_TYPE, _constants.PATTERN_POST_TYPE, _constants.NAVIGATION_POST_TYPE];
function PostStatus() {
const {
status,
date,
password,
postId,
postType,
canEdit
} = (0, _data.useSelect)(select => {
var _getCurrentPost$_link;
const {
getEditedPostAttribute,
getCurrentPostId,
getCurrentPostType,
getCurrentPost
} = select(_store.store);
return {
status: getEditedPostAttribute('status'),
date: getEditedPostAttribute('date'),
password: getEditedPostAttribute('password'),
postId: getCurrentPostId(),
postType: getCurrentPostType(),
canEdit: (_getCurrentPost$_link = getCurrentPost()._links?.['wp:action-publish']) !== null && _getCurrentPost$_link !== void 0 ? _getCurrentPost$_link : false
};
}, []);
const [showPassword, setShowPassword] = (0, _element.useState)(!!password);
const passwordInputId = (0, _compose.useInstanceId)(PostStatus, 'editor-change-status__password-input');
const {
editEntityRecord
} = (0, _data.useDispatch)(_coreData.store);
const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = (0, _element.useMemo)(() => ({
// Anchor the popover to the middle of the entire row so that it doesn't
// move around when the label changes.
anchor: popoverAnchor,
'aria-label': (0, _i18n.__)('Status & visibility'),
headerTitle: (0, _i18n.__)('Status & visibility'),
placement: 'left-start',
offset: 36,
shift: true
}), [popoverAnchor]);
if (DESIGN_POST_TYPES.includes(postType)) {
return null;
}
const updatePost = ({
status: newStatus = status,
password: newPassword = password,
date: newDate = date
}) => {
editEntityRecord('postType', postType, postId, {
status: newStatus,
date: newDate,
password: newPassword
});
};
const handleTogglePassword = value => {
setShowPassword(value);
if (!value) {
updatePost({
password: ''
});
}
};
const handleStatus = value => {
let newDate = date;
let newPassword = password;
if (status === 'future' && new Date(date) > new Date()) {
newDate = null;
}
if (value === 'private' && password) {
newPassword = '';
}
updatePost({
status: value,
date: newDate,
password: newPassword
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPanelRow.default, {
label: (0, _i18n.__)('Status'),
ref: setPopoverAnchor,
children: canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
className: "editor-post-status",
contentClassName: "editor-change-status__content",
popoverProps: popoverProps,
focusOnMount: true,
renderToggle: ({
onToggle,
isOpen
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
className: "editor-post-status__toggle",
variant: "tertiary",
size: "compact",
onClick: onToggle,
icon: postStatusesInfo[status]?.icon,
"aria-label": (0, _i18n.sprintf)(
// translators: %s: Current post status.
(0, _i18n.__)('Change status: %s'), postStatusesInfo[status]?.label),
"aria-expanded": isOpen,
children: postStatusesInfo[status]?.label
}),
renderContent: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
title: (0, _i18n.__)('Status & visibility'),
onClose: onClose
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RadioControl, {
className: "editor-change-status__options",
hideLabelFromVision: true,
label: (0, _i18n.__)('Status'),
options: STATUS_OPTIONS,
onChange: handleStatus,
selected: status === 'auto-draft' ? 'draft' : status
}), status === 'future' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-change-status__publish-date-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postSchedule.PrivatePostSchedule, {
showPopoverHeaderActions: false,
isCompact: true
})
}), status !== 'private' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
as: "fieldset",
spacing: 4,
className: "editor-change-status__password-fieldset",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Password protected'),
help: (0, _i18n.__)('Only visible to those who know the password'),
checked: showPassword,
onChange: handleTogglePassword
}), showPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-change-status__password-input",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
label: (0, _i18n.__)('Password'),
onChange: value => updatePost({
password: value
}),
value: password,
placeholder: (0, _i18n.__)('Use a secure password'),
type: "text",
id: passwordInputId,
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
maxLength: 255
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_postSticky.default, {})]
})
})]
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-post-status is-read-only",
children: postStatusesInfo[status]?.label
})
});
}
//# sourceMappingURL=index.js.map