Gutenberg: show correct button when editing a post

client/gutenberg/editor/edit-post/components/header/index.js

@@ -1,3 +1,5 @@
+/** @format */
+
 /**
  * External dependencies
  */
@@ -8,31 +10,28 @@ import React from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
-import {
-	PostPreviewButton,
-	PostSavedState,
-	PostPublishPanelToggle,
-} from '@wordpress/editor';
+import { PostPreviewButton, PostSavedState } from '@wordpress/editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { DotTip } from '@wordpress/nux';
 
 /**
  * Internal dependencies
  */
 import MoreMenu from './more-menu';
 import HeaderToolbar from './header-toolbar';
 import PinnedPlugins from './pinned-plugins';
+import shortcuts from '../../keyboard-shortcuts';
+import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 
 function Header( {
-	isEditorSidebarOpened,
-	openGeneralSidebar,
 	closeGeneralSidebar,
+	isEditorSidebarOpened,
 	isPublishSidebarOpened,
-	togglePublishSidebar,
+	openGeneralSidebar,
 } ) {
 	const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar;
 
-	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<div
 			role="region"
@@ -44,43 +43,45 @@ function Header( {
 			<HeaderToolbar />
 			{ ! isPublishSidebarOpened && (
 				<div className="edit-post-header__settings">
-					<PostSavedState	/>
+					<PostSavedState />
 					<PostPreviewButton />
-					<PostPublishPanelToggle
-						isOpen={ isPublishSidebarOpened }
-						onToggle={ togglePublishSidebar }
-					/>
-					<IconButton
-						icon="admin-generic"
-						label={ __( 'Settings' ) }
-						onClick={ toggleGeneralSidebar }
-						isToggled={ isEditorSidebarOpened }
-						aria-expanded={ isEditorSidebarOpened }
-					>
-					</IconButton>
+					<PostPublishButtonOrToggle />
+					<div>
+						<IconButton
+							icon="admin-generic"
+							label={ __( 'Settings' ) }
+							onClick={ toggleGeneralSidebar }
+							isToggled={ isEditorSidebarOpened }
+							aria-expanded={ isEditorSidebarOpened }
+							shortcut={ shortcuts.toggleSidebar }
+						/>
+						<DotTip tipId="core/editor.settings">
+							{ __(
+								'You’ll find more settings for your page and blocks in the sidebar. Click “Settings” to open it.'
+							) }
+						</DotTip>
+					</div>
 					<PinnedPlugins.Slot />
 					<MoreMenu />
 				</div>
 			) }
 		</div>
 	);
-	/* eslint-enable wpcalypso/jsx-classname-namespace */
 }
 
 export default compose(
-	withSelect( ( select ) => ( {
+	withSelect( select => ( {
+		hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(),
 		isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
 		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
-		hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(),
 	} ) ),
 	withDispatch( ( dispatch, { hasBlockSelection } ) => {
-		const { openGeneralSidebar, closeGeneralSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );
+		const { openGeneralSidebar, closeGeneralSidebar } = dispatch( 'core/edit-post' );
 		const sidebarToOpen = hasBlockSelection ? 'edit-post/block' : 'edit-post/document';
 		return {
 			openGeneralSidebar: () => openGeneralSidebar( sidebarToOpen ),
 			closeGeneralSidebar: closeGeneralSidebar,
-			togglePublishSidebar: togglePublishSidebar,
 			hasBlockSelection: undefined,
 		};
-	} ),
+	} )
 )( Header );

client/gutenberg/editor/edit-post/components/header/post-publish-button-or-toggle.js

@@ -0,0 +1,96 @@
+/** @format */
+/**
+ * External Dependencies
+ */
+import React from 'react';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies.
+ */
+import { PostPublishPanelToggle, PostPublishButton } from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { withViewportMatch } from '@wordpress/viewport';
+
+export function PostPublishButtonOrToggle( {
+	forceIsDirty,
+	forceIsSaving,
+	hasPublishAction,
+	isBeingScheduled,
+	isLessThanMediumViewport,
+	isPending,
+	isPublished,
+	isPublishSidebarEnabled,
+	isPublishSidebarOpened,
+	isScheduled,
+	togglePublishSidebar,
+} ) {
+	const button = (
+		<PostPublishButton forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+	);
+	const toggle = (
+		<PostPublishPanelToggle
+			isOpen={ isPublishSidebarOpened }
+			onToggle={ togglePublishSidebar }
+			forceIsSaving={ forceIsSaving }
+		/>
+	);
+
+	/**
+	 * 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 ex, for a contributor role).
+	 * Some languages can have really long translations for "Submit for review",
+	 * so given the lack of UI real state we decided to take into account the viewport
+	 * in that particular case.
+	 */
+	if (
+		isPublished ||
+		( isScheduled && isBeingScheduled ) ||
+		( isPending && ! hasPublishAction && ! isLessThanMediumViewport )
+	) {
+		return button;
+	}
+
+	/**
+	 * Then, we take other things into account:
+	 *
+	 * - Show TOGGLE if it is small viewport.
+	 * - Otherwise, use publish sidebar status to decide - TOGGLE if enabled, BUTTON if not.
+	 */
+	if ( isLessThanMediumViewport ) {
+		return toggle;
+	}
+
+	return isPublishSidebarEnabled ? toggle : button;
+}
+
+export default compose(
+	withSelect( select => ( {
+		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( dispatch => {
+		const { togglePublishSidebar } = dispatch( 'core/edit-post' );
+		return {
+			togglePublishSidebar,
+		};
+	} ),
+	withViewportMatch( { isLessThanMediumViewport: '< medium' } )
+)( PostPublishButtonOrToggle );