@wordpress/edit-post
Version:
Edit Post module for WordPress.
91 lines (86 loc) • 3.56 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import { get } from 'lodash';
/**
* WordPress dependencies
*/
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
import { PostPublishButton } from '@wordpress/editor';
import { withViewportMatch } from '@wordpress/viewport';
export function PostPublishButtonOrToggle(_ref) {
var forceIsDirty = _ref.forceIsDirty,
forceIsSaving = _ref.forceIsSaving,
hasPublishAction = _ref.hasPublishAction,
isBeingScheduled = _ref.isBeingScheduled,
isLessThanMediumViewport = _ref.isLessThanMediumViewport,
isPending = _ref.isPending,
isPublished = _ref.isPublished,
isPublishSidebarEnabled = _ref.isPublishSidebarEnabled,
isPublishSidebarOpened = _ref.isPublishSidebarOpened,
isScheduled = _ref.isScheduled,
togglePublishSidebar = _ref.togglePublishSidebar;
var IS_TOGGLE = 'toggle';
var IS_BUTTON = 'button';
var component;
/**
* Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
*
* 1) We want to show a BUTTON when the post status is at the _final stage_
* for a particular role (see https://codex.wordpress.org/Post_Status):
*
* - is published
* - is scheduled to be published
* - is pending and can't be published (but only for viewports >= medium).
* Originally, we considered showing a button for pending posts that couldn't be published
* (for example, for an author with the contributor role). Some languages can have
* long translations for "Submit for review", so given the lack of UI real estate available
* we decided to take into account the viewport in that case.
* See: https://github.com/WordPress/gutenberg/issues/10475
*
* 2) Then, in small viewports, we'll show a TOGGLE.
*
* 3) Finally, we'll use the publish sidebar status to decide:
*
* - if it is enabled, we show a TOGGLE
* - if it is disabled, we show a BUTTON
*/
if (isPublished || isScheduled && isBeingScheduled || isPending && !hasPublishAction && !isLessThanMediumViewport) {
component = IS_BUTTON;
} else if (isLessThanMediumViewport) {
component = IS_TOGGLE;
} else if (isPublishSidebarEnabled) {
component = IS_TOGGLE;
} else {
component = IS_BUTTON;
}
return createElement(PostPublishButton, {
forceIsDirty: forceIsDirty,
forceIsSaving: forceIsSaving,
isOpen: isPublishSidebarOpened,
isToggle: component === IS_TOGGLE,
onToggle: togglePublishSidebar
});
}
export default compose(withSelect(function (select) {
return {
hasPublishAction: get(select('core/editor').getCurrentPost(), ['_links', 'wp:action-publish'], false),
isBeingScheduled: select('core/editor').isEditedPostBeingScheduled(),
isPending: select('core/editor').isCurrentPostPending(),
isPublished: select('core/editor').isCurrentPostPublished(),
isPublishSidebarEnabled: select('core/editor').isPublishSidebarEnabled(),
isPublishSidebarOpened: select('core/edit-post').isPublishSidebarOpened(),
isScheduled: select('core/editor').isCurrentPostScheduled()
};
}), withDispatch(function (dispatch) {
var _dispatch = dispatch('core/edit-post'),
togglePublishSidebar = _dispatch.togglePublishSidebar;
return {
togglePublishSidebar: togglePublishSidebar
};
}), withViewportMatch({
isLessThanMediumViewport: '< medium'
}))(PostPublishButtonOrToggle);
//# sourceMappingURL=post-publish-button-or-toggle.js.map