@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
100 lines (96 loc) • 3.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PostPublishButtonOrToggle = PostPublishButtonOrToggle;
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _index = _interopRequireDefault(require("./index"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PostPublishButtonOrToggle({
forceIsDirty,
hasPublishAction,
isBeingScheduled,
isPending,
isPublished,
isPublishSidebarEnabled,
isPublishSidebarOpened,
isScheduled,
togglePublishSidebar,
setEntitiesSavedStatesCallback,
postStatusHasChanged,
postStatus
}) {
const IS_TOGGLE = 'toggle';
const IS_BUTTON = 'button';
const isSmallerThanMediumViewport = (0, _compose.useViewportMatch)('medium', '<');
let 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://wordpress.org/documentation/article/post-status/):
*
* - is published
* - post status has changed explicitely to something different than 'future' or 'publish'
* - 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 || postStatusHasChanged && !['future', 'publish'].includes(postStatus) || isScheduled && isBeingScheduled || isPending && !hasPublishAction && !isSmallerThanMediumViewport) {
component = IS_BUTTON;
} else if (isSmallerThanMediumViewport || isPublishSidebarEnabled) {
component = IS_TOGGLE;
} else {
component = IS_BUTTON;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
forceIsDirty: forceIsDirty,
isOpen: isPublishSidebarOpened,
isToggle: component === IS_TOGGLE,
onToggle: togglePublishSidebar,
setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
});
}
var _default = exports.default = (0, _compose.compose)((0, _data.withSelect)(select => {
var _select$getCurrentPos;
return {
hasPublishAction: (_select$getCurrentPos = select(_store.store).getCurrentPost()?._links?.['wp:action-publish']) !== null && _select$getCurrentPos !== void 0 ? _select$getCurrentPos : false,
isBeingScheduled: select(_store.store).isEditedPostBeingScheduled(),
isPending: select(_store.store).isCurrentPostPending(),
isPublished: select(_store.store).isCurrentPostPublished(),
isPublishSidebarEnabled: select(_store.store).isPublishSidebarEnabled(),
isPublishSidebarOpened: select(_store.store).isPublishSidebarOpened(),
isScheduled: select(_store.store).isCurrentPostScheduled(),
postStatus: select(_store.store).getEditedPostAttribute('status'),
postStatusHasChanged: select(_store.store).getPostEdits()?.status
};
}), (0, _data.withDispatch)(dispatch => {
const {
togglePublishSidebar
} = dispatch(_store.store);
return {
togglePublishSidebar
};
}))(PostPublishButtonOrToggle);
//# sourceMappingURL=post-publish-button-or-toggle.js.map