Editor: Fix duplicate save panels

WordPress · Jun 26, 2024 · 0e8039b · 0e8039b
1 parent 913ebe0
commit 0e8039b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 28 deletions.
diff --git 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';
@@ -199,6 +200,11 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={
+						( _isPreviewingTheme || canvasMode === 'view' ) && (
+							<SavePanel />
+						)
+					}
 					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
@@ -37,7 +37,6 @@ 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';
@@ -236,8 +235,6 @@ export default function Layout( { route } ) {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);

diff --git 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,7 +215,7 @@ export default function EditorInterface( {
 				)
 			}
 			actions={
-				! isPreviewMode ? (
+				customSavePanel || (
 					<SavePublishPanels
 						closeEntitiesSavedStates={ closeEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={
@@ -225,7 +226,7 @@ export default function EditorInterface( {
 						}
 						forceIsDirtyPublishPanel={ forceIsDirty }
 					/>
-				) : 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
@@ -28,20 +28,25 @@ export default function SavePublishPanels( {
 } ) {
 	const { closePublishSidebar, togglePublishSidebar } =
 		useDispatch( editorStore );
-	const {
-		publishSidebarOpened,
-		hasNonPostEntityChanges,
-		hasPostMetaChanges,
-	} = useSelect(
-		( select ) => ( {
-			publishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			hasNonPostEntityChanges:
-				select( editorStore ).hasNonPostEntityChanges(),
-			hasPostMetaChanges: unlock(
-				select( editorStore )
-			).hasPostMetaChanges(),
-		} ),
+	const { publishSidebarOpened, isPublishable, isDirty } = useSelect(
+		( select ) => {
+			const {
+				isPublishSidebarOpened,
+				isEditedPostPublishable,
+				isCurrentPostPublished,
+				isEditedPostDirty,
+				hasNonPostEntityChanges: _hasNonPostEntityChanges,
+			} = select( editorStore );
+			return {
+				publishSidebarOpened: isPublishSidebarOpened(),
+				isPublishable:
+					! isCurrentPostPublished() && isEditedPostPublishable(),
+				isDirty:
+					_hasNonPostEntityChanges() ||
+					isEditedPostDirty() ||
+					unlock( select( editorStore ) ).hasPostMetaChanges(),
+			};
+		},
 		[]
 	);
 
@@ -62,29 +67,31 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
+	} else if ( isPublishable ) {
 		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>
 		);