From b9e25f3ed03ec3abd1d044ca443f5fec21a4a14a Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Tue, 2 Jul 2024 13:33:06 +0300 Subject: [PATCH 1/2] 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 463b387ea903e..694868064d1d3 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 58de32d4b4687..21fd12e71219b 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 16fd4830d1f68..9027e317f18cd 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/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js index 3ae871c354bb6..2b1a54b57d955 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 65a13b04ceed9..30496fac32aec 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 2e1ee3a303a89..516de6d0c85cc 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 88a277b8c88f2..cbc3bfde457a1 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(); From 178ced14e8f951d8fe84fa8a6e2d63c61dae4cb4 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 2 Jul 2024 16:08:32 +0300 Subject: [PATCH 2/2] pass customSavePanel --- packages/editor/src/components/editor/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js index 5fb671f371415..889ccb0d5a4b9 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 }