[edit-widgets beta] Fix legacy widgets preview (#24861)

packages/block-library/src/legacy-widget/block.json

@@ -5,6 +5,9 @@
 		"widgetClass": {
 			"type": "string"
 		},
+		"widgetId": {
+			"type": "string"
+		},
 		"idBase": {
 			"type": "string"
 		},

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

@@ -22,6 +22,9 @@ class LegacyWidgetEditDomManager extends Component {
 
 	componentDidMount() {
 		this.triggerWidgetEvent( 'widget-added' );
+		if ( this.props.onMount ) {
+			this.props.onMount( this.getFormData() );
+		}
 	}
 
 	shouldComponentUpdate( nextProps ) {

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

@@ -107,6 +107,7 @@ class LegacyWidgetEditHandler extends Component {
 							this.widgetEditDomManagerRef = ref;
 						} }
 						onInstanceChange={ this.onInstanceChange }
+						onMount={ this.props.onFormMount }
 						number={ number ? number : instanceId * -1 }
 						id={ id }
 						idBase={ idBase }

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

@@ -9,7 +9,7 @@ import { get, omit } from 'lodash';
 import { Component } from '@wordpress/element';
 import { Button, PanelBody, ToolbarGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { update } from '@wordpress/icons';
@@ -40,6 +40,7 @@ class LegacyWidgetEdit extends Component {
 			isSelected,
 			prerenderedEditForm,
 			setAttributes,
+			setWidgetId,
 			widgetId,
 		} = this.props;
 		const { isPreview, hasEditForm } = this.state;
@@ -60,9 +61,11 @@ class LegacyWidgetEdit extends Component {
 							isReferenceWidget,
 							id_base: idBase,
 						} = availableLegacyWidgets[ newWidget ];
+						if ( isReferenceWidget ) {
+							setWidgetId( newWidget );
+						}
 						setAttributes( {
 							instance: {},
-							id: isReferenceWidget ? newWidget : undefined,
 							idBase,
 							widgetClass: isReferenceWidget
 								? undefined
@@ -132,6 +135,18 @@ class LegacyWidgetEdit extends Component {
 						widgetName={ get( widgetObject, [ 'name' ] ) }
 						widgetClass={ attributes.widgetClass }
 						instance={ attributes.instance }
+						onFormMount={ ( formData ) => {
+							// Function-based widgets don't come with an object of settings, only
+							// with a pre-rendered HTML form. Extracting settings from that HTML
+							// before this stage is not trivial (think embedded <script>). An alternative
+							// proposed here serializes the form back into widget settings immediately after
+							// it's mounted.
+							if ( ! attributes.widgetClass ) {
+								this.props.setAttributes( {
+									instance: formData,
+								} );
+							}
+						} }
 						onInstanceChange={ ( newInstance, newHasEditForm ) => {
 							if ( newInstance ) {
 								this.props.setAttributes( {
@@ -172,12 +187,15 @@ class LegacyWidgetEdit extends Component {
 	}
 
 	renderWidgetPreview() {
-		const { attributes } = this.props;
+		const { widgetId, attributes } = this.props;
 		return (
 			<ServerSideRender
 				className="wp-block-legacy-widget__preview"
 				block="core/legacy-widget"
-				attributes={ omit( attributes, 'id' ) }
+				attributes={ {
+					widgetId,
+					...omit( attributes, 'id' ),
+				} }
 			/>
 		);
 	}
@@ -197,6 +215,17 @@ export default withSelect( ( select, { clientId } ) => {
 		hasPermissionsToManageWidgets,
 		availableLegacyWidgets,
 		widgetId,
-		prerenderedEditForm: widget.rendered_form,
+		prerenderedEditForm: widget ? widget.rendered_form : '',
 	};
-} )( LegacyWidgetEdit );
+} )(
+	withDispatch( ( dispatch, { clientId } ) => {
+		return {
+			setWidgetId( id ) {
+				dispatch( 'core/edit-widgets' ).setWidgetIdForClientId(
+					clientId,
+					id
+				);
+			},
+		};
+	} )( LegacyWidgetEdit )
+);

packages/block-library/src/legacy-widget/index.php

@@ -74,8 +74,8 @@ function block_core_legacy_widget_render_widget_by_id( $id ) {
 function render_block_core_legacy_widget( $attributes ) {
 	$id           = null;
 	$widget_class = null;
-	if ( isset( $attributes['id'] ) ) {
-		$id = $attributes['id'];
+	if ( isset( $attributes['widgetId'] ) ) {
+		$id = $attributes['widgetId'];
 	}
 	if ( isset( $attributes['widgetClass'] ) ) {
 		$widget_class = $attributes['widgetClass'];

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

@@ -109,3 +109,18 @@ export function* saveWidgetAreas( widgetAreas ) {
 		buildWidgetAreasQuery()
 	);
 }
+
+/**
+ * Sets the clientId stored for a particular widgetId.
+ *
+ * @param  {number} clientId  Client id.
+ * @param  {number} widgetId  Widget id.
+ * @return {Object}           Action.
+ */
+export function setWidgetIdForClientId( clientId, widgetId ) {
+	return {
+		type: 'SET_WIDGET_ID_FOR_CLIENT_ID',
+		clientId,
+		widgetId,
+	};
+}

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

@@ -17,6 +17,13 @@ export function mapping( state, action ) {
 	if ( type === 'SET_WIDGET_TO_CLIENT_ID_MAPPING' ) {
 		return rest.mapping;
 	}
+	if ( type === 'SET_WIDGET_ID_FOR_CLIENT_ID' ) {
+		const newMapping = {
+			...state,
+		};
+		newMapping[ action.widgetId ] = action.clientId;
+		return newMapping;
+	}
 
 	return state || {};
 }

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

@@ -28,6 +28,12 @@ export const getWidgets = createRegistrySelector( ( select ) => () => {
 	);
 } );
 
+/**
+ * Returns API widget data for a particular widget ID.
+ *
+ * @param  {number} id  Widget ID
+ * @return {Object}     API widget data for a particular widget ID.
+ */
 export const getWidget = createRegistrySelector(
 	( select ) => ( state, id ) => {
 		const widgets = select( 'core/edit-widgets' ).getWidgets();

phpunit/class-rest-sidebars-controller-test.php

@@ -274,7 +274,7 @@ public function test_get_items_active_sidebar_with_widgets() {
 	}
 
 	/**
-	 *
+	 * Test a GET request in edit context. In particular, we expect rendered_form to be served correctly.
 	 */
 	public function test_get_items_active_sidebar_with_widgets_edit_context() {
 		$this->setup_widget(