Improved code

gutenberg.php

@@ -47,9 +47,11 @@ function the_gutenberg_project() {
 		</div>
 		<?php
 		/** This action is documented in wp-admin/admin-footer.php */
+		// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
 		do_action( 'admin_print_footer_scripts-widgets.php' );
 
 		/** This action is documented in wp-admin/admin-footer.php */
+		// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
 		do_action( 'admin_footer-widgets.php' );
 		?>
 	</div>
@@ -220,7 +222,9 @@ function gutenberg_init( $return, $post ) {
 	 */
 	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 
+	// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
 	do_action( 'admin_print_styles-widgets.php' );
+	// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
 	do_action( 'admin_print_scripts-widgets.php' );
 
 	/*

packages/block-library/src/legacy-widget/WidgetEditDomManager.js

@@ -7,6 +7,7 @@ import { includes } from 'lodash';
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 class WidgetEditDomManager extends Component {
 	constructor() {
@@ -20,6 +21,9 @@ class WidgetEditDomManager extends Component {
 
 	componentDidMount() {
 		this.triggerWidgetEvent( 'widget-added' );
+		this.previousFormData = new window.FormData(
+			this.formRef.current
+		);
 	}
 
 	shouldComponentUpdate( nextProps ) {
@@ -29,6 +33,9 @@ class WidgetEditDomManager extends Component {
 			const widgetContent = this.widgetContentRef.current;
 			widgetContent.innerHTML = nextProps.form;
 			this.triggerWidgetEvent( 'widget-updated' );
+			this.previousFormData = new window.FormData(
+				this.formRef.current
+			);
 		}
 		return false;
 	}
@@ -42,7 +49,11 @@ class WidgetEditDomManager extends Component {
 						ref={ this.formRef }
 						method="post"
 						onBlur={ () => {
-							//console.log( 'blur' );
+							if ( this.shouldTriggerInstanceUpdate() ) {
+								this.props.onInstanceChange(
+									this.retrieveUpdatedInstance()
+								);
+							}
 						} }
 					>
 						<div
@@ -61,6 +72,35 @@ class WidgetEditDomManager extends Component {
 		);
 	}
 
+	shouldTriggerInstanceUpdate() {
+		if ( ! this.formRef.current ) {
+			return false;
+		}
+		if ( ! this.previousFormData ) {
+			return true;
+		}
+		const currentFormData = new window.FormData(
+			this.formRef.current
+		);
+		const currentFormDataKeys = Array.from( currentFormData.keys() );
+		const previousFormDataKeys = Array.from( this.previousFormData.keys() );
+		if (
+			currentFormDataKeys.length !== previousFormDataKeys.length
+		) {
+			return true;
+		}
+		for ( const rawKey of currentFormDataKeys ) {
+			if ( ! isShallowEqual(
+				currentFormData.getAll( rawKey ),
+				this.previousFormData.getAll( rawKey )
+			) ) {
+				this.previousFormData = currentFormData;
+				return true;
+			}
+		}
+		return false;
+	}
+
 	triggerWidgetEvent( event ) {
 		window.$( window.document ).trigger(
 			event,

packages/block-library/src/legacy-widget/WidgetEditHandler.js

@@ -5,8 +5,10 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { withInstanceId } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
 import WidgetEditDomManager from './WidgetEditDomManager';
 
 class WidgetEditHandler extends Component {
@@ -17,7 +19,7 @@ class WidgetEditHandler extends Component {
 			idBase: null,
 		};
 		this.instanceUpdating = null;
-		this.updateWidget = this.updateWidget.bind( this );
+		this.onInstanceChange = this.onInstanceChange.bind( this );
 		this.requestWidgetUpdater = this.requestWidgetUpdater.bind( this );
 	}
 
@@ -52,35 +54,35 @@ class WidgetEditHandler extends Component {
 			return null;
 		}
 		return (
-			<div className="wp-block-legacy-widget__edit-container">
+			<div
+				className="wp-block-legacy-widget__edit-container"
+				// Display none is used because when we switch from edit to preview,
+				// we don't want to unmounted component.
+				// Otherwise when we went back to edit again we wound need to trigger again
+				// all widgets events and some scripts may not deal well with this.
+				style={ {
+					display: this.props.isVisible ? 'block' : 'none',
+				} }
+			>
 				<WidgetEditDomManager
 					ref={ ( ref ) => {
 						this.widgetEditDomManagerRef = ref;
 					} }
+					onInstanceChange={ this.onInstanceChange }
 					widgetNumber={ instanceId * -1 }
 					id={ id }
 					idBase={ idBase }
 					form={ form }
 				/>
-				<Button
-					className="wp-block-legacy-widget__update-button"
-					isLarge
-					onClick={ this.updateWidget }
-				>
-					{ __( 'Update' ) }
-				</Button>
 			</div>
 		);
 	}
 
-	updateWidget() {
-		if ( this.widgetEditDomManagerRef ) {
-			const instanceChanges = this.widgetEditDomManagerRef.retrieveUpdatedInstance();
-			this.requestWidgetUpdater( instanceChanges, ( response ) => {
-				this.instanceUpdating = response.instance;
-				this.props.onInstanceChange( response.instance );
-			} );
-		}
+	onInstanceChange( instanceChanges ) {
+		this.requestWidgetUpdater( instanceChanges, ( response ) => {
+			this.instanceUpdating = response.instance;
+			this.props.onInstanceChange( response.instance );
+		} );
 	}
 
 	requestWidgetUpdater( instanceChanges, callback ) {

packages/block-library/src/legacy-widget/edit.js

@@ -100,19 +100,18 @@ class LegacyWidgetEdit extends Component {
 						{ widgetObject.description }
 					</PanelBody>
 				</InspectorControls>
-				{ ! isPreview && (
-					<WidgetEditHandler
-						identifier={ attributes.identifier }
-						instance={ attributes.instance }
-						onInstanceChange={
-							( newInstance ) => {
-								this.props.setAttributes( {
-									instance: newInstance,
-								} );
-							}
+				<WidgetEditHandler
+					isVisible={ ! isPreview }
+					identifier={ attributes.identifier }
+					instance={ attributes.instance }
+					onInstanceChange={
+						( newInstance ) => {
+							this.props.setAttributes( {
+								instance: newInstance,
+							} );
 						}
-					/>
-				) }
+					}
+				/>
 				{ isPreview && (
 					<ServerSideRender
 						className="wp-block-legacy-widget__preview"

test/integration/full-content/fixtures/core__legacy-widget.html

@@ -0,0 +1 @@
+<!-- wp:legacy-widget /-->

test/integration/full-content/fixtures/core__legacy-widget.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/legacy-widget",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__legacy-widget.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/legacy-widget",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

test/integration/full-content/fixtures/core__legacy-widget.serialized.html

@@ -0,0 +1 @@
+<!-- wp:legacy-widget /-->