Fix Legacy Widget block in Customizer

docs/manifest.json

@@ -1667,6 +1667,12 @@
 		"markdown_source": "../packages/warning/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/widgets",
+		"slug": "packages-widgets",
+		"markdown_source": "../packages/widgets/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/wordcount",
 		"slug": "packages-wordcount",

package.json

@@ -80,6 +80,7 @@
 		"@wordpress/url": "file:packages/url",
 		"@wordpress/viewport": "file:packages/viewport",
 		"@wordpress/warning": "file:packages/warning",
+		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount"
 	},
 	"devDependencies": {

packages/customize-widgets/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.2.6",
 		"lodash": "^4.17.19"
 	},

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -54,10 +54,11 @@ export default function SidebarBlockEditor( {
 		}
 
 		return {
+			...blockEditorSettings,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			mediaUpload: mediaUploadBlockEditor,
 		};
-	}, [] );
+	}, [ hasUploadPermissions, blockEditorSettings ] );
 	const parentContainer = document.getElementById(
 		'customize-theme-controls'
 	);

packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js

@@ -183,19 +183,33 @@ export default class SidebarAdapter {
 		return widgetId;
 	}
 
+	_removeWidget( widget ) {
+		const settingId = widgetIdToSettingId( widget.id );
+		this.allSettings.remove( settingId );
+	}
+
 	_updateWidget( widget ) {
 		const prevWidget = this.getWidget( widget.id );
 
-		// Bail out update.
+		// Bail out update if nothing changed.
 		if ( prevWidget === widget ) {
 			return widget.id;
 		}
 
-		const settingId = widgetIdToSettingId( widget.id );
-		this.allSettings( settingId ).set( widget.instance );
-		// TODO: what about the other stuff?
+		// Update existing setting if only the widget's instance changed.
+		if (
+			prevWidget.idBase &&
+			widget.idBase &&
+			prevWidget.idBase === widget.idBase
+		) {
+			const settingId = widgetIdToSettingId( widget.id );
+			this.allSettings( settingId ).set( widget.instance );
+			return widget.id;
+		}
 
-		return widget.id;
+		// Otherwise delete and re-create.
+		this._removeWidget( widget );
+		return this._createWidget( widget );
 	}
 
 	getWidget( widgetId ) {

packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js

@@ -27,7 +27,11 @@ function getWidgetId( block ) {
 function blockToWidget( block, existingWidget = null ) {
 	let widget;
 
-	if ( block.name === 'core/legacy-widget' ) {
+	const isValidLegacyWidgetBlock =
+		block.name === 'core/legacy-widget' &&
+		( block.attributes.id || block.attributes.instance );
+
+	if ( isValidLegacyWidgetBlock ) {
 		if ( block.attributes.id ) {
 			// Widget that does not extend WP_Widget.
 			widget = {
@@ -168,7 +172,7 @@ export default function useSidebarBlockEditor( sidebar ) {
 
 						// Bail out updates by returning the previous widgets.
 						// Deep equality is necessary until the block editor's internals changes.
-						if ( isEqual( nextBlock, prevBlock ) ) {
+						if ( isEqual( nextBlock, prevBlock ) && prevWidget ) {
 							return prevWidget;
 						}
 

packages/customize-widgets/src/filters/move-to-sidebar.js

@@ -9,14 +9,10 @@ import { without } from 'lodash';
 import { BlockControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
+import { MoveToWidgetArea } from '@wordpress/widgets';
 
 const { wp } = window;
 
-/**
- * Internal dependencies
- */
-import MoveToSidebar from '../components/move-to-sidebar';
-
 /**
  * Use the customize API to get the setting for the sidebar.
  * This returns a function that acts as a setter/getter in one for widget ids
@@ -83,9 +79,9 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent(
 			<>
 				<BlockEdit { ...props } />
 				<BlockControls>
-					<MoveToSidebar
-						sidebars={ getSidebars() }
-						currentSidebar={ currentSidebar }
+					<MoveToWidgetArea
+						widgetAreas={ getSidebars() }
+						currentWidgetArea={ currentSidebar }
 						onSelect={ ( newSidebarId ) => {
 							moveToSidebar(
 								widgetId,

packages/customize-widgets/src/index.js

@@ -6,6 +6,7 @@ import {
 	__experimentalGetCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
+import { registerLegacyWidgetVariations } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -34,6 +35,8 @@ export function initialize( editorName, blockEditorSettings ) {
 		} );
 	}
 
+	registerLegacyWidgetVariations( blockEditorSettings );
+
 	wp.customize.sectionConstructor.sidebar = getSidebarSection();
 	wp.customize.controlConstructor.sidebar_block_editor = getSidebarControl(
 		blockEditorSettings

packages/edit-widgets/package.json

@@ -49,6 +49,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
 		"rememo": "^3.0.0",

packages/edit-widgets/src/filters/move-to-widget-area.js

@@ -6,11 +6,11 @@ import { BlockControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
+import { MoveToWidgetArea } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
  */
-import MoveToWidgetArea from '../components/move-to-widget-area';
 import { store as editWidgetsStore } from '../store';
 
 const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent(

packages/edit-widgets/src/index.js

@@ -12,6 +12,7 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wordpress/core-data';
+import { registerLegacyWidgetVariations } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ import './store';
 import './filters';
 import * as widgetArea from './blocks/widget-area';
 import Layout from './components/layout';
-import registerLegacyWidgetVariations from './register-legacy-widget-variations';
 
 /**
  * Initializes the block editor in the widgets screen.

packages/widgets/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/widgets/CHANGELOG.md

@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.

packages/widgets/README.md

@@ -0,0 +1,17 @@
+# Widgets
+
+This package contains common functionality used by the widgets block editor in the Widgets screen and the Customizer.
+
+> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/widgets
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/widgets/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@wordpress/widgets",
+	"version": "1.0.0-prerelease",
+	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [ "wordpress" ],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/widgets/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/widgets"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.13.10",
+		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
+		"@wordpress/core-data": "file:../core-data",
+		"@wordpress/data": "file:../data",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/widgets/src/components/index.js

@@ -0,0 +1 @@
+export { default as MoveToWidgetArea } from './move-to-widget-area';

packages/widgets/src/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export { default as registerLegacyWidgetVariations } from './register-legacy-widget-variations';