@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
148 lines (140 loc) • 4.81 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";
/**
* External dependencies
*/
import { get, omit } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Button, Spinner, CheckboxControl, withFocusReturn, withConstrainedTabbing } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { closeSmall } from '@wordpress/icons';
/**
* Internal dependencies
*/
import PostPublishButton from '../post-publish-button';
import PostPublishPanelPrepublish from './prepublish';
import PostPublishPanelPostpublish from './postpublish';
export class PostPublishPanel extends Component {
constructor() {
super(...arguments);
this.onSubmit = this.onSubmit.bind(this);
}
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,
forceIsSaving,
isBeingScheduled,
isPublished,
isPublishSidebarEnabled,
isScheduled,
isSaving,
onClose,
onTogglePublishSidebar,
PostPublishExtension,
PrePublishExtension,
...additionalProps
} = this.props;
const propsForPanel = omit(additionalProps, ['hasPublishAction', 'isDirty', 'isPostTypeViewable']);
const isPublishedOrScheduled = isPublished || isScheduled && isBeingScheduled;
const isPrePublish = !isPublishedOrScheduled && !isSaving;
const isPostPublish = isPublishedOrScheduled && !isSaving;
return createElement("div", _extends({
className: "editor-post-publish-panel"
}, propsForPanel), createElement("div", {
className: "editor-post-publish-panel__header"
}, isPostPublish ? createElement(Button, {
onClick: onClose,
icon: closeSmall,
label: __('Close panel')
}) : createElement(Fragment, null, createElement("div", {
className: "editor-post-publish-panel__header-publish-button"
}, createElement(PostPublishButton, {
focusOnMount: true,
onSubmit: this.onSubmit,
forceIsDirty: forceIsDirty,
forceIsSaving: forceIsSaving
})), createElement("div", {
className: "editor-post-publish-panel__header-cancel-button"
}, createElement(Button, {
onClick: onClose,
isSecondary: true
}, __('Cancel'))))), createElement("div", {
className: "editor-post-publish-panel__content"
}, isPrePublish && createElement(PostPublishPanelPrepublish, null, PrePublishExtension && createElement(PrePublishExtension, null)), isPostPublish && createElement(PostPublishPanelPostpublish, {
focusOnMount: true
}, PostPublishExtension && createElement(PostPublishExtension, null)), isSaving && createElement(Spinner, null)), createElement("div", {
className: "editor-post-publish-panel__footer"
}, createElement(CheckboxControl, {
label: __('Always show pre-publish checks.'),
checked: isPublishSidebarEnabled,
onChange: onTogglePublishSidebar
})));
}
}
export default compose([withSelect(select => {
const {
getPostType
} = select('core');
const {
getCurrentPost,
getEditedPostAttribute,
isCurrentPostPublished,
isCurrentPostScheduled,
isEditedPostBeingScheduled,
isEditedPostDirty,
isSavingPost
} = select('core/editor');
const {
isPublishSidebarEnabled
} = select('core/editor');
const postType = getPostType(getEditedPostAttribute('type'));
return {
hasPublishAction: get(getCurrentPost(), ['_links', 'wp:action-publish'], false),
isPostTypeViewable: get(postType, ['viewable'], false),
isBeingScheduled: isEditedPostBeingScheduled(),
isDirty: isEditedPostDirty(),
isPublished: isCurrentPostPublished(),
isPublishSidebarEnabled: isPublishSidebarEnabled(),
isSaving: isSavingPost(),
isScheduled: isCurrentPostScheduled()
};
}), withDispatch((dispatch, {
isPublishSidebarEnabled
}) => {
const {
disablePublishSidebar,
enablePublishSidebar
} = dispatch('core/editor');
return {
onTogglePublishSidebar: () => {
if (isPublishSidebarEnabled) {
disablePublishSidebar();
} else {
enablePublishSidebar();
}
}
};
}), withFocusReturn, withConstrainedTabbing])(PostPublishPanel);
//# sourceMappingURL=index.js.map