From 0090d4ecb001f4774b8e80d443efa43599609b66 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Tue, 2 Jul 2024 13:33:06 +0300 Subject: [PATCH] Editor: Fix duplicate save panels (#62863) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: t-hamano --- .../edit-site/src/components/editor/index.js | 2 + .../edit-site/src/components/layout/index.js | 5 +- .../src/components/editor-interface/index.js | 29 ++++++---- .../components/save-publish-panels/index.js | 56 +++++++++++-------- .../various/multi-entity-saving.spec.js | 4 +- .../editor/various/switch-to-draft.spec.js | 5 +- .../site-editor/multi-entity-saving.spec.js | 2 +- 7 files changed, 61 insertions(+), 42 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 8615b3355b8350..b11a9c56c9c50c 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -40,6 +40,7 @@ import { useHasEditorCanvasContainer, } from '../editor-canvas-container'; import SaveButton from '../save-button'; +import SavePanel from '../save-panel'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; @@ -202,6 +203,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { customSaveButton={ _isPreviewingTheme && } + customSavePanel={ _isPreviewingTheme && } forceDisableBlockTools={ ! hasDefaultEditorCanvasView } title={ title } icon={ icon } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 72d48122057ac9..443ca04ebd03ea 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -37,13 +37,13 @@ import { store as editSiteStore } from '../../store'; import SiteHub from '../site-hub'; import ResizableFrame from '../resizable-frame'; import { unlock } from '../../lock-unlock'; -import SavePanel from '../save-panel'; import KeyboardShortcutsRegister from '../keyboard-shortcuts/register'; import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global'; import { useIsSiteEditorLoading } from './hooks'; import useMovingAnimation from './animation'; import SidebarContent from '../sidebar'; import SaveHub from '../save-hub'; +import SavePanel from '../save-panel'; import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url'; const { useCommands } = unlock( coreCommandsPrivateApis ); @@ -163,6 +163,7 @@ export default function Layout( { route } ) { { areas.sidebar } + ) } @@ -236,8 +237,6 @@ export default function Layout( { route } ) { ) } - - ); diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 88ac950c4ae229..5b0aea5400d7ba 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -55,6 +55,7 @@ export default function EditorInterface( { disableIframe, autoFocus, customSaveButton, + customSavePanel, forceDisableBlockTools, title, icon, @@ -214,18 +215,22 @@ export default function EditorInterface( { ) } actions={ - ! isPreviewMode ? ( - - ) : undefined + ! isPreviewMode + ? customSavePanel || ( + + ) + : undefined } shortcuts={ { previous: previousShortcut, diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js index 3ae871c354bb62..2b1a54b57d9558 100644 --- a/packages/editor/src/components/save-publish-panels/index.js +++ b/packages/editor/src/components/save-publish-panels/index.js @@ -30,20 +30,28 @@ export default function SavePublishPanels( { useDispatch( editorStore ); const { publishSidebarOpened, - hasNonPostEntityChanges, - hasPostMetaChanges, - } = useSelect( - ( select ) => ( { - publishSidebarOpened: - select( editorStore ).isPublishSidebarOpened(), - hasNonPostEntityChanges: - select( editorStore ).hasNonPostEntityChanges(), - hasPostMetaChanges: unlock( - select( editorStore ) - ).hasPostMetaChanges(), - } ), - [] - ); + isPublishable, + isDirty, + hasOtherEntitiesChanges, + } = useSelect( ( select ) => { + const { + isPublishSidebarOpened, + isEditedPostPublishable, + isCurrentPostPublished, + isEditedPostDirty, + hasNonPostEntityChanges, + } = select( editorStore ); + const _hasOtherEntitiesChanges = + hasNonPostEntityChanges() || + unlock( select( editorStore ) ).hasPostMetaChanges(); + return { + publishSidebarOpened: isPublishSidebarOpened(), + isPublishable: + ! isCurrentPostPublished() && isEditedPostPublishable(), + isDirty: _hasOtherEntitiesChanges || isEditedPostDirty(), + hasOtherEntitiesChanges: _hasOtherEntitiesChanges, + }; + }, [] ); const openEntitiesSavedStates = useCallback( () => setEntitiesSavedStatesCallback( true ), @@ -62,29 +70,31 @@ export default function SavePublishPanels( { PostPublishExtension={ PluginPostPublishPanel.Slot } /> ); - } else if ( hasNonPostEntityChanges || hasPostMetaChanges ) { + } else if ( isPublishable && ! hasOtherEntitiesChanges ) { unmountableContent = ( -
+
); } else { unmountableContent = ( -
+
); diff --git a/test/e2e/specs/editor/various/multi-entity-saving.spec.js b/test/e2e/specs/editor/various/multi-entity-saving.spec.js index 65a13b04ceed91..30496fac32aec4 100644 --- a/test/e2e/specs/editor/various/multi-entity-saving.spec.js +++ b/test/e2e/specs/editor/various/multi-entity-saving.spec.js @@ -138,12 +138,12 @@ test.describe( 'Editor - Multi-entity save flow', () => { await expect( saveButton ).toBeEnabled(); // Verify multi-entity saving not enabled. - await expect( openSavePanel ).toBeHidden(); + await expect( publishPanel ).toBeHidden(); await siteTitleField.fill( `${ originalSiteTitle }!` ); // Multi-entity saving should be enabled. - await expect( openSavePanel ).toBeVisible(); + await expect( openSavePanel ).toBeEnabled(); } ); test( 'Site blocks should save individually', async ( { 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 2e1ee3a303a89f..516de6d0c85cc5 100644 --- a/test/e2e/specs/editor/various/switch-to-draft.spec.js +++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js @@ -57,7 +57,10 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', .getByRole( 'button', { name: 'Close Settings' } ) .click(); } - await page.getByRole( 'button', { name: 'Save' } ).click(); + await page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'button', { name: 'Save', exact: true } ) + .click(); await expect( page.getByRole( 'button', { name: 'Dismiss this notice', diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js index 88a277b8c88f2c..cbc3bfde457a14 100644 --- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -41,7 +41,7 @@ test.describe( 'Site Editor - Multi-entity save flow', () => { ).toBeEnabled(); await expect( page - .getByRole( 'region', { name: 'Save panel' } ) + .getByRole( 'region', { name: 'Editor publish' } ) .getByRole( 'button', { name: 'Open save panel' } ) ).toBeVisible();