From a770dfd075933f0cee7fcd00ddb9361d9ef90ddc Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Mon, 1 May 2023 18:01:30 +0200 Subject: [PATCH] Improve "switch to draft" placement (#50217) Move button next to the "move to trash" action in post settings and out of the prominent header placement. Adjust e2e tests to new configuration. --- .../src/components/sidebar/post-status/index.js | 16 ++++++++++++++-- .../src/components/sidebar/post-trash/index.js | 6 +++--- .../src/components/post-saved-state/index.js | 7 ------- .../test/__snapshots__/index.js.snap | 9 --------- .../components/post-saved-state/test/index.js | 10 ---------- .../post-switch-to-draft-button/index.js | 13 +++++++------ .../editor/src/components/post-trash/style.scss | 4 +--- .../specs/editor/various/switch-to-draft.spec.js | 9 ++++++--- 8 files changed, 31 insertions(+), 43 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index 004664941a4b6..8304bb8b4f6ea 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -2,9 +2,13 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + PanelBody, +} from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose, ifCondition } from '@wordpress/compose'; +import { PostSwitchToDraftButton } from '@wordpress/editor'; /** * Internal dependencies @@ -48,7 +52,15 @@ function PostStatus( { isOpened, onTogglePanel } ) { { fills } - + + + + ) } diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js index a7094385c0265..885be537952c0 100644 --- a/packages/edit-post/src/components/sidebar/post-trash/index.js +++ b/packages/edit-post/src/components/sidebar/post-trash/index.js @@ -1,15 +1,15 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor'; +import { FlexItem } from '@wordpress/components'; export default function PostTrash() { return ( - + - + ); } diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js index 7d57b2a630e4e..d3c15b5596e3d 100644 --- a/packages/editor/src/components/post-saved-state/index.js +++ b/packages/editor/src/components/post-saved-state/index.js @@ -20,7 +20,6 @@ import { displayShortcut } from '@wordpress/keycodes'; /** * Internal dependencies */ -import PostSwitchToDraftButton from '../post-switch-to-draft-button'; import { store as editorStore } from '../../store'; /** @@ -48,10 +47,8 @@ export default function PostSavedState( { isDirty, isNew, isPending, - isPublished, isSaveable, isSaving, - isScheduled, hasPublishAction, } = useSelect( ( select ) => { @@ -106,10 +103,6 @@ export default function PostSavedState( { return null; } - if ( isPublished || isScheduled ) { - return ; - } - /* translators: button label text should, if possible, be under 16 characters. */ const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' ); diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap index d24ed1370537a..16fdd70e06573 100644 --- a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap @@ -22,15 +22,6 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1` `; -exports[`PostSavedState returns a switch to draft link if the post is published 1`] = ` - -`; - exports[`PostSavedState should return Save button if edits to be saved 1`] = ` { alertMessage } - + ); } diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss index dddda0421edb3..f24a6eb2743dd 100644 --- a/packages/editor/src/components/post-trash/style.scss +++ b/packages/editor/src/components/post-trash/style.scss @@ -1,6 +1,4 @@ .editor-post-trash.components-button { - display: flex; - justify-content: center; - margin-top: $grid-unit-05; width: 100%; + display: block; } diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js index a501d8982947c..59837a3d3c765 100644 --- a/test/e2e/specs/editor/various/switch-to-draft.spec.js +++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js @@ -35,6 +35,7 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', page, switchToDraftUtils, pageUtils, + editor, } ) => { await pageUtils.setBrowserViewport( viewport ); @@ -44,6 +45,8 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', postStatus === 'schedule' ); + await editor.openDocumentSettingsSidebar(); + await switchToDraftUtils.switchToDraftButton.click(); await page @@ -100,9 +103,9 @@ class SwitchToDraftUtils { this.#admin = admin; this.#requestUtils = requestUtils; - this.switchToDraftButton = page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'draft' } ); + this.switchToDraftButton = page.locator( + 'role=button[name="Switch to draft"i]' + ); } /**