Widgets: Fix creating and editing non-multi widgets

WordPress · Jun 28, 2021 · 3059852 · 3059852
1 parent 96a8781
commit 3059852
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
@@ -148,13 +148,15 @@ export function* saveWidgetArea( widgetAreaId ) {
 		const widgetId = getWidgetIdFromBlock( block );
 		const oldWidget = widgets[ widgetId ];
 		const widget = transformBlockToWidget( block, oldWidget );
+
 		// We'll replace the null widgetId after save, but we track it here
 		// since order is important.
 		sidebarWidgetsIds.push( widgetId );
 
-		// We need to check for the id in the widget object here, because a deleted
-		// and restored widget won't have this id.
-		if ( widget.id ) {
+		// Check oldWidget as widgetId might refer to an ID which has been
+		// deleted, e.g. if a deleted block is restored via undo after saving.
+		if ( oldWidget ) {
+			// Update an existing widget.
 			yield dispatch(
 				'core',
 				'editEntityRecord',
@@ -184,6 +186,7 @@ export function* saveWidgetArea( widgetAreaId ) {
 				saveEditedEntityRecord( 'root', 'widget', widgetId )
 			);
 		} else {
+			// Create a new widget.
 			batchTasks.push( ( { saveEntityRecord } ) =>
 				saveEntityRecord( 'root', 'widget', {
 					...widget,

diff --git a/packages/widgets/src/blocks/legacy-widget/edit/control.js b/packages/widgets/src/blocks/legacy-widget/edit/control.js
@@ -52,7 +52,10 @@ export default class Control {
 		// a fake but unique number.
 		this.number = ++lastNumber;
 
-		this.handleFormChange = debounce( this.saveForm.bind( this ), 200 );
+		this.handleFormChange = debounce(
+			this.handleFormChange.bind( this ),
+			200
+		);
 		this.handleFormSubmit = this.handleFormSubmit.bind( this );
 
 		this.initDOM();
@@ -214,6 +217,18 @@ export default class Control {
 		}
 	}
 
+	/**
+	 * Perform a save when a multi widget's form is changed. Non-multi widgets
+	 * are saved manually.
+	 *
+	 * @access private
+	 */
+	handleFormChange() {
+		if ( this.idBase ) {
+			this.saveForm();
+		}
+	}
+
 	/**
 	 * Perform a save when the control's form is manually submitted.
 	 *

diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -131,7 +131,8 @@ function NotEmpty( {
 		);
 	}
 
-	const mode = isNavigationMode || ! isSelected ? 'preview' : 'edit';
+	const mode =
+		idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
 
 	return (
 		<>