Legacy Widget: Improve backwards compatibility

packages/block-library/package.json

@@ -58,6 +58,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
 		"fast-average-color": "4.3.0",
+		"jquery": "^3.5.1",
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { debounce } from 'lodash';
+import $ from 'jquery';
 
 /**
  * WordPress dependencies
@@ -14,60 +15,32 @@ import {
 	useRef,
 	useState,
 	useCallback,
-	forwardRef,
 	RawHTML,
 } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { Button } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 
 export default function Form( { id, idBase, instance, setInstance } ) {
-	const ref = useRef();
-
 	const { html, setFormData } = useForm( {
 		id,
 		idBase,
 		instance,
 		setInstance,
 	} );
 
-	const onSubmit = useCallback(
-		( event ) => {
-			event.preventDefault();
-			if ( id ) {
-				setFormData( serializeForm( ref.current ) );
-			}
-		},
-		[ id ]
-	);
-
-	const onChange = useCallback(
-		debounce( () => {
-			if ( idBase ) {
-				setFormData( serializeForm( ref.current ) );
-			}
-		}, 300 ),
-		[ idBase ]
-	);
+	const setFormDataDebounced = useCallback( debounce( setFormData, 300 ), [
+		setFormData,
+	] );
 
 	return (
-		<div className="widget open">
-			<div className="widget-inside">
-				<ObservableForm
-					ref={ ref }
-					className="form"
-					method="post"
-					onSubmit={ onSubmit }
-					onChange={ onChange }
-				>
-					<RawHTML className="widget-content">{ html }</RawHTML>
-					{ id && (
-						<Button type="submit" isPrimary>
-							{ __( 'Save' ) }
-						</Button>
-					) }
-				</ObservableForm>
-			</div>
-		</div>
+		<Control
+			id={ id }
+			idBase={ idBase }
+			html={ html }
+			onChange={ setFormDataDebounced }
+			onSave={ setFormData }
+		/>
 	);
 }
 
@@ -154,26 +127,109 @@ function useForm( { id, idBase, instance, setInstance } ) {
 	return { html, setFormData };
 }
 
-function serializeForm( form ) {
-	return new window.URLSearchParams(
-		Array.from( new window.FormData( form ) )
-	).toString();
-}
+function Control( { id, idBase, html, onChange, onSave } ) {
+	const controlRef = useRef();
+	const formRef = useRef();
 
-const ObservableForm = forwardRef( ( { onChange, ...props }, ref ) => {
-	// React won't call the form's onChange handler because it doesn't know
-	// about the <input>s that we add using dangerouslySetInnerHTML. We work
-	// around this by not using React's event system.
+	// Trigger widget-added when widget is ready and widget-updated when widget
+	// changes. This event is what widgets' scripts use to initialize, attach
+	// events, etc.
+	const hasBeenAdded = useRef( false );
+	useEffect( () => {
+		if ( html ) {
+			$( document ).trigger(
+				hasBeenAdded.current ? 'widget-updated' : 'widget-added',
+				[ $( controlRef.current ) ]
+			);
+			hasBeenAdded.current = true;
+		}
+	}, [
+		html,
+		// Include id and idBase in the deps so that widget-updated is triggered
+		// if they change.
+		id,
+		idBase,
+	] );
 
+	// Use jQuery change event instead of the native change event because many
+	// widgets use jQuery's trigger() to trigger an update.
 	useEffect( () => {
-		const handler = () => onChange( ref.current );
-		ref.current.addEventListener( 'change', handler );
-		ref.current.addEventListener( 'input', handler );
-		return () => {
-			ref.current.removeEventListener( 'change', handler );
-			ref.current.removeEventListener( 'input', handler );
-		};
+		const handler = () => onChange( serializeForm( formRef.current ) );
+		$( formRef.current ).on( 'change', null, handler );
+		return () => $( formRef.current ).off( 'change', null, handler );
 	}, [ onChange ] );
 
-	return <form ref={ ref } { ...props } />;
-} );
+	// Non-multi widgets can be saved via a Save button.
+	const handleSubmit = ( event ) => {
+		event.preventDefault();
+		onSave( serializeForm( event.target ) );
+	};
+
+	// We can't use the real widget number as this is calculated by the server
+	// and we may not ever *actually* save this widget. Instead, use a fake but
+	// unique number.
+	const number = useInstanceId( Control );
+
+	return (
+		<div ref={ controlRef } className="widget open">
+			<div className="widget-inside">
+				<form
+					ref={ formRef }
+					className="form"
+					method="post"
+					onSubmit={ handleSubmit }
+				>
+					{ /* Many widgets expect these hidden inputs to exist in the DOM. */ }
+					<input
+						type="hidden"
+						name="widget-id"
+						className="widget-id"
+						value={ id ?? `${ idBase }-${ number }` }
+					/>
+					<input
+						type="hidden"
+						name="id_base"
+						className="id_base"
+						value={ idBase ?? id }
+					/>
+					<input
+						type="hidden"
+						name="widget-width"
+						className="widget-width"
+						value="250"
+					/>
+					<input
+						type="hidden"
+						name="widget-height"
+						className="widget-height"
+						value="200"
+					/>
+					<input
+						type="hidden"
+						name="widget_number"
+						className="widget_number"
+						value={ idBase ? number : '' }
+					/>
+					<input
+						type="hidden"
+						name="add_new"
+						className="add_new"
+						value=""
+					/>
+					<RawHTML className="widget-content">{ html }</RawHTML>
+					{ id && (
+						<Button type="submit" isPrimary>
+							{ __( 'Save' ) }
+						</Button>
+					) }
+				</form>
+			</div>
+		</div>
+	);
+}
+
+function serializeForm( form ) {
+	return new window.URLSearchParams(
+		Array.from( new window.FormData( form ) )
+	).toString();
+}

packages/e2e-tests/specs/widgets/adding-widgets.test.js

@@ -461,7 +461,12 @@ describe( 'Widgets screen', () => {
 			'[aria-label="Block: Widget Area"][role="group"]'
 		);
 
-		const legacyWidget = await page.waitForSelector(
+		// Wait for the widget's form to load.
+		await page.waitForSelector(
+			'[data-block][data-type="core/legacy-widget"] input'
+		);
+
+		const legacyWidget = await page.$(
 			'[data-block][data-type="core/legacy-widget"]'
 		);
 
@@ -491,8 +496,13 @@ describe( 'Widgets screen', () => {
 		);
 		await editButton.click();
 
-		// TODO: Should query this with role and label.
-		const titleInput = await legacyWidget.$( 'input' );
+		const [ titleLabel ] = await legacyWidget.$x(
+			'//label[contains(text(), "Title")]'
+		);
+		const titleInputId = await titleLabel.evaluate( ( node ) =>
+			node.getAttribute( 'for' )
+		);
+		const titleInput = await page.$( `#${ titleInputId }` );
 		await titleInput.type( 'Search Title' );
 
 		// Trigger the toolbar to appear.