@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
189 lines (185 loc) • 6.77 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.PostPublishPanel = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _postPublishButton = _interopRequireDefault(require("../post-publish-button"));
var _prepublish = _interopRequireDefault(require("./prepublish"));
var _postpublish = _interopRequireDefault(require("./postpublish"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
class PostPublishPanel extends _element.Component {
constructor() {
super(...arguments);
this.onSubmit = this.onSubmit.bind(this);
this.cancelButtonNode = (0, _element.createRef)();
}
componentDidMount() {
// This timeout is necessary to make sure the `useEffect` hook of
// `useFocusReturn` gets the correct element (the button that opens the
// PostPublishPanel) otherwise it will get this button.
this.timeoutID = setTimeout(() => {
this.cancelButtonNode.current.focus();
}, 0);
}
componentWillUnmount() {
clearTimeout(this.timeoutID);
}
componentDidUpdate(prevProps) {
// Automatically collapse the publish sidebar when a post
// is published and the user makes an edit.
if (prevProps.isPublished && !this.props.isSaving && this.props.isDirty) {
this.props.onClose();
}
}
onSubmit() {
const {
onClose,
hasPublishAction,
isPostTypeViewable
} = this.props;
if (!hasPublishAction || !isPostTypeViewable) {
onClose();
}
}
render() {
const {
forceIsDirty,
isBeingScheduled,
isPublished,
isPublishSidebarEnabled,
isScheduled,
isSaving,
isSavingNonPostEntityChanges,
onClose,
onTogglePublishSidebar,
PostPublishExtension,
PrePublishExtension,
...additionalProps
} = this.props;
const {
hasPublishAction,
isDirty,
isPostTypeViewable,
...propsForPanel
} = additionalProps;
const isPublishedOrScheduled = isPublished || isScheduled && isBeingScheduled;
const isPrePublish = !isPublishedOrScheduled && !isSaving;
const isPostPublish = isPublishedOrScheduled && !isSaving;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "editor-post-publish-panel",
...propsForPanel,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-post-publish-panel__header",
children: isPostPublish ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
size: "compact",
onClick: onClose,
icon: _icons.closeSmall,
label: (0, _i18n.__)('Close panel')
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-post-publish-panel__header-cancel-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
ref: this.cancelButtonNode,
accessibleWhenDisabled: true,
disabled: isSavingNonPostEntityChanges,
onClick: onClose,
variant: "secondary",
size: "compact",
children: (0, _i18n.__)('Cancel')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-post-publish-panel__header-publish-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPublishButton.default, {
onSubmit: this.onSubmit,
forceIsDirty: forceIsDirty
})
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "editor-post-publish-panel__content",
children: [isPrePublish && /*#__PURE__*/(0, _jsxRuntime.jsx)(_prepublish.default, {
children: PrePublishExtension && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrePublishExtension, {})
}), isPostPublish && /*#__PURE__*/(0, _jsxRuntime.jsx)(_postpublish.default, {
focusOnMount: true,
children: PostPublishExtension && /*#__PURE__*/(0, _jsxRuntime.jsx)(PostPublishExtension, {})
}), isSaving && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "editor-post-publish-panel__footer",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Always show pre-publish checks.'),
checked: isPublishSidebarEnabled,
onChange: onTogglePublishSidebar
})
})]
});
}
}
/**
* Renders a panel for publishing a post.
*/
exports.PostPublishPanel = PostPublishPanel;
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)(select => {
var _getCurrentPost$_link;
const {
getPostType
} = select(_coreData.store);
const {
getCurrentPost,
getEditedPostAttribute,
isCurrentPostPublished,
isCurrentPostScheduled,
isEditedPostBeingScheduled,
isEditedPostDirty,
isAutosavingPost,
isSavingPost,
isSavingNonPostEntityChanges
} = select(_store.store);
const {
isPublishSidebarEnabled
} = select(_store.store);
const postType = getPostType(getEditedPostAttribute('type'));
return {
hasPublishAction: (_getCurrentPost$_link = getCurrentPost()._links?.['wp:action-publish']) !== null && _getCurrentPost$_link !== void 0 ? _getCurrentPost$_link : false,
isPostTypeViewable: postType?.viewable,
isBeingScheduled: isEditedPostBeingScheduled(),
isDirty: isEditedPostDirty(),
isPublished: isCurrentPostPublished(),
isPublishSidebarEnabled: isPublishSidebarEnabled(),
isSaving: isSavingPost() && !isAutosavingPost(),
isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
isScheduled: isCurrentPostScheduled()
};
}), (0, _data.withDispatch)((dispatch, {
isPublishSidebarEnabled
}) => {
const {
disablePublishSidebar,
enablePublishSidebar
} = dispatch(_store.store);
return {
onTogglePublishSidebar: () => {
if (isPublishSidebarEnabled) {
disablePublishSidebar();
} else {
enablePublishSidebar();
}
}
};
}), _components.withFocusReturn, _components.withConstrainedTabbing])(PostPublishPanel);
//# sourceMappingURL=index.js.map