Site Editor: Move the save view state to the edit site store

docs/reference-guides/data/data-core-edit-site.md

@@ -189,6 +189,18 @@ _Returns_
 
 -   `boolean`: True if the navigation panel should be open; false if closed.
 
+### isSaveViewOpened
+
+Returns the current opened/closed state of the save panel.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: True if the save panel should be open; false if closed.
+
 <!-- END TOKEN(Autogenerated selectors|../../../packages/edit-site/src/store/selectors.js) -->
 
 ## Actions
@@ -284,6 +296,14 @@ _Parameters_
 
 -   _isOpen_ `boolean`: If true, opens the nav panel. If false, closes it. It does not toggle the state, but sets it directly.
 
+### setIsSaveViewOpened
+
+Sets whether the save view panel should be open.
+
+_Parameters_
+
+-   _isOpen_ `boolean`: If true, opens the save view. If false, closes it. It does not toggle the state, but sets it directly.
+
 ### setNavigationPanelActiveMenu
 
 Action that sets the active navigation panel menu.

packages/edit-site/src/components/editor/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
@@ -65,6 +65,7 @@ function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
+		isSaveViewOpen,
 		sidebarIsOpened,
 		settings,
 		entityId,
@@ -82,6 +83,7 @@ function Editor( { onError } ) {
 		const {
 			isInserterOpened,
 			isListViewOpened,
+			isSaveViewOpened,
 			getSettings,
 			getEditedPostType,
 			getEditedPostId,
@@ -98,6 +100,7 @@ function Editor( { onError } ) {
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
 			sidebarIsOpened: !! select(
 				interfaceStore
 			).getActiveComplementaryArea( editSiteStore.name ),
@@ -130,19 +133,10 @@ function Editor( { onError } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+		useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
-		useState( false );
-	const openEntitiesSavedStates = useCallback(
-		() => setIsEntitiesSavedStatesOpen( true ),
-		[]
-	);
-	const closeEntitiesSavedStates = useCallback( () => {
-		setIsEntitiesSavedStatesOpen( false );
-	}, [] );
-
 	const blockContext = useMemo(
 		() => ( {
 			...page?.context,
@@ -247,9 +241,6 @@ function Editor( { onError } ) {
 											}
 											header={
 												<Header
-													openEntitiesSavedStates={
-														openEntitiesSavedStates
-													}
 													showIconLabels={
 														showIconLabels
 													}
@@ -286,28 +277,28 @@ function Editor( { onError } ) {
 																) }
 															</Notice>
 														) }
-													<KeyboardShortcuts
-														openEntitiesSavedStates={
-															openEntitiesSavedStates
-														}
-													/>
+													<KeyboardShortcuts />
 												</>
 											}
 											actions={
 												<>
-													{ isEntitiesSavedStatesOpen ? (
+													{ isSaveViewOpen ? (
 														<EntitiesSavedStates
-															close={
-																closeEntitiesSavedStates
+															close={ () =>
+																setIsSaveViewOpened(
+																	false
+																)
 															}
 														/>
 													) : (
 														<div className="edit-site-editor__toggle-save-panel">
 															<Button
 																variant="secondary"
 																className="edit-site-editor__toggle-save-panel-button"
-																onClick={
-																	openEntitiesSavedStates
+																onClick={ () =>
+																	setIsInserterOpened(
+																		true
+																	)
 																}
 																aria-expanded={
 																	false

packages/edit-site/src/components/header-edit-mode/index.js

@@ -41,11 +41,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function Header( {
-	openEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-	showIconLabels,
-} ) {
+export default function Header( { showIconLabels } ) {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -238,10 +234,7 @@ export default function Header( {
 							</PreviewOptions>
 						</div>
 					) }
-					<SaveButton
-						openEntitiesSavedStates={ openEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }
-					/>
+					<SaveButton />
 					<PinnedItems.Slot scope="core/edit-site" />
 					<MoreMenu showIconLabels={ showIconLabels } />
 				</div>

packages/edit-site/src/components/keyboard-shortcuts/index.js

@@ -18,7 +18,7 @@ import { store as editSiteStore } from '../../store';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
-function KeyboardShortcuts( { openEntitiesSavedStates } ) {
+function KeyboardShortcuts() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
@@ -38,6 +38,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
@@ -49,7 +50,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		);
 
 		if ( ! isSaving && isDirty ) {
-			openEntitiesSavedStates();
+			setIsSaveViewOpened( true );
 		}
 	} );
 

packages/edit-site/src/components/save-button/index.js

@@ -6,26 +6,31 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function SaveButton( {
-	openEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-} ) {
-	const { isDirty, isSaving } = useSelect( ( select ) => {
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function SaveButton() {
+	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const { isSaveViewOpened } = select( editSiteStore );
 		return {
 			isDirty: dirtyEntityRecords.length > 0,
 			isSaving: some( dirtyEntityRecords, ( record ) =>
 				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
+			isSaveViewOpen: isSaveViewOpened(),
 		};
 	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	const disabled = ! isDirty || isSaving;
 
@@ -34,9 +39,9 @@ export default function SaveButton( {
 			variant="primary"
 			className="edit-site-save-button__button"
 			aria-disabled={ disabled }
-			aria-expanded={ isEntitiesSavedStatesOpen }
+			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : openEntitiesSavedStates }
+			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
 		>
 			{ __( 'Save' ) }
 		</Button>

packages/edit-site/src/store/actions.js

@@ -320,6 +320,19 @@ export function setIsListViewOpened( isOpen ) {
 	};
 }
 
+/**
+ * Sets whether the save view panel should be open.
+ *
+ * @param {boolean} isOpen If true, opens the save view. If false, closes it.
+ *                         It does not toggle the state, but sets it directly.
+ */
+export function setIsSaveViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_SAVE_VIEW_OPENED',
+		isOpen,
+	};
+}
+
 /**
  * Reverts a template to its original theme-provided file.
  *

packages/edit-site/src/store/reducer.js

@@ -183,6 +183,24 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer to set the save view panel open or closed.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function saveViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
+			return false;
+		case 'SET_IS_NAVIGATION_PANEL_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_SAVE_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -191,4 +209,5 @@ export default combineReducers( {
 	navigationPanel,
 	blockInserterPanel,
 	listViewPanel,
+	saveViewPanel,
 } );

packages/edit-site/src/store/selectors.js

@@ -320,6 +320,17 @@ export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
 
+/**
+ * Returns the current opened/closed state of the save panel.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} True if the save panel should be open; false if closed.
+ */
+export function isSaveViewOpened( state ) {
+	return state.saveViewPanel;
+}
+
 /**
  * Returns the template parts and their blocks for the current edited template.
  *