Widgets editor: Fix dirty state after adding new block (#32573)

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

@@ -130,6 +130,16 @@ describe( 'Widgets screen', () => {
 	}
 
 	it( 'Should insert content using the global inserter', async () => {
+		const updateButton = await find( {
+			role: 'button',
+			name: 'Update',
+		} );
+
+		// Update button should start out disabled.
+		expect(
+			await updateButton.evaluate( ( button ) => button.disabled )
+		).toBe( true );
+
 		const widgetAreas = await findAll( {
 			role: 'group',
 			name: 'Block: Widget Area',
@@ -146,6 +156,11 @@ describe( 'Widgets screen', () => {
 
 		await addParagraphBlock.click();
 
+		// Adding content should enable the Update button.
+		expect(
+			await updateButton.evaluate( ( button ) => button.disabled )
+		).toBe( false );
+
 		let addedParagraphBlockInFirstWidgetArea = await find(
 			{
 				name: /^Empty block/,
@@ -215,6 +230,12 @@ describe( 'Widgets screen', () => {
 		// await page.keyboard.type( 'Third Paragraph' );
 
 		await saveWidgets();
+
+		// The Update button should be disabled again after saving.
+		expect(
+			await updateButton.evaluate( ( button ) => button.disabled )
+		).toBe( true );
+
 		const serializedWidgetAreas = await getSerializedWidgetAreas();
 		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
 		Object {

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

@@ -204,12 +204,9 @@ export function* saveWidgetArea( widgetAreaId ) {
 		const widget = preservedRecords[ i ];
 		const { block, position } = batchMeta[ i ];
 
-		yield dispatch(
-			'core/block-editor',
-			'updateBlockAttributes',
-			block.clientId,
-			{ __internalWidgetId: widget.id }
-		);
+		// Set __internalWidgetId on the block. This will be persisted to the
+		// store when we dispatch receiveEntityRecords( post ) below.
+		post.blocks[ position ].attributes.__internalWidgetId = widget.id;
 
 		const error = yield select(
 			'core',