Include viewport size in logic to show publish toggle or button (Word…

…Press#10941)

packages/edit-post/src/components/header/index.js

@@ -6,8 +6,6 @@ import { IconButton } from '@wordpress/components';
 import {
 	PostPreviewButton,
 	PostSavedState,
-	PostPublishPanelToggle,
-	PostPublishButton,
 } from '@wordpress/editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -20,16 +18,15 @@ 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,
-	isPublishSidebarOpened,
-	isPublishSidebarEnabled,
-	togglePublishSidebar,
 	hasActiveMetaboxes,
+	isEditorSidebarOpened,
+	isPublishSidebarOpened,
 	isSaving,
+	openGeneralSidebar,
 } ) {
 	const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar;
 
@@ -49,19 +46,10 @@ function Header( {
 						forceIsSaving={ isSaving }
 					/>
 					<PostPreviewButton />
-					{ isPublishSidebarEnabled ? (
-						<PostPublishPanelToggle
-							isOpen={ isPublishSidebarOpened }
-							onToggle={ togglePublishSidebar }
-							forceIsDirty={ hasActiveMetaboxes }
-							forceIsSaving={ isSaving }
-						/>
-					) : (
-						<PostPublishButton
-							forceIsDirty={ hasActiveMetaboxes }
-							forceIsSaving={ isSaving }
-						/>
-					) }
+					<PostPublishButtonOrToggle
+						forceIsDirty={ hasActiveMetaboxes }
+						forceIsSaving={ isSaving }
+					/>
 					<div>
 						<IconButton
 							icon="admin-generic"
@@ -85,20 +73,18 @@ function Header( {
 
 export default compose(
 	withSelect( ( select ) => ( {
+		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
+		hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(),
 		isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
 		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
-		isPublishSidebarEnabled: select( 'core/editor' ).isPublishSidebarEnabled(),
-		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-		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,
 		};
 	} ),

packages/edit-post/src/components/header/post-publish-button-or-toggle.js

@@ -0,0 +1,97 @@
+/**
+ * External Dependencies
+ */
+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 );

packages/edit-post/src/components/header/test/__snapshots__/index.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostPublishButtonOrToggle should render a button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled 1`] = `<WithSelect(WithDispatch(PostPublishButton)) />`;
+
+exports[`PostPublishButtonOrToggle should render a button when the post is pending and cannot be published but the viewport is >= medium (3) 1`] = `<WithSelect(WithDispatch(PostPublishButton)) />`;
+
+exports[`PostPublishButtonOrToggle should render a button when the post is published (1) 1`] = `<WithSelect(WithDispatch(PostPublishButton)) />`;
+
+exports[`PostPublishButtonOrToggle should render a button when the post is scheduled (2) 1`] = `<WithSelect(WithDispatch(PostPublishButton)) />`;
+
+exports[`PostPublishButtonOrToggle should render a toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled 1`] = `<WithSelect(PostPublishPanelToggle) />`;
+
+exports[`PostPublishButtonOrToggle should render a toggle when post is not published or scheduled and the viewport is < medium 1`] = `<WithSelect(PostPublishPanelToggle) />`;

packages/edit-post/src/components/header/test/index.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies.
+ */
+import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
+
+describe( 'PostPublishButtonOrToggle should render a', () => {
+	it( 'button when the post is published (1)', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle isPublished={ true } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'button when the post is scheduled (2)', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle
+			isScheduled={ true }
+			isBeingScheduled={ true }
+		/> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle
+			isPending={ true }
+			hasPublishAction={ false }
+			isLessThanMediumViewport={ false }
+		/> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'toggle when post is not published or scheduled and the viewport is < medium', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle isLessThanMediumViewport={ true } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle isPublishSidebarEnabled={ true } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
+		const wrapper = shallow( <PostPublishButtonOrToggle isPublishSidebarEnabled={ false } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );

packages/edit-post/src/components/options-modal/options.js

@@ -5,6 +5,7 @@ import { CheckboxControl } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ifViewportMatches } from '@wordpress/viewport';
 
 function Option( { label, isChecked, onChange } ) {
 	return (
@@ -51,7 +52,10 @@ export const EnablePublishSidebarOption = compose(
 		return {
 			onChange: ( isEnabled ) => ( isEnabled ? enablePublishSidebar() : disablePublishSidebar() ),
 		};
-	} )
+	} ),
+	// In < medium viewports we override this option and always show the publish sidebar.
+	// See the edit-post's header component for the specific logic.
+	ifViewportMatches( 'medium' ),
 )( Option );
 
 export const EnableTipsOption = compose(

packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap

@@ -15,7 +15,7 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
   <Section
     title="General"
   >
-    <WithSelect(WithDispatch(Option))
+    <WithSelect(WithDispatch(IfViewportMatches(Option)))
       label="Enable Pre-publish Checks"
     />
     <WithSelect(WithDispatch(DeferredOption))

packages/editor/src/components/post-publish-panel/toggle.js

@@ -1,8 +1,3 @@
-/**
- * External Dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress Dependencies
  */
@@ -12,35 +7,20 @@ import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { DotTip } from '@wordpress/nux';
 
-/**
- * Internal Dependencies
- */
-import PostPublishButton from '../post-publish-button';
-
 export function PostPublishPanelToggle( {
-	hasPublishAction,
 	isSaving,
 	isPublishable,
 	isSaveable,
 	isPublished,
 	isBeingScheduled,
-	isPending,
-	isScheduled,
 	onToggle,
 	isOpen,
-	forceIsDirty,
 	forceIsSaving,
 } ) {
 	const isButtonEnabled = (
 		! isSaving && ! forceIsSaving && isPublishable && isSaveable
 	) || isPublished;
 
-	const showToggle = ! isPublished && ! ( isScheduled && isBeingScheduled ) && ! ( isPending && ! hasPublishAction );
-
-	if ( ! showToggle ) {
-		return <PostPublishButton forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />;
-	}
-
 	return (
 		<Button
 			className="editor-post-publish-panel__toggle"
@@ -64,23 +44,15 @@ export default compose( [
 			isSavingPost,
 			isEditedPostSaveable,
 			isEditedPostPublishable,
-			isCurrentPostPending,
 			isCurrentPostPublished,
 			isEditedPostBeingScheduled,
-			isCurrentPostScheduled,
-			getCurrentPost,
-			getCurrentPostType,
 		} = select( 'core/editor' );
 		return {
-			hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
 			isSaving: isSavingPost(),
 			isSaveable: isEditedPostSaveable(),
 			isPublishable: isEditedPostPublishable(),
-			isPending: isCurrentPostPending(),
 			isPublished: isCurrentPostPublished(),
-			isScheduled: isCurrentPostScheduled(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
-			postType: getCurrentPostType(),
 		};
 	} ),
 ] )( PostPublishPanelToggle );

test/e2e/specs/publishing.test.js

@@ -8,6 +8,7 @@ import {
 	enablePrePublishChecks,
 	disablePrePublishChecks,
 	arePrePublishChecksEnabled,
+	setViewport,
 } from '../support/utils';
 
 describe( 'Publishing', () => {
@@ -76,4 +77,30 @@ describe( 'Publishing', () => {
 			} );
 		} );
 	} );
+
+	[ 'post', 'page' ].forEach( ( postType ) => {
+		let werePrePublishChecksEnabled;
+		describe( `a ${ postType } in small viewports`, () => {
+			beforeEach( async () => {
+				await newPost( postType );
+				werePrePublishChecksEnabled = await arePrePublishChecksEnabled();
+				if ( werePrePublishChecksEnabled ) {
+					await disablePrePublishChecks();
+				}
+				await setViewport( 'small' );
+			} );
+
+			afterEach( async () => {
+				await setViewport( 'large' );
+				if ( werePrePublishChecksEnabled ) {
+					await enablePrePublishChecks();
+				}
+			} );
+
+			it( `should ignore the pre-publish checks and show the Publish... toggle instead of the Publish button`, async () => {
+				expect( await page.$( '.editor-post-publish-panel__toggle' ) ).not.toBeNull();
+				expect( await page.$( '.editor-post-publish-button' ) ).toBeNull();
+			} );
+		} );
+	} );
 } );