Adds a global save button to the site editor (#47142)

WordPress · Feb 7, 2023 · 7d8946d · 7d8946d
1 parent b13b4a5
commit 7d8946d
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 98 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -94,10 +94,8 @@ $z-layers: (
 	// the Publish Post sidebar.
 	".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
 
-	".entities-saved-states__panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be on top of
 	// the multi-entity saving sidebar.
-	".entities-saved-states__panel {greater than small}": 99998,
 	".edit-site-editor__toggle-save-panel": 100000,
 
 	// Show sidebar in greater than small viewports above editor related elements
@@ -141,6 +139,7 @@ $z-layers: (
 
 	".skip-to-selected-block": 100000,
 	".interface-interface-skeleton__actions": 100000,
+	".edit-site-layout__actions": 100000,
 
 	// The focus styles of the region navigation containers should be above their content.
 	".is-focusing-regions {region} :focus::after": 1000000,

diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
@@ -14,7 +14,7 @@ export async function saveSiteEditorEntities( this: Editor ) {
 	);
 	// Second Save button in the entities panel.
 	await this.page.click(
-		'role=region[name="Editor publish"i] >> role=button[name="Save"i]'
+		'role=region[name="Save sidebar"i] >> role=button[name="Save"i]'
 	);
 	await this.page.waitForSelector(
 		'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]'

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -3,7 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -16,11 +16,7 @@ import {
 	ComplementaryArea,
 	store as interfaceStore,
 } from '@wordpress/interface';
-import {
-	EditorNotices,
-	EditorSnackbars,
-	EntitiesSavedStates,
-} from '@wordpress/editor';
+import { EditorNotices, EditorSnackbars } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -64,7 +60,6 @@ export default function Editor() {
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
-		isSaveViewOpen,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
@@ -75,7 +70,6 @@ export default function Editor() {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			isSaveViewOpened,
 		} = unlock( select( editSiteStore ) );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
@@ -104,7 +98,6 @@ export default function Editor() {
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
@@ -114,8 +107,7 @@ export default function Editor() {
 			),
 		};
 	}, [] );
-	const { setIsSaveViewOpened, setEditedPostContext } =
-		useDispatch( editSiteStore );
+	const { setEditedPostContext } = useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -211,38 +203,6 @@ export default function Editor() {
 										<ComplementaryArea.Slot scope="core/edit-site" />
 									)
 								}
-								actions={
-									isEditMode && (
-										<>
-											{ isSaveViewOpen ? (
-												<EntitiesSavedStates
-													close={ () =>
-														setIsSaveViewOpened(
-															false
-														)
-													}
-												/>
-											) : (
-												<div className="edit-site-editor__toggle-save-panel">
-													<Button
-														variant="secondary"
-														className="edit-site-editor__toggle-save-panel-button"
-														onClick={ () =>
-															setIsSaveViewOpened(
-																true
-															)
-														}
-														aria-expanded={ false }
-													>
-														{ __(
-															'Open save panel'
-														) }
-													</Button>
-												</div>
-											) }
-										</>
-									)
-								}
 								footer={
 									showBlockBreakcrumb && (
 										<BlockBreadcrumb

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -7,8 +7,8 @@
 	display: flex;
 	justify-content: center;
 
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
+	.edit-site-layout__actions:focus &,
+	.edit-site-layout__actions:focus-within & {
 		top: auto;
 		bottom: 0;
 	}

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -39,6 +39,7 @@ import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../experiments';
+import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -267,6 +268,8 @@ export default function Layout() {
 						) }
 					</AnimatePresence>
 
+					<SavePanel />
+
 					{ showCanvas && (
 						<div
 							className={ classnames(

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -85,9 +85,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	}
 
 	> div {
-		overflow-y: auto;
-		min-height: 100%;
-		@include custom-scrollbars-on-hover;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 
 	.resizable-editor__drag-handle {
@@ -205,3 +205,25 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		border-radius: $radius-block-ui;
 	}
 }
+
+.edit-site-layout__actions {
+	z-index: z-index(".edit-site-layout__actions");
+	position: fixed !important; // Need to override the default relative positioning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	width: $sidebar-width;
+	color: $gray-900;
+	background: $white;
+
+	&:focus,
+	&:focus-within {
+		top: 0;
+		bottom: 0;
+	}
+
+	@include break-medium {
+		border-left: $border-width solid $gray-300;
+	}
+}
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { EntitiesSavedStates } from '@wordpress/editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
+
+export default function SavePanel() {
+	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
+		const { isSaveViewOpened, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			canvasMode: getCanvasMode(),
+		};
+	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const onClose = () => setIsSaveViewOpened( false );
+
+	if ( canvasMode === 'view' ) {
+		return isSaveViewOpen ? (
+			<Modal
+				className="edit-site-save-panel__modal"
+				onRequestClose={ onClose }
+				__experimentalHideHeader
+			>
+				<EntitiesSavedStates close={ onClose } />
+			</Modal>
+		) : null;
+	}
+
+	return (
+		<NavigableRegion
+			className="edit-site-layout__actions"
+			ariaLabel={ __( 'Save sidebar' ) }
+		>
+			{ isSaveViewOpen ? (
+				<EntitiesSavedStates close={ onClose } />
+			) : (
+				<div className="edit-site-editor__toggle-save-panel">
+					<Button
+						variant="secondary"
+						className="edit-site-editor__toggle-save-panel-button"
+						onClick={ () => setIsSaveViewOpened( true ) }
+						aria-expanded={ false }
+					>
+						{ __( 'Open save panel' ) }
+					</Button>
+				</div>
+			) }
+		</NavigableRegion>
+	);
+}
diff --git a/packages/edit-site/src/components/save-panel/style.scss b/packages/edit-site/src/components/save-panel/style.scss
@@ -0,0 +1,5 @@
+.edit-site-save-panel__modal {
+	@include break-small() {
+		width: 600px;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -2,7 +2,9 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -11,6 +13,7 @@ import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SaveButton from '../save-button';
 
 function SidebarScreens() {
 	useSyncSidebarPathWithURL();
@@ -26,13 +29,30 @@ function SidebarScreens() {
 }
 
 function Sidebar() {
+	const { isDirty } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isDirty: dirtyEntityRecords.length > 0,
+		};
+	}, [] );
+
 	return (
-		<NavigatorProvider
-			className="edit-site-sidebar__content"
-			initialPath="/"
-		>
-			<SidebarScreens />
-		</NavigatorProvider>
+		<>
+			<NavigatorProvider
+				className="edit-site-sidebar__content"
+				initialPath="/"
+			>
+				<SidebarScreens />
+			</NavigatorProvider>
+			{ isDirty && (
+				<div className="edit-site-sidebar__footer">
+					<SaveButton />
+				</div>
+			) }
+		</>
 	);
 }
 

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -1,3 +1,18 @@
+.edit-site-sidebar__content {
+	flex-grow: 1;
+	overflow-y: auto;
+	@include custom-scrollbars-on-hover;
+}
+
+.edit-site-sidebar__footer {
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0 $canvas-padding;
+	padding: $canvas-padding 0;
+	display: flex;
+	justify-content: flex-end;
+}
+
 .edit-site-sidebar__content.edit-site-sidebar__content {
 	overflow-x: unset;
 }

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -7,6 +7,7 @@
 
 .edit-site-site-hub__edit-button {
 	height: $grid-unit-40;
+	color: $white;
 }
 
 .edit-site-site-hub__post-type {

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -19,6 +19,7 @@
 @import "./components/welcome-guide/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/save-panel/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";