Chrome: Move the SwitchToDraft button to the header

WordPress · Jan 5, 2018 · daab739 · daab739
1 parent 94e3a45
commit daab739
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 13 deletions.
diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js
@@ -14,6 +14,7 @@ import { Dashicon, Button } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
+import PostSwitchToDraftButton from '../post-switch-to-draft-button';
 import { editPost, savePost } from '../../store/actions';
 import {
 	isEditedPostNew,
@@ -36,7 +37,11 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 		);
 	}
 
-	if ( ! isSaveable || isPublished ) {
+	if ( isPublished ) {
+		return <PostSwitchToDraftButton className={ classnames( className, 'button-link' ) } />;
+	}
+
+	if ( ! isSaveable ) {
 		return null;
 	}
 

diff --git a/editor/components/post-saved-state/style.scss b/editor/components/post-saved-state/style.scss
@@ -11,6 +11,11 @@
 
 	.wp-core-ui &.button-link {
 		margin-right: $item-spacing;
+		padding: 0;
+
+		&:hover {
+			background: none;
+		}
 	}
 }
 

diff --git a/editor/components/post-saved-state/test/__snapshots__/index.js.snap b/editor/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
+<Connect(PostSwitchToDraftButton)
+  className="editor-post-saved-state button-link"
+/>
+`;
diff --git a/editor/components/post-saved-state/test/index.js b/editor/components/post-saved-state/test/index.js
@@ -33,10 +33,10 @@ describe( 'PostSavedState', () => {
 		expect( wrapper.type() ).toBeNull();
 	} );
 
-	it( 'returns null if the post is published', () => {
+	it( 'returns a switch to draft link if the post is published', () => {
 		const wrapper = shallow( <PostSavedState isPublished /> );
 
-		expect( wrapper.type() ).toBeNull();
+		expect( wrapper ).toMatchSnapshot();
 	} );
 
 	it( 'should return Saved text if not new and not dirty', () => {

diff --git a/editor/components/post-switch-to-draft-button/index.js b/editor/components/post-switch-to-draft-button/index.js
@@ -12,21 +12,20 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import './style.scss';
 import { editPost, savePost } from '../../store/actions';
 import {
 	isSavingPost,
 	isCurrentPostPublished,
 } from '../../store/selectors';
 
-function PostSwitchToDraftButton( { isSaving, isPublished, onClick } ) {
+function PostSwitchToDraftButton( { className, isSaving, isPublished, onClick } ) {
 	if ( ! isPublished ) {
 		return null;
 	}
 
 	return (
 		<Button
-			className="editor-post-publish-dropdown__switch-to-draft"
+			className={ className }
 			isLarge
 			onClick={ onClick }
 			disabled={ isSaving }

diff --git a/editor/components/post-switch-to-draft-button/style.scss b/editor/components/post-switch-to-draft-button/style.scss
diff --git a/editor/edit-post/sidebar/post-status/index.js b/editor/edit-post/sidebar/post-status/index.js
@@ -20,7 +20,6 @@ import PostSticky from '../post-sticky';
 import PostAuthor from '../post-author';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
-import { PostSwitchToDraftButton } from '../../../components';
 import {
 	isEditorSidebarPanelOpened,
 } from '../../../store/selectors';
@@ -41,7 +40,6 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 			<PostPendingStatus />
 			<PostAuthor />
 			<PostTrash />
-			<PostSwitchToDraftButton />
 		</PanelBody>
 	);
 }