From 4fa0cd9c24ef6c2512859494482885cb6acfba81 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Tue, 2 Jul 2024 16:55:06 +0300 Subject: [PATCH] Editor: Fix duplicate save panels (#62863) (#63051) * Editor: Fix duplicate save panels (#62863) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: t-hamano * pass customSavePanel --------- Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: t-hamano Co-authored-by: ntsekouras Co-authored-by: ellatrix --- .../edit-site/src/components/editor/index.js | 2 + .../edit-site/src/components/layout/index.js | 5 +- .../src/components/editor-interface/index.js | 29 ++++++---- .../editor/src/components/editor/index.js | 2 + .../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 +- 8 files changed, 63 insertions(+), 42 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 463b387ea903eb..694868064d1d35 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -41,6 +41,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'; @@ -205,6 +206,7 @@ export default function EditSiteEditor( { isLoading } ) { customSaveButton={ _isPreviewingTheme && } + customSavePanel={ _isPreviewingTheme && } forceDisableBlockTools={ ! hasDefaultEditorCanvasView } title={ ! hasDefaultEditorCanvasView diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 58de32d4b46878..21fd12e71219b3 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -46,7 +46,6 @@ import SiteHub from '../site-hub'; import ResizableFrame from '../resizable-frame'; import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url'; import { unlock } from '../../lock-unlock'; -import SavePanel from '../save-panel'; import KeyboardShortcutsRegister from '../keyboard-shortcuts/register'; import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global'; import { useCommonCommands } from '../../hooks/commands/use-common-commands'; @@ -56,6 +55,7 @@ import useLayoutAreas from './router'; import useMovingAnimation from './animation'; import SidebarContent from '../sidebar'; import SaveHub from '../save-hub'; +import SavePanel from '../save-panel'; const { useCommands } = unlock( coreCommandsPrivateApis ); const { useCommandContext } = unlock( commandsPrivateApis ); @@ -209,6 +209,7 @@ export default function Layout() { { areas.sidebar } + ) } @@ -282,8 +283,6 @@ export default function Layout() { ) } - - ); diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 16fd4830d1f68b..9027e317f18cd3 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, iframeProps, @@ -212,18 +213,22 @@ export default function EditorInterface( { ) } actions={ - ! isPreviewMode ? ( - - ) : undefined + ! isPreviewMode + ? customSavePanel || ( + + ) + : undefined } shortcuts={ { previous: previousShortcut, diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js index 5fb671f3714155..889ccb0d5a4b9e 100644 --- a/packages/editor/src/components/editor/index.js +++ b/packages/editor/src/components/editor/index.js @@ -29,6 +29,7 @@ function Editor( { className, styles, customSaveButton, + customSavePanel, forceDisableBlockTools, title, iframeProps, @@ -81,6 +82,7 @@ function Editor( { styles={ styles } enableRegionNavigation={ enableRegionNavigation } customSaveButton={ customSaveButton } + customSavePanel={ customSavePanel } forceDisableBlockTools={ forceDisableBlockTools } title={ title } iframeProps={ iframeProps } 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();