Edit Widgets: save lock control via actions (WordPress#69984)

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jorostoyanov <stoyanovgs@git.wordpress.org>

Author: 5 people

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

@@ -136,6 +136,18 @@ _Returns_
 
 -   `boolean`: True if any widget area is currently being saved. False otherwise.
 
+### isWidgetSavingLocked
+
+Returns whether widget saving is locked.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Is locked.
+
 <!-- END TOKEN(Autogenerated selectors|../../../packages/edit-widgets/src/store/selectors.js) -->
 
 ## Actions
@@ -150,6 +162,18 @@ _Returns_
 
 -   `Object`: Action creator.
 
+### lockWidgetSaving
+
+Returns an action object used to signal that widget saving is locked.
+
+_Parameters_
+
+-   _lockName_ `string`: The lock name.
+
+_Returns_
+
+-   `Object`: Action object
+
 ### moveBlockToWidgetArea
 
 Action that handles moving a block between widget areas
@@ -270,4 +294,16 @@ _Returns_
 
 -   `Object`: Action.
 
+### unlockWidgetSaving
+
+Returns an action object used to signal that widget saving is unlocked.
+
+_Parameters_
+
+-   _lockName_ `string`: The lock name.
+
+_Returns_
+
+-   `Object`: Action object
+
 <!-- END TOKEN(Autogenerated actions|../../../packages/edit-widgets/src/store/actions.js) -->

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

@@ -11,18 +11,26 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editWidgetsStore } from '../../store';
 
 function SaveButton() {
-	const { hasEditedWidgetAreaIds, isSaving } = useSelect( ( select ) => {
-		const { getEditedWidgetAreas, isSavingWidgetAreas } =
-			select( editWidgetsStore );
+	const { hasEditedWidgetAreaIds, isSaving, isWidgetSaveLocked } = useSelect(
+		( select ) => {
+			const {
+				getEditedWidgetAreas,
+				isSavingWidgetAreas,
+				isWidgetSavingLocked,
+			} = select( editWidgetsStore );
 
-		return {
-			hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
-			isSaving: isSavingWidgetAreas(),
-		};
-	}, [] );
+			return {
+				hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
+				isSaving: isSavingWidgetAreas(),
+				isWidgetSaveLocked: isWidgetSavingLocked(),
+			};
+		},
+		[]
+	);
 	const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore );
 
-	const isDisabled = isSaving || ! hasEditedWidgetAreaIds;
+	const isDisabled =
+		isWidgetSaveLocked || isSaving || ! hasEditedWidgetAreaIds;
 
 	return (
 		<Button

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

@@ -431,3 +431,31 @@ export const moveBlockToWidgetArea =
 				destinationIndex
 			);
 	};
+
+/**
+ * Returns an action object used to signal that widget saving is unlocked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @return {Object} Action object
+ */
+export function unlockWidgetSaving( lockName ) {
+	return {
+		type: 'UNLOCK_WIDGET_SAVING',
+		lockName,
+	};
+}
+
+/**
+ * Returns an action object used to signal that widget saving is locked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @return {Object} Action object
+ */
+export function lockWidgetSaving( lockName ) {
+	return {
+		type: 'LOCK_WIDGET_SAVING',
+		lockName,
+	};
+}

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

@@ -90,10 +90,36 @@ export function inserterSidebarToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * Widget saving lock.
+ *
+ * When widget saving is locked, the widget cannot be updated.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function widgetSavingLock( state = {}, action ) {
+	switch ( action.type ) {
+		case 'LOCK_WIDGET_SAVING':
+			return { ...state, [ action.lockName ]: true };
+
+		case 'UNLOCK_WIDGET_SAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
 	inserterSidebarToggleRef,
 	listViewPanel,
 	listViewToggleRef,
 	widgetAreasOpenState,
+	widgetSavingLock,
 } );

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

@@ -311,3 +311,14 @@ export const canInsertBlockInWidgetArea = createRegistrySelector(
 export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
+
+/**
+ * Returns whether widget saving is locked.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Is locked.
+ */
+export function isWidgetSavingLocked( state ) {
+	return Object.keys( state.widgetSavingLock ).length > 0;
+}

packages/edit-widgets/src/store/test/reducer.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { widgetSavingLock } from '../reducer';
+
+describe( 'state', () => {
+	describe( 'widgetSavingLock', () => {
+		it( 'returns empty object by default', () => {
+			const state = widgetSavingLock( undefined, {} );
+
+			expect( state ).toEqual( {} );
+		} );
+
+		it( 'returns correct widget saving locks when locks added and removed', () => {
+			let state = widgetSavingLock( undefined, {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {} );
+		} );
+	} );
+} );

packages/edit-widgets/src/store/test/selectors.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import * as _selectors from '../selectors';
+
+const selectors = { ..._selectors };
+const { isWidgetSavingLocked } = selectors;
+
+describe( 'selectors', () => {
+	describe( 'isWidgetSavingLocked', () => {
+		it( 'should return true if the post has widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: { example: true },
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if the post has no widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: {},
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( false );
+		} );
+	} );
+} );