UNPKG

@wordpress/edit-post

Version:
110 lines (96 loc) 3.5 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.PostPublishButtonOrToggle = PostPublishButtonOrToggle; exports.default = void 0; var _element = require("@wordpress/element"); var _lodash = require("lodash"); var _compose = require("@wordpress/compose"); var _data = require("@wordpress/data"); var _editor = require("@wordpress/editor"); var _store = require("../../store"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ function PostPublishButtonOrToggle({ forceIsDirty, forceIsSaving, hasPublishAction, isBeingScheduled, isPending, isPublished, isPublishSidebarEnabled, isPublishSidebarOpened, isScheduled, togglePublishSidebar, setEntitiesSavedStatesCallback }) { 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/support/article/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 && !isSmallerThanMediumViewport) { component = IS_BUTTON; } else if (isSmallerThanMediumViewport) { component = IS_TOGGLE; } else if (isPublishSidebarEnabled) { component = IS_TOGGLE; } else { component = IS_BUTTON; } return (0, _element.createElement)(_editor.PostPublishButton, { forceIsDirty: forceIsDirty, forceIsSaving: forceIsSaving, isOpen: isPublishSidebarOpened, isToggle: component === IS_TOGGLE, onToggle: togglePublishSidebar, setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback }); } var _default = (0, _compose.compose)((0, _data.withSelect)(select => ({ hasPublishAction: (0, _lodash.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(_store.store).isPublishSidebarOpened(), isScheduled: select('core/editor').isCurrentPostScheduled() })), (0, _data.withDispatch)(dispatch => { const { togglePublishSidebar } = dispatch(_store.store); return { togglePublishSidebar }; }))(PostPublishButtonOrToggle); exports.default = _default; //# sourceMappingURL=post-publish-button-or-toggle.js.map