Editor: Fix duplicate save panels (#62863)

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 && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={
 						! hasDefaultEditorCanvasView

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 }
 										</SidebarContent>
 										<SaveHub />
+										<SavePanel />
 									</motion.div>
 								) }
 							</AnimatePresence>
@@ -282,8 +283,6 @@ export default function Layout() {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);

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 ? (
-					<SavePublishPanels
-						closeEntitiesSavedStates={ closeEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={
-							entitiesSavedStatesCallback
-						}
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						forceIsDirtyPublishPanel={ forceIsDirty }
-					/>
-				) : undefined
+				! isPreviewMode
+					? customSavePanel || (
+							<SavePublishPanels
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+								forceIsDirtyPublishPanel={ forceIsDirty }
+							/>
+					  )
+					: undefined
 			}
 			shortcuts={ {
 				previous: previousShortcut,

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 }

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 = (
-			<div className="editor-layout__toggle-entities-saved-states-panel">
+			<div className="editor-layout__toggle-publish-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-entities-saved-states-panel-button"
-					onClick={ openEntitiesSavedStates }
+					className="editor-layout__toggle-publish-panel-button"
+					onClick={ togglePublishSidebar }
 					aria-expanded={ false }
 				>
-					{ __( 'Open save panel' ) }
+					{ __( 'Open publish panel' ) }
 				</Button>
 			</div>
 		);
 	} else {
 		unmountableContent = (
-			<div className="editor-layout__toggle-publish-panel">
+			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-publish-panel-button"
-					onClick={ togglePublishSidebar }
+					className="editor-layout__toggle-entities-saved-states-panel-button"
+					onClick={ openEntitiesSavedStates }
 					aria-expanded={ false }
+					disabled={ ! isDirty }
+					__experimentalIsFocusable
 				>
-					{ __( 'Open publish panel' ) }
+					{ __( 'Open save panel' ) }
 				</Button>
 			</div>
 		);

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 ( {

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',

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();