UNPKG

@wordpress/editor

Version:
91 lines (89 loc) 3.6 kB
/** * WordPress dependencies */ import { useViewportMatch, compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; /** * Internal dependencies */ import PostPublishButton from './index'; import { store as editorStore } from '../../store'; import { jsx as _jsx } from "react/jsx-runtime"; export function PostPublishButtonOrToggle({ forceIsDirty, hasPublishAction, isBeingScheduled, isPending, isPublished, isPublishSidebarEnabled, isPublishSidebarOpened, isScheduled, togglePublishSidebar, setEntitiesSavedStatesCallback, postStatusHasChanged, postStatus }) { const IS_TOGGLE = 'toggle'; const IS_BUTTON = 'button'; const isSmallerThanMediumViewport = 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__*/_jsx(PostPublishButton, { forceIsDirty: forceIsDirty, isOpen: isPublishSidebarOpened, isToggle: component === IS_TOGGLE, onToggle: togglePublishSidebar, setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback }); } export default compose(withSelect(select => { var _select$getCurrentPos; return { hasPublishAction: (_select$getCurrentPos = select(editorStore).getCurrentPost()?._links?.['wp:action-publish']) !== null && _select$getCurrentPos !== void 0 ? _select$getCurrentPos : false, isBeingScheduled: select(editorStore).isEditedPostBeingScheduled(), isPending: select(editorStore).isCurrentPostPending(), isPublished: select(editorStore).isCurrentPostPublished(), isPublishSidebarEnabled: select(editorStore).isPublishSidebarEnabled(), isPublishSidebarOpened: select(editorStore).isPublishSidebarOpened(), isScheduled: select(editorStore).isCurrentPostScheduled(), postStatus: select(editorStore).getEditedPostAttribute('status'), postStatusHasChanged: select(editorStore).getPostEdits()?.status }; }), withDispatch(dispatch => { const { togglePublishSidebar } = dispatch(editorStore); return { togglePublishSidebar }; }))(PostPublishButtonOrToggle); //# sourceMappingURL=post-publish-button-or-toggle.js.map