@wordpress/edit-site 5.3.1 → 5.3.2

package/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;
+	}
+}

package/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>
+	);
+}

package/src/components/save-panel/style.scss

@@ -0,0 +1,5 @@
+.edit-site-save-panel__modal {
+	@include break-small() {
+		width: 600px;
+	}
+}

package/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>
+			) }
+		</>
 	);
 }
 

package/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;
 }

package/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 {

package/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";