From e2d5adf2953a235f7c44393791bbdd336f2fedb6 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 1 Feb 2021 13:23:28 +0800
Subject: [PATCH 01/18] Add experimental flag and enable widgets screen in
 customizer

---
 lib/class-wp-sidebar-block-editor-control.php | 19 ++++
 lib/class-wp-widget-block.php                 |  9 ++
 lib/experiments-page.php                      | 11 +++
 lib/load.php                                  |  1 +
 lib/widgets-customize.php                     | 95 +++++++++++++++++++
 lib/widgets-page.php                          |  4 +-
 .../legacy-widget/edit/widget-preview.js      |  2 +-
 .../src/components/header/style.scss          |  4 +
 .../src/components/layout/index.js            |  9 +-
 .../src/components/layout/interface.js        | 17 ++--
 .../src/components/sidebar/index.js           |  7 +-
 packages/edit-widgets/src/index.js            | 21 ++++
 packages/edit-widgets/src/style.scss          | 41 ++++++++
 13 files changed, 225 insertions(+), 15 deletions(-)
 create mode 100644 lib/class-wp-sidebar-block-editor-control.php
 create mode 100644 lib/widgets-customize.php

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
new file mode 100644
index 0000000000000..49c2530d729cd
--- /dev/null
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -0,0 +1,19 @@
+<?php
+
+class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
+	public function enqueue() {
+		gutenberg_widgets_init( 'gutenberg_customizer' );
+	}
+
+	public function render_content() {
+		?>
+		<input
+			id="_customize-input-gutenberg_widget_blocks"
+			type="hidden"
+			value="<?php echo esc_attr( $this->value() ); ?>"
+			<?php $this->link(); ?>
+		/>
+		<?php
+		the_gutenberg_widgets( 'gutenberg_customizer' );
+	}
+}
diff --git a/lib/class-wp-widget-block.php b/lib/class-wp-widget-block.php
index cc6ab5f174e01..aae904054c346 100644
--- a/lib/class-wp-widget-block.php
+++ b/lib/class-wp-widget-block.php
@@ -39,6 +39,7 @@ public function __construct() {
 		);
 		parent::__construct( 'block', __( 'Block', 'gutenberg' ), $widget_ops, $control_ops );
 		add_action( 'is_wide_widget_in_customizer', array( $this, 'set_is_wide_widget_in_customizer' ), 10, 2 );
+		add_action( 'customize_controls_print_footer_scripts', array( $this, 'output_widget_control_templates' ) );
 	}
 
 	/**
@@ -127,4 +128,12 @@ public function set_is_wide_widget_in_customizer( $is_wide, $widget_id ) {
 		return $is_wide;
 	}
 
+	/**
+	 * Renders the widget form control templates into the DOM.
+	 */
+	public function output_widget_control_templates() {
+		?>
+		<div id="widgets-left"><!-- compatibility with JS which looks for widget templates here --></div>
+		<?php
+	}
 }
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index fa35fa81ddfdc..50f7632e5221e 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -51,6 +51,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-navigation',
 		)
 	);
+	add_settings_field(
+		'gutenberg-widgets-in-customizer',
+		__( 'Widgets', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Widgets screen in Customizer', 'gutenberg' ),
+			'id'    => 'gutenberg-widgets-in-customizer',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/load.php b/lib/load.php
index 7772cac90e15e..ffdd3212f40e9 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -106,6 +106,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
 require __DIR__ . '/widgets.php';
+require __DIR__ . '/widgets-customize.php';
 require __DIR__ . '/navigation.php';
 require __DIR__ . '/navigation-page.php';
 require __DIR__ . '/experiments-page.php';
diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
new file mode 100644
index 0000000000000..8d8a87ddd6536
--- /dev/null
+++ b/lib/widgets-customize.php
@@ -0,0 +1,95 @@
+<?php
+
+/**
+ * The sanitization function for incoming values for the `gutenberg_widget_blocks` setting.
+ * It's a JSON string, so it decodes it and encodes it again to make sure it's valid.
+ *
+ * @param string $value The incoming value.
+ */
+function gutenberg_customize_sanitize( $value ) {
+	return json_encode( json_decode( $value ) );
+}
+
+/**
+ * Gutenberg's Customize Register.
+ *
+ * Adds a section to the Customizer for editing widgets with Gutenberg.
+ *
+ * @param \WP_Customize_Manager $wp_customize An instance of the class that controls most of the Theme Customization API for WordPress 3.4 and newer.
+ */
+function gutenberg_widgets_customize_register( $manager ) {
+	require_once __DIR__ . '/class-wp-sidebar-block-editor-control.php';
+
+	$manager->add_setting(
+		'gutenberg_widget_blocks',
+		array(
+			'default'           => '{}',
+			'type'              => 'gutenberg_widget_blocks',
+			'capability'        => 'edit_theme_options',
+			'transport'         => 'postMessage',
+			'sanitize_callback' => 'gutenberg_customize_sanitize',
+		)
+	);
+
+	$manager->add_section(
+		'gutenberg_widget_blocks',
+		array( 'title' => __( 'Widget Blocks', 'gutenberg' ) )
+	);
+	$manager->add_control(
+		new WP_Sidebar_Block_Editor_Control(
+			$manager,
+			'gutenberg_widget_blocks',
+			array(
+				'section'  => 'gutenberg_widget_blocks',
+				'settings' => 'gutenberg_widget_blocks',
+			)
+		)
+	);
+}
+
+/**
+ * Removes the core 'Widgets' panel from the Customizer if block based widgets are enabled.
+ *
+ * @param array $components Core Customizer components list.
+ * @return array (Maybe) modified components list.
+ */
+function gutenberg_remove_widgets_panel( $components ) {
+	if ( ! gutenberg_use_widgets_block_editor() ) {
+		return $components;
+	}
+
+	$i = array_search( 'widgets', $components, true );
+	if ( false !== $i ) {
+		unset( $components[ $i ] );
+	}
+	return $components;
+}
+
+/**
+ * Filters the Customizer widget settings arguments.
+ * This is needed because the Customizer registers settings for the raw registered widgets, without going through the `sidebars_widgets` filter.
+ * The `WP_Customize_Widgets` class expects sidebars to have an array of widgets registered, not a post ID.
+ * This results in the value passed to `sanitize_js_callback` being `null` and throwing an error.
+ *
+ * TODO: Figure out why core is not running the `sidebars_widgets` filter for the relevant part of the code.
+ * Then, either fix it or change this filter to parse the post IDs and then pass them to the original `sanitize_js_callback`.
+ *
+ * @param  array  $args Array of Customizer setting arguments.
+ * @param  string $id Widget setting ID.
+ * @return array  Maybe modified array of Customizer setting arguments.
+ */
+function filter_widget_customizer_setting_args( $args, $id = null ) {
+	// Posts won't have a settings ID like widgets. We can use that to remove the sanitization callback.
+	if ( ! isset( $id ) ) {
+		unset( $args['sanitize_js_callback'] );
+	}
+
+	return $args;
+}
+
+if (gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' )) {
+	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
+	add_filter( 'customize_loaded_components', 'gutenberg_remove_widgets_panel' );
+	add_filter( 'widget_customizer_setting_args', 'filter_widget_customizer_setting_args' );
+}
+
diff --git a/lib/widgets-page.php b/lib/widgets-page.php
index d31b814c72e47..7cc20d54c9b1b 100644
--- a/lib/widgets-page.php
+++ b/lib/widgets-page.php
@@ -37,11 +37,11 @@ function gutenberg_widgets_init( $hook ) {
 		);
 		return;
 	}
-	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets' ), true ) ) {
+	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets', 'gutenberg_customizer' ), true ) ) {
 		return;
 	}
 
-	$initializer_name = 'initialize';
+	$initializer_name = $hook === 'gutenberg_customizer' ? 'initializeCustomizer' : 'initialize';
 
 	$settings = array_merge(
 		gutenberg_get_common_block_editor_settings(),
diff --git a/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js b/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
index 7cb6583644a67..e660d5dbedf86 100644
--- a/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
+++ b/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
@@ -15,7 +15,7 @@ function WidgetPreview( { widgetAreaId, attributes, hidden, ...props } ) {
 	const HEIGHT_MARGIN = 20;
 	const [ height, setHeight ] = useState( DEFAULT_HEIGHT );
 	const iframeRef = useRef();
-	const currentUrl = document.location.href;
+	const currentUrl = `${ document.location.protocol }//${ document.location.host }/wp-admin/themes.php?page=gutenberg-widgets`;
 	const iframeUrl = addQueryArgs( currentUrl, {
 		'widget-preview': {
 			...attributes,
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index ddfd782a910fa..5e1ac9a4c9157 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -21,6 +21,10 @@
 	font-size: 20px;
 	padding: 0;
 	margin: 0 20px 0 0;
+
+	#customize-theme-controls & {
+		display: none;
+	}
 }
 
 .edit-widgets-header__actions {
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index 8ce67108fef81..ba9e69c9297e3 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/packages/edit-widgets/src/components/layout/index.js
@@ -12,13 +12,16 @@ import Sidebar from '../sidebar';
 import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 
-function Layout( { blockEditorSettings } ) {
+function Layout( { blockEditorSettings, isInCustomizer } ) {
 	return (
 		<WidgetAreasBlockEditorProvider
 			blockEditorSettings={ blockEditorSettings }
 		>
-			<Interface blockEditorSettings={ blockEditorSettings } />
-			<Sidebar />
+			<Interface
+				blockEditorSettings={ blockEditorSettings }
+				isInCustomizer={ isInCustomizer }
+			/>
+			<Sidebar isInCustomizer={ isInCustomizer } />
 			<Popover.Slot />
 			<PluginArea />
 			<UnsavedChangesWarning />
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index ad9fed9bfcccf..e81db5a48288a 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -37,7 +37,7 @@ const interfaceLabels = {
 	sidebar: __( 'Widgets settings' ),
 };
 
-function Interface( { blockEditorSettings } ) {
+function Interface( { blockEditorSettings, isInCustomizer } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const { setIsInserterOpened, closeGeneralSidebar } = useDispatch(
@@ -45,12 +45,15 @@ function Interface( { blockEditorSettings } ) {
 	);
 	const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
 
-	const { hasSidebarEnabled, isInserterOpened } = useSelect( ( select ) => ( {
-		hasSidebarEnabled: !! select(
-			interfaceStore
-		).getActiveComplementaryArea( editWidgetsStore.name ),
-		isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
-	} ) );
+	const { hasSidebarEnabled, isInserterOpened } = useSelect(
+		( select ) => ( {
+			hasSidebarEnabled: !! select(
+				interfaceStore
+			).getActiveComplementaryArea( editWidgetsStore.name ),
+			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
+		} ),
+		[]
+	);
 	const editorStylesRef = useEditorStyles( blockEditorSettings.styles );
 
 	// Inserter and Sidebars are mutually exclusive
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index 945dbf1b55bf5..78ae22e49ab09 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -57,7 +57,10 @@ function ComplementaryAreaTab( { identifier, label, isActive } ) {
 	);
 }
 
-export default function Sidebar() {
+export default function Sidebar( { isInCustomizer } ) {
+	const isSideBarActiveByDefault =
+		SIDEBAR_ACTIVE_BY_DEFAULT && ! isInCustomizer;
+
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const {
 		currentArea,
@@ -168,7 +171,7 @@ export default function Sidebar() {
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+			isActiveByDefault={ isSideBarActiveByDefault }
 		>
 			{ currentArea === WIDGET_AREAS_IDENTIFIER && (
 				<WidgetAreas
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index e2d3a4813fd94..fbef4258faeb2 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -44,6 +44,27 @@ export function initialize( id, settings ) {
 	);
 }
 
+export function initializeCustomizer( id, settings ) {
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( block ) => ! [ 'core/more' ].includes( block.name )
+	);
+	registerCoreBlocks( coreBlocks );
+
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks();
+	}
+	registerBlock( createLegacyWidget( settings ) );
+	registerBlock( widgetArea );
+
+	// The code executes before the target DOM has been attached, so we use a hacky timeout to delay the render
+	setTimeout( () => {
+		render(
+			<Layout blockEditorSettings={ settings } isInCustomizer />,
+			document.getElementById( id )
+		);
+	}, 0 );
+}
+
 /**
  * Function to register an individual block.
  *
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 3e3e7ed2e04a7..82196dd3ad981 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -46,6 +46,12 @@ body.widgets-php {
 	.interface-interface-skeleton__content {
 		background-color: #f1f1f1;
 	}
+
+	#customize-theme-controls & {
+		min-height: unset;
+		position: unset;
+		margin: -12px;
+	}
 }
 
 .blocks-widgets-container .editor-style-wrapper {
@@ -57,5 +63,40 @@ body.widgets-php {
 	display: none;
 }
 
+// stylelint-disable-next-line selector-id-pattern
+#customize-theme-controls #sub-accordion-section-gutenberg_widget_blocks.customize-pane-child.open {
+	overflow: visible;
+}
+
+#customize-theme-controls {
+	.interface-interface-skeleton {
+		top: 0;
+		left: 0;
+		position: relative;
+	}
+
+	.interface-interface-skeleton__sidebar {
+		position: absolute !important;
+	}
+}
+
+#widgets-left#widgets-left {
+	padding: 0;
+
+	.block-editor-inserter__menu {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.block-editor-inserter__main-area {
+		background: #fff;
+	}
+}
+
+// stylelint-disable-next-line selector-id-pattern
+#sub-accordion-section-gutenberg_widget_blocks {
+	.customize-section-title {
+		z-index: 35 !important;
+	}
+}
 
 @include wordpress-admin-schemes();

From 13bdd01d85ade8330cd331be93b82f3c04a8ad03 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 1 Feb 2021 14:20:52 +0800
Subject: [PATCH 02/18] Use a Control

---
 lib/class-wp-sidebar-block-editor-control.php |  2 ++
 .../src/create-customizer-control.js          | 23 +++++++++++++++++++
 packages/edit-widgets/src/index.js            | 11 ++++-----
 3 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 packages/edit-widgets/src/create-customizer-control.js

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index 49c2530d729cd..256b3ca6025fa 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -1,6 +1,8 @@
 <?php
 
 class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
+	public $type = 'sidebar_block_editor';
+
 	public function enqueue() {
 		gutenberg_widgets_init( 'gutenberg_customizer' );
 	}
diff --git a/packages/edit-widgets/src/create-customizer-control.js b/packages/edit-widgets/src/create-customizer-control.js
new file mode 100644
index 0000000000000..2d5c223aca59d
--- /dev/null
+++ b/packages/edit-widgets/src/create-customizer-control.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Layout from './components/layout';
+
+const { wp } = window;
+
+const createCustomizerControl = ( { settings } ) =>
+	wp.customize.Control.extend( {
+		ready() {
+			render(
+				<Layout blockEditorSettings={ settings } isInCustomizer />,
+				this.container[ 0 ]
+			);
+		},
+	} );
+
+export default createCustomizerControl;
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index fbef4258faeb2..4e284d17b2e5f 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -20,6 +20,7 @@ import './hooks';
 import { create as createLegacyWidget } from './blocks/legacy-widget';
 import * as widgetArea from './blocks/widget-area';
 import Layout from './components/layout';
+import createCustomizerControl from './create-customizer-control';
 
 /**
  * Initializes the block editor in the widgets screen.
@@ -56,13 +57,9 @@ export function initializeCustomizer( id, settings ) {
 	registerBlock( createLegacyWidget( settings ) );
 	registerBlock( widgetArea );
 
-	// The code executes before the target DOM has been attached, so we use a hacky timeout to delay the render
-	setTimeout( () => {
-		render(
-			<Layout blockEditorSettings={ settings } isInCustomizer />,
-			document.getElementById( id )
-		);
-	}, 0 );
+	window.wp.customize.controlConstructor.sidebar_block_editor = createCustomizerControl(
+		{ settings }
+	);
 }
 
 /**

From ebcfd74c0f24860582f5d82a978004124e692b43 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 2 Feb 2021 17:54:20 +0800
Subject: [PATCH 03/18] Remove needless input

---
 lib/class-wp-sidebar-block-editor-control.php | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index 256b3ca6025fa..7d41920cd3e69 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -8,14 +8,6 @@ public function enqueue() {
 	}
 
 	public function render_content() {
-		?>
-		<input
-			id="_customize-input-gutenberg_widget_blocks"
-			type="hidden"
-			value="<?php echo esc_attr( $this->value() ); ?>"
-			<?php $this->link(); ?>
-		/>
-		<?php
 		the_gutenberg_widgets( 'gutenberg_customizer' );
 	}
 }

From 8b43bd4ff038a69683ef66085d80fa19ee4bd560 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 2 Feb 2021 17:55:01 +0800
Subject: [PATCH 04/18] Remove the widgets-left container for now

---
 lib/class-wp-widget-block.php | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/lib/class-wp-widget-block.php b/lib/class-wp-widget-block.php
index aae904054c346..7057215de9171 100644
--- a/lib/class-wp-widget-block.php
+++ b/lib/class-wp-widget-block.php
@@ -39,7 +39,6 @@ public function __construct() {
 		);
 		parent::__construct( 'block', __( 'Block', 'gutenberg' ), $widget_ops, $control_ops );
 		add_action( 'is_wide_widget_in_customizer', array( $this, 'set_is_wide_widget_in_customizer' ), 10, 2 );
-		add_action( 'customize_controls_print_footer_scripts', array( $this, 'output_widget_control_templates' ) );
 	}
 
 	/**
@@ -127,13 +126,4 @@ public function set_is_wide_widget_in_customizer( $is_wide, $widget_id ) {
 
 		return $is_wide;
 	}
-
-	/**
-	 * Renders the widget form control templates into the DOM.
-	 */
-	public function output_widget_control_templates() {
-		?>
-		<div id="widgets-left"><!-- compatibility with JS which looks for widget templates here --></div>
-		<?php
-	}
 }

From 978a1838685d63fa8e3104cbebc32c2029ec6be1 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 3 Feb 2021 13:45:23 +0800
Subject: [PATCH 05/18] Fix lint errors

---
 lib/class-wp-sidebar-block-editor-control.php | 21 +++++++++
 lib/widgets-customize.php                     | 43 +++++++++----------
 lib/widgets-page.php                          |  4 +-
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index 7d41920cd3e69..ff1fbedb39d8b 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -1,12 +1,33 @@
 <?php
+/**
+ * Widget API: WP_Sidebar_Block_Editor_Control class.
+ *
+ * @package Gutenberg
+ */
 
+/**
+ * Core class used to implement the widgets block editor control in the customizer.
+ *
+ * @see WP_Customize_Control
+ */
 class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
+	/**
+	 * The control type.
+	 *
+	 * @var string
+	 */
 	public $type = 'sidebar_block_editor';
 
+	/**
+	 * Enqueue the scripts and styles.
+	 */
 	public function enqueue() {
 		gutenberg_widgets_init( 'gutenberg_customizer' );
 	}
 
+	/**
+	 * Render the widgets block editor container.
+	 */
 	public function render_content() {
 		the_gutenberg_widgets( 'gutenberg_customizer' );
 	}
diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index 8d8a87ddd6536..d82fc233cb9f3 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -1,4 +1,9 @@
 <?php
+/**
+ * Bootstrapping the Gutenberg widgets editor in the customizer.
+ *
+ * @package gutenberg
+ */
 
 /**
  * The sanitization function for incoming values for the `gutenberg_widget_blocks` setting.
@@ -15,11 +20,25 @@ function gutenberg_customize_sanitize( $value ) {
  *
  * Adds a section to the Customizer for editing widgets with Gutenberg.
  *
- * @param \WP_Customize_Manager $wp_customize An instance of the class that controls most of the Theme Customization API for WordPress 3.4 and newer.
+ * @param \WP_Customize_Manager $manager An instance of the class that controls most of the Theme Customization API for WordPress 3.4 and newer.
  */
 function gutenberg_widgets_customize_register( $manager ) {
+	if ( ! gutenberg_use_widgets_block_editor() ) {
+		return;
+	}
+
 	require_once __DIR__ . '/class-wp-sidebar-block-editor-control.php';
 
+	// Remove the original "Widgets" section.
+	foreach ( $manager->sections() as $section ) {
+		if (
+			$section instanceof WP_Customize_Sidebar_Section
+		) {
+			$manager->remove_section( $section->id );
+			break;
+		}
+	}
+
 	$manager->add_setting(
 		'gutenberg_widget_blocks',
 		array(
@@ -47,24 +66,6 @@ function gutenberg_widgets_customize_register( $manager ) {
 	);
 }
 
-/**
- * Removes the core 'Widgets' panel from the Customizer if block based widgets are enabled.
- *
- * @param array $components Core Customizer components list.
- * @return array (Maybe) modified components list.
- */
-function gutenberg_remove_widgets_panel( $components ) {
-	if ( ! gutenberg_use_widgets_block_editor() ) {
-		return $components;
-	}
-
-	$i = array_search( 'widgets', $components, true );
-	if ( false !== $i ) {
-		unset( $components[ $i ] );
-	}
-	return $components;
-}
-
 /**
  * Filters the Customizer widget settings arguments.
  * This is needed because the Customizer registers settings for the raw registered widgets, without going through the `sidebars_widgets` filter.
@@ -87,9 +88,7 @@ function filter_widget_customizer_setting_args( $args, $id = null ) {
 	return $args;
 }
 
-if (gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' )) {
+if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) && gutenberg_use_widgets_block_editor() ) {
 	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
-	add_filter( 'customize_loaded_components', 'gutenberg_remove_widgets_panel' );
 	add_filter( 'widget_customizer_setting_args', 'filter_widget_customizer_setting_args' );
 }
-
diff --git a/lib/widgets-page.php b/lib/widgets-page.php
index 7cc20d54c9b1b..e6812cb9f9226 100644
--- a/lib/widgets-page.php
+++ b/lib/widgets-page.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * Bootstraping the Gutenberg widgets page.
+ * Bootstrapping the Gutenberg widgets page.
  *
  * @package gutenberg
  */
@@ -41,7 +41,7 @@ function gutenberg_widgets_init( $hook ) {
 		return;
 	}
 
-	$initializer_name = $hook === 'gutenberg_customizer' ? 'initializeCustomizer' : 'initialize';
+	$initializer_name = 'gutenberg_customizer' === $hook ? 'initializeCustomizer' : 'initialize';
 
 	$settings = array_merge(
 		gutenberg_get_common_block_editor_settings(),

From 1ca797c8a7caeebfe8a493e546ad4984c37858e3 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 4 Feb 2021 10:58:09 +0800
Subject: [PATCH 06/18] Fix preview url

---
 .../src/blocks/legacy-widget/edit/widget-preview.js         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js b/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
index e660d5dbedf86..6f8bee8cc2ca4 100644
--- a/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
+++ b/packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js
@@ -15,8 +15,10 @@ function WidgetPreview( { widgetAreaId, attributes, hidden, ...props } ) {
 	const HEIGHT_MARGIN = 20;
 	const [ height, setHeight ] = useState( DEFAULT_HEIGHT );
 	const iframeRef = useRef();
-	const currentUrl = `${ document.location.protocol }//${ document.location.host }/wp-admin/themes.php?page=gutenberg-widgets`;
-	const iframeUrl = addQueryArgs( currentUrl, {
+	const widgetScreenUrl = addQueryArgs( 'theme.php', {
+		page: 'gutenberg-widgets',
+	} );
+	const iframeUrl = addQueryArgs( widgetScreenUrl, {
 		'widget-preview': {
 			...attributes,
 			sidebarId: widgetAreaId,

From a99171731514837f78ce4cb08eb076686aa36690 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 4 Feb 2021 11:36:28 +0800
Subject: [PATCH 07/18] Seperate widget areas in different controls

---
 lib/class-wp-sidebar-block-editor-control.php |  43 +++-
 lib/widgets-customize.php                     |  82 ++----
 lib/widgets-page.php                          |   4 +-
 .../customize-sidebar-block-editor/index.js   |  48 ++++
 .../sidebar-adapter.js                        | 189 ++++++++++++++
 .../use-customize-sidebar-block-editor.js     | 239 ++++++++++++++++++
 .../src/create-customizer-control.js          |  23 --
 .../edit-widgets/src/customizer-control.js    |  25 ++
 packages/edit-widgets/src/index.js            |  16 +-
 9 files changed, 579 insertions(+), 90 deletions(-)
 create mode 100644 packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js
 create mode 100644 packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js
 create mode 100644 packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js
 delete mode 100644 packages/edit-widgets/src/create-customizer-control.js
 create mode 100644 packages/edit-widgets/src/customizer-control.js

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index ff1fbedb39d8b..f5844d18b577c 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -18,17 +18,56 @@ class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
 	 */
 	public $type = 'sidebar_block_editor';
 
+	/**
+	 * The current sidebar ID.
+	 *
+	 * @var string
+	 */
+	public $sidebar_id;
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 */
+	public function to_json() {
+		parent::to_json();
+		// $this->json->sidebar_id = $this->sidebar_id;
+	}
+
 	/**
 	 * Enqueue the scripts and styles.
 	 */
 	public function enqueue() {
-		gutenberg_widgets_init( 'gutenberg_customizer' );
+		$settings = array_merge(
+			gutenberg_get_common_block_editor_settings(),
+			gutenberg_get_legacy_widget_settings()
+		);
+
+		// This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null );
+		// Applying that filter would bring over multitude of features from the post editor, some of which
+		// may be undesirable. Instead of using that filter, we simply pick just the settings that are needed.
+		$settings = gutenberg_experimental_global_styles_settings( $settings );
+		$settings = gutenberg_extend_block_editor_styles( $settings );
+
+		wp_add_inline_script(
+			'wp-edit-widgets',
+			sprintf(
+				'wp.domReady( function() {
+					wp.editWidgets.initializeCustomizer( %s );
+				} );',
+				wp_json_encode( $settings )
+			)
+		);
+
+		wp_enqueue_script( 'wp-edit-widgets' );
+		wp_enqueue_style( 'wp-edit-widgets' );
 	}
 
 	/**
 	 * Render the widgets block editor container.
 	 */
 	public function render_content() {
-		the_gutenberg_widgets( 'gutenberg_customizer' );
+		?>
+		<div id="widgets-editor-<?php echo $this->sidebar_id; ?>"></div>
+		<?php
 	}
 }
diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index d82fc233cb9f3..d0b84f335cd0b 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -5,16 +5,6 @@
  * @package gutenberg
  */
 
-/**
- * The sanitization function for incoming values for the `gutenberg_widget_blocks` setting.
- * It's a JSON string, so it decodes it and encodes it again to make sure it's valid.
- *
- * @param string $value The incoming value.
- */
-function gutenberg_customize_sanitize( $value ) {
-	return json_encode( json_decode( $value ) );
-}
-
 /**
  * Gutenberg's Customize Register.
  *
@@ -23,72 +13,48 @@ function gutenberg_customize_sanitize( $value ) {
  * @param \WP_Customize_Manager $manager An instance of the class that controls most of the Theme Customization API for WordPress 3.4 and newer.
  */
 function gutenberg_widgets_customize_register( $manager ) {
+	global $wp_registered_sidebars;
+
 	if ( ! gutenberg_use_widgets_block_editor() ) {
 		return;
 	}
 
 	require_once __DIR__ . '/class-wp-sidebar-block-editor-control.php';
 
-	// Remove the original "Widgets" section.
 	foreach ( $manager->sections() as $section ) {
+		if ( $section instanceof WP_Customize_Sidebar_Section ) {
+			$section->description = '';
+		}
+	}
+
+	foreach ( $manager->controls() as $control ) {
 		if (
-			$section instanceof WP_Customize_Sidebar_Section
+			$control instanceof WP_Widget_Area_Customize_Control ||
+			$control instanceof WP_Widget_Form_Customize_Control
 		) {
-			$manager->remove_section( $section->id );
-			break;
+			$manager->remove_control( $control->id );
 		}
 	}
 
-	$manager->add_setting(
-		'gutenberg_widget_blocks',
-		array(
-			'default'           => '{}',
-			'type'              => 'gutenberg_widget_blocks',
-			'capability'        => 'edit_theme_options',
-			'transport'         => 'postMessage',
-			'sanitize_callback' => 'gutenberg_customize_sanitize',
-		)
+	$sidebars_widgets = array_merge(
+		array( 'wp_inactive_widgets' => array() ),
+		array_fill_keys( array_keys( $wp_registered_sidebars ), array() ),
+		wp_get_sidebars_widgets()
 	);
 
-	$manager->add_section(
-		'gutenberg_widget_blocks',
-		array( 'title' => __( 'Widget Blocks', 'gutenberg' ) )
-	);
-	$manager->add_control(
-		new WP_Sidebar_Block_Editor_Control(
+	foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widgets_ids ) {
+		$control = new WP_Sidebar_Block_Editor_Control(
 			$manager,
-			'gutenberg_widget_blocks',
+			"sidebars_widgets[$sidebar_id]",
 			array(
-				'section'  => 'gutenberg_widget_blocks',
-				'settings' => 'gutenberg_widget_blocks',
+				'section'    => "sidebar-widgets-$sidebar_id",
+				'sidebar_id' => $sidebar_id,
 			)
-		)
-	);
-}
-
-/**
- * Filters the Customizer widget settings arguments.
- * This is needed because the Customizer registers settings for the raw registered widgets, without going through the `sidebars_widgets` filter.
- * The `WP_Customize_Widgets` class expects sidebars to have an array of widgets registered, not a post ID.
- * This results in the value passed to `sanitize_js_callback` being `null` and throwing an error.
- *
- * TODO: Figure out why core is not running the `sidebars_widgets` filter for the relevant part of the code.
- * Then, either fix it or change this filter to parse the post IDs and then pass them to the original `sanitize_js_callback`.
- *
- * @param  array  $args Array of Customizer setting arguments.
- * @param  string $id Widget setting ID.
- * @return array  Maybe modified array of Customizer setting arguments.
- */
-function filter_widget_customizer_setting_args( $args, $id = null ) {
-	// Posts won't have a settings ID like widgets. We can use that to remove the sanitization callback.
-	if ( ! isset( $id ) ) {
-		unset( $args['sanitize_js_callback'] );
+		);
+		$manager->add_control( $control );
 	}
-
-	return $args;
 }
 
-if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) && gutenberg_use_widgets_block_editor() ) {
-	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
-	add_filter( 'widget_customizer_setting_args', 'filter_widget_customizer_setting_args' );
+if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) ) {
+	add_action( 'customize_register', 'gutenberg_widgets_customize_register', 20 );
 }
diff --git a/lib/widgets-page.php b/lib/widgets-page.php
index e6812cb9f9226..931013502c7ff 100644
--- a/lib/widgets-page.php
+++ b/lib/widgets-page.php
@@ -37,11 +37,11 @@ function gutenberg_widgets_init( $hook ) {
 		);
 		return;
 	}
-	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets', 'gutenberg_customizer' ), true ) ) {
+	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets' ), true ) ) {
 		return;
 	}
 
-	$initializer_name = 'gutenberg_customizer' === $hook ? 'initializeCustomizer' : 'initialize';
+	$initializer_name = 'initialize';
 
 	$settings = array_merge(
 		gutenberg_get_common_block_editor_settings(),
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js b/packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js
new file mode 100644
index 0000000000000..3c6a290cc482c
--- /dev/null
+++ b/packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	BlockList,
+	BlockSelectionClearer,
+	ObserveTyping,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import {
+	DropZoneProvider,
+	FocusReturnProvider,
+	SlotFillProvider,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useCustomizeSidebarBlockEditor from './use-customize-sidebar-block-editor';
+
+export default function CustomizeSidebarBlockEditor( { sidebar } ) {
+	const [ blocks, onInput, onChange ] = useCustomizeSidebarBlockEditor(
+		sidebar
+	);
+
+	return (
+		<SlotFillProvider>
+			<DropZoneProvider>
+				<FocusReturnProvider>
+					<BlockEditorProvider
+						value={ blocks }
+						onInput={ onInput }
+						onChange={ onChange }
+					>
+						<BlockSelectionClearer>
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</BlockSelectionClearer>
+					</BlockEditorProvider>
+				</FocusReturnProvider>
+			</DropZoneProvider>
+		</SlotFillProvider>
+	);
+}
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js b/packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js
new file mode 100644
index 0000000000000..a7ba8f1513874
--- /dev/null
+++ b/packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js
@@ -0,0 +1,189 @@
+/**
+ * External dependencies
+ */
+import { difference, isEqual, without } from 'lodash';
+
+const { wp } = window;
+
+function parseWidgetId( widgetId ) {
+	const matches = widgetId.match( /^(.+)-(\d+)$/ );
+	if ( matches ) {
+		return {
+			idBase: matches[ 1 ],
+			number: parseInt( matches[ 2 ], 10 ),
+		};
+	}
+
+	// Likely an old single widget.
+	return { idBase: widgetId };
+}
+
+function widgetIdToSettingId( widgetId ) {
+	const { idBase, number } = parseWidgetId( widgetId );
+	if ( number ) {
+		return `widget_${ idBase }[${ number }]`;
+	}
+
+	return `widget_${ idBase }`;
+}
+
+function parseSettingId( settingId ) {
+	const matches = settingId.match( /^widget_(.+)(?:\[(\d+)\])$/ );
+	if ( matches ) {
+		return {
+			idBase: matches[ 1 ],
+			number: parseInt( matches[ 2 ], 10 ),
+		};
+	}
+
+	return { idBase: settingId };
+}
+
+function settingIdToWidgetId( settingId ) {
+	const { idBase, number } = parseSettingId( settingId );
+	if ( number ) {
+		return `${ idBase }-${ number }`;
+	}
+
+	return idBase;
+}
+
+export default class SidebarAdapter {
+	constructor( setting, allSettings ) {
+		this.setting = setting;
+		this.allSettings = allSettings;
+
+		this.subscribers = new Set();
+
+		this._handleSettingChange = this._handleSettingChange.bind( this );
+		this._handleAllSettingsChange = this._handleAllSettingsChange.bind(
+			this
+		);
+	}
+
+	subscribe( callback ) {
+		if ( ! this.subscribers.size ) {
+			this.setting.bind( this._handleSettingChange );
+			this.allSettings.bind( 'change', this._handleAllSettingsChange );
+		}
+
+		this.subscribers.add( callback );
+	}
+
+	unsubscribe( callback ) {
+		this.subscribers.delete( callback );
+
+		if ( ! this.subscribers.size ) {
+			this.setting.unbind( this._handleSettingChange );
+			this.allSettings.unbind( 'change', this._handleAllSettingsChange );
+		}
+	}
+
+	trigger( event ) {
+		for ( const callback of this.subscribers ) {
+			callback( event );
+		}
+	}
+
+	_handleSettingChange( newWidgetIds, oldWidgetIds ) {
+		const addedWidgetIds = difference( newWidgetIds, oldWidgetIds );
+		const removedWidgetIds = difference( oldWidgetIds, newWidgetIds );
+
+		for ( const widgetId of addedWidgetIds ) {
+			this.trigger( { type: 'widgetAdded', widgetId } );
+		}
+
+		for ( const widgetId of addedWidgetIds ) {
+			this.trigger( { type: 'widgetRemoved', widgetId } );
+		}
+
+		if ( ! isEqual( addedWidgetIds, removedWidgetIds ) ) {
+			this.trigger( { type: 'widgetsReordered', newWidgetIds } );
+		}
+	}
+
+	_handleAllSettingsChange( setting ) {
+		if ( ! setting.id.startsWith( 'widget_' ) ) {
+			return;
+		}
+
+		const widgetId = settingIdToWidgetId( setting.id );
+		if ( ! this.setting.get().includes( widgetId ) ) {
+			return;
+		}
+
+		this.trigger( { type: 'widgetChanged', widgetId } );
+	}
+
+	getWidgetIds() {
+		return this.setting.get();
+	}
+
+	setWidgetIds( widgetIds ) {
+		this.setting.set( widgetIds );
+	}
+
+	getWidget( widgetId ) {
+		const { idBase, number } = parseWidgetId( widgetId );
+		const settingId = widgetIdToSettingId( widgetId );
+		const instance = this.allSettings( settingId ).get();
+		return {
+			id: widgetId,
+			idBase,
+			number,
+			instance,
+		};
+	}
+
+	addWidget( widget ) {
+		const widgetModel = wp.customize.Widgets.availableWidgets.findWhere( {
+			id_base: widget.idBase,
+		} );
+
+		let number = widget.number;
+		if ( widgetModel.get( 'is_multi' ) && ! number ) {
+			widgetModel.set(
+				'multi_number',
+				widgetModel.get( 'multi_number' ) + 1
+			);
+			number = widgetModel.get( 'multi_number' );
+		}
+
+		const settingId = number
+			? `widget_${ widget.idBase }[${ number }]`
+			: `widget_${ widget.idBase }`;
+
+		const settingArgs = {
+			transport: wp.customize.Widgets.data.selectiveRefreshableWidgets[
+				widgetModel.get( 'id_base' )
+			]
+				? 'postMessage'
+				: 'refresh',
+			previewer: this.setting.previewer,
+		};
+		const setting = this.allSettings.create(
+			settingId,
+			settingId,
+			'',
+			settingArgs
+		);
+		setting.set( {} );
+
+		const widgetIds = this.setting.get();
+		const widgetId = settingIdToWidgetId( settingId );
+		this.setting.set( [ ...widgetIds, widgetId ] );
+
+		return widgetId;
+	}
+
+	updateWidget( widget ) {
+		const settingId = widgetIdToSettingId( widget.id );
+		this.allSettings( settingId ).set( widget.instance );
+		// TODO: what about the other stuff?
+	}
+
+	removeWidget( widgetId ) {
+		const widgetIds = this.setting.get();
+		this.setting.set( without( widgetIds, widgetId ) );
+	}
+}
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js b/packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js
new file mode 100644
index 0000000000000..a35caac189253
--- /dev/null
+++ b/packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js
@@ -0,0 +1,239 @@
+/**
+ * External dependencies
+ */
+import { invert, omit, keyBy, isEqual } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { serialize, parse, createBlock } from '@wordpress/blocks';
+import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
+
+function blockToWidget( block, existingWidget = null ) {
+	let widget;
+
+	if ( block.name === 'core/legacy-widget' ) {
+		const isReferenceWidget = !! block.attributes.referenceWidgetName;
+		if ( isReferenceWidget ) {
+			widget = {
+				id: block.attributes.referenceWidgetName,
+				instance: block.attributes.instance,
+			};
+		} else {
+			widget = {
+				widgetClass: block.attributes.widgetClass,
+				idBase: block.attributes.idBase,
+				instance: block.attributes.instance,
+			};
+		}
+	} else {
+		widget = {
+			idBase: 'block',
+			widgetClass: 'WP_Widget_Block',
+			instance: { content: serialize( block ) },
+		};
+	}
+
+	return {
+		...omit( existingWidget, [ 'form', 'rendered' ] ),
+		...widget,
+	};
+}
+
+function widgetToBlock( widget, existingBlock = null ) {
+	let block;
+
+	if ( widget.widgetClass === 'WP_Widget_Block' ) {
+		const parsedBlocks = parse( widget.instance.content );
+		block = parsedBlocks.length
+			? parsedBlocks[ 0 ]
+			: createBlock( 'core/paragraph', {} );
+	} else {
+		const attributes = {
+			name: widget.name,
+			form: widget.form,
+			instance: widget.instance,
+			idBase: widget.idBase,
+			number: widget.number,
+		};
+
+		const isReferenceWidget = ! widget.widgetClass;
+		if ( isReferenceWidget ) {
+			attributes.referenceWidgetName = widget.id;
+		} else {
+			attributes.widgetClass = widget.widgetClass;
+		}
+
+		block = createBlock( 'core/legacy-widget', attributes, [] );
+	}
+
+	return {
+		...block,
+		clientId: existingBlock?.clientId ?? block.clientId,
+	};
+}
+
+function initState( sidebar ) {
+	const state = { blocks: [], widgetIds: {} };
+
+	for ( const widgetId of sidebar.getWidgetIds() ) {
+		const widget = sidebar.getWidget( widgetId );
+		const block = widgetToBlock( widget );
+		state.blocks.push( block );
+		state.widgetIds[ block.clientId ] = widgetId;
+	}
+
+	return state;
+}
+
+export default function useCustomizeSidebarBlockEditor( sidebar ) {
+	// TODO: Could/should optimize these data structures so that there's less
+	// array traversal. In particular, setBlocks() is a really hot path.
+
+	const [ state, setState ] = useState( () => initState( sidebar ) );
+
+	const ignoreIncoming = useRef( false );
+
+	useEffect( () => {
+		const handler = ( event ) => {
+			if ( ignoreIncoming.current ) {
+				return;
+			}
+
+			switch ( event.type ) {
+				case 'widgetAdded': {
+					const { widgetId } = event;
+					const block = blockToWidget(
+						sidebar.getWidget( widgetId )
+					);
+					setState( ( lastState ) => ( {
+						blocks: [ ...lastState.blocks, block ],
+						widgetIds: {
+							...lastState.widgetIds,
+							[ block.clientId ]: widgetId,
+						},
+					} ) );
+					break;
+				}
+
+				case 'widgetRemoved': {
+					const { widgetId } = event;
+					const blockClientId = invert( state.widgetIds )[ widgetId ];
+					setState( ( lastState ) => ( {
+						blocks: lastState.blocks.filter(
+							( { clientId } ) => clientId !== blockClientId
+						),
+						widgetIds: omit( lastState.widgetIds, blockClientId ),
+					} ) );
+					break;
+				}
+
+				case 'widgetChanged': {
+					const { widgetId } = event;
+					const blockClientIdToUpdate = invert( state.widgetIds )[
+						widgetId
+					];
+					const blockToUpdate = state.blocks.find(
+						( { clientId } ) => clientId === blockClientIdToUpdate
+					);
+					const updatedBlock = widgetToBlock(
+						sidebar.getWidget( widgetId ),
+						blockToUpdate
+					);
+					setState( ( lastState ) => ( {
+						...lastState,
+						blocks: lastState.blocks.map( ( block ) =>
+							block.clientId === blockClientIdToUpdate
+								? updatedBlock
+								: block
+						),
+					} ) );
+					break;
+				}
+
+				case 'widgetsReordered':
+					const { widgetIds } = event;
+					const blockClientIds = invert( state.widgetIds );
+					const blocksByClientId = keyBy( state.blocks, 'clientId' );
+					setState( ( lastState ) => ( {
+						...lastState,
+						blocks: widgetIds.map(
+							( widgetId ) =>
+								blocksByClientId[ blockClientIds[ widgetId ] ]
+						),
+					} ) );
+					break;
+			}
+		};
+
+		sidebar.subscribe( handler );
+		return () => sidebar.unsubscribe( handler );
+	}, [ sidebar ] );
+
+	const onChangeBlocks = useCallback(
+		( nextBlocks ) => {
+			ignoreIncoming.current = true;
+
+			let nextWidgetIds = state.widgetIds;
+
+			const blocksByClientId = keyBy( state.blocks, 'clientId' );
+
+			const seen = {};
+
+			for ( const nextBlock of nextBlocks ) {
+				if ( nextBlock.clientId in blocksByClientId ) {
+					const block = blocksByClientId[ nextBlock.clientId ];
+					if ( ! isEqual( block, nextBlock ) ) {
+						const widgetId = state.widgetIds[ nextBlock.clientId ];
+						const widgetToUpdate = sidebar.getWidget( widgetId );
+						const widget = blockToWidget(
+							nextBlock,
+							widgetToUpdate
+						);
+						sidebar.updateWidget( widget );
+					}
+				} else {
+					const widget = blockToWidget( nextBlock );
+					const widgetId = sidebar.addWidget( widget );
+					if ( nextWidgetIds === state.widgetIds ) {
+						nextWidgetIds = { ...state.widgetIds };
+					}
+					nextWidgetIds[ nextBlock.clientId ] = widgetId;
+				}
+
+				seen[ nextBlock.clientId ] = true;
+			}
+
+			for ( const block of state.blocks ) {
+				if ( ! seen[ block.clientId ] ) {
+					const widgetId = state.widgetIds[ block.clientId ];
+					sidebar.removeWidget( widgetId );
+				}
+			}
+
+			if (
+				nextBlocks.length === state.blocks.length &&
+				! isEqual(
+					nextBlocks.map( ( { clientId } ) => clientId ),
+					state.blocks.map( ( { clientId } ) => clientId )
+				)
+			) {
+				const order = nextBlocks.map(
+					( { clientId } ) => state.widgetIds[ clientId ]
+				);
+				sidebar.setWidgetIds( order );
+			}
+
+			setState( ( lastState ) => ( {
+				...lastState,
+				blocks: nextBlocks,
+				widgetIds: nextWidgetIds,
+			} ) );
+
+			ignoreIncoming.current = false;
+		},
+		[ state, sidebar ]
+	);
+
+	return [ state.blocks, onChangeBlocks, onChangeBlocks ];
+}
diff --git a/packages/edit-widgets/src/create-customizer-control.js b/packages/edit-widgets/src/create-customizer-control.js
deleted file mode 100644
index 2d5c223aca59d..0000000000000
--- a/packages/edit-widgets/src/create-customizer-control.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Layout from './components/layout';
-
-const { wp } = window;
-
-const createCustomizerControl = ( { settings } ) =>
-	wp.customize.Control.extend( {
-		ready() {
-			render(
-				<Layout blockEditorSettings={ settings } isInCustomizer />,
-				this.container[ 0 ]
-			);
-		},
-	} );
-
-export default createCustomizerControl;
diff --git a/packages/edit-widgets/src/customizer-control.js b/packages/edit-widgets/src/customizer-control.js
new file mode 100644
index 0000000000000..0123171e80f05
--- /dev/null
+++ b/packages/edit-widgets/src/customizer-control.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomizeSidebarBlockEditor from './components/customize-sidebar-block-editor';
+import SidebarAdapter from './components/customize-sidebar-block-editor/sidebar-adapter';
+
+const { wp } = window;
+
+const CustomizerControl = wp.customize.Control.extend( {
+	ready() {
+		render(
+			<CustomizeSidebarBlockEditor
+				sidebar={ new SidebarAdapter( this.setting, wp.customize ) }
+			/>,
+			this.container[ 0 ]
+		);
+	},
+} );
+
+export default CustomizerControl;
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index 4e284d17b2e5f..cd6bfc89a981e 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -20,7 +20,9 @@ import './hooks';
 import { create as createLegacyWidget } from './blocks/legacy-widget';
 import * as widgetArea from './blocks/widget-area';
 import Layout from './components/layout';
-import createCustomizerControl from './create-customizer-control';
+import CustomizerControl from './customizer-control';
+
+let registered = false;
 
 /**
  * Initializes the block editor in the widgets screen.
@@ -45,7 +47,11 @@ export function initialize( id, settings ) {
 	);
 }
 
-export function initializeCustomizer( id, settings ) {
+export function initializeCustomizer( settings ) {
+	if ( registered ) {
+		return;
+	}
+
 	const coreBlocks = __experimentalGetCoreBlocks().filter(
 		( block ) => ! [ 'core/more' ].includes( block.name )
 	);
@@ -57,9 +63,9 @@ export function initializeCustomizer( id, settings ) {
 	registerBlock( createLegacyWidget( settings ) );
 	registerBlock( widgetArea );
 
-	window.wp.customize.controlConstructor.sidebar_block_editor = createCustomizerControl(
-		{ settings }
-	);
+	window.wp.customize.controlConstructor.sidebar_block_editor = CustomizerControl;
+
+	registered = true;
 }
 
 /**

From 98a2c818cc428626f0318692f4ad390ccaf3f0c2 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 5 Feb 2021 15:40:25 +0800
Subject: [PATCH 08/18] Add customize-widgets package

---
 docs/manifest.json                            |  6 ++
 lib/class-wp-sidebar-block-editor-control.php | 36 +----------
 lib/client-assets.php                         |  9 +++
 lib/widgets-customize.php                     |  1 -
 package-lock.json                             | 12 ++++
 package.json                                  |  1 +
 packages/customize-widgets/.npmrc             |  1 +
 packages/customize-widgets/CHANGELOG.md       |  5 ++
 packages/customize-widgets/README.md          |  6 ++
 packages/customize-widgets/package.json       | 32 ++++++++++
 .../components/sidebar-block-editor}/index.js |  6 +-
 .../sidebar-block-editor}/sidebar-adapter.js  |  0
 .../use-sidebar-block-editor.js}              |  3 +-
 .../src/customize-control.js                  | 25 ++++++++
 packages/customize-widgets/src/index.js       | 62 +++++++++++++++++++
 packages/customize-widgets/src/style.scss     |  1 +
 .../edit-widgets/src/customizer-control.js    | 25 --------
 packages/edit-widgets/src/index.js            | 24 -------
 18 files changed, 166 insertions(+), 89 deletions(-)
 create mode 100644 packages/customize-widgets/.npmrc
 create mode 100644 packages/customize-widgets/CHANGELOG.md
 create mode 100644 packages/customize-widgets/README.md
 create mode 100644 packages/customize-widgets/package.json
 rename packages/{edit-widgets/src/components/customize-sidebar-block-editor => customize-widgets/src/components/sidebar-block-editor}/index.js (83%)
 rename packages/{edit-widgets/src/components/customize-sidebar-block-editor => customize-widgets/src/components/sidebar-block-editor}/sidebar-adapter.js (100%)
 rename packages/{edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js => customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js} (97%)
 create mode 100644 packages/customize-widgets/src/customize-control.js
 create mode 100644 packages/customize-widgets/src/index.js
 create mode 100644 packages/customize-widgets/src/style.scss
 delete mode 100644 packages/edit-widgets/src/customizer-control.js

diff --git a/docs/manifest.json b/docs/manifest.json
index b28dff5a8988b..e571ec2b03ea8 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1481,6 +1481,12 @@
 		"markdown_source": "../packages/custom-templated-path-webpack-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/customize-widgets",
+		"slug": "packages-customize-widgets",
+		"markdown_source": "../packages/customize-widgets/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/data-controls",
 		"slug": "packages-data-controls",
diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index f5844d18b577c..389533a906baf 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -25,49 +25,17 @@ class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
 	 */
 	public $sidebar_id;
 
-	/**
-	 * Refresh the parameters passed to the JavaScript via JSON.
-	 */
-	public function to_json() {
-		parent::to_json();
-		// $this->json->sidebar_id = $this->sidebar_id;
-	}
-
 	/**
 	 * Enqueue the scripts and styles.
 	 */
 	public function enqueue() {
-		$settings = array_merge(
-			gutenberg_get_common_block_editor_settings(),
-			gutenberg_get_legacy_widget_settings()
-		);
-
-		// This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null );
-		// Applying that filter would bring over multitude of features from the post editor, some of which
-		// may be undesirable. Instead of using that filter, we simply pick just the settings that are needed.
-		$settings = gutenberg_experimental_global_styles_settings( $settings );
-		$settings = gutenberg_extend_block_editor_styles( $settings );
-
-		wp_add_inline_script(
-			'wp-edit-widgets',
-			sprintf(
-				'wp.domReady( function() {
-					wp.editWidgets.initializeCustomizer( %s );
-				} );',
-				wp_json_encode( $settings )
-			)
-		);
-
-		wp_enqueue_script( 'wp-edit-widgets' );
-		wp_enqueue_style( 'wp-edit-widgets' );
+		wp_enqueue_script( 'wp-customize-widgets' );
+		wp_enqueue_style( 'wp-customize-widgets' );
 	}
 
 	/**
 	 * Render the widgets block editor container.
 	 */
 	public function render_content() {
-		?>
-		<div id="widgets-editor-<?php echo $this->sidebar_id; ?>"></div>
-		<?php
 	}
 }
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 4fb94d05b959c..5115cb990e684 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -444,6 +444,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		filemtime( gutenberg_dir_path() . 'build/block-directory/style.css' )
 	);
 	$styles->add_data( 'wp-block-directory', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-customize-widgets',
+		gutenberg_url( 'build/customize-widgets/style.css' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
+		filemtime( gutenberg_dir_path() . 'build/customize-widgets/style.css' )
+	);
+	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 
diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index d0b84f335cd0b..e5907c4fda7f2 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -37,7 +37,6 @@ function gutenberg_widgets_customize_register( $manager ) {
 	}
 
 	$sidebars_widgets = array_merge(
-		array( 'wp_inactive_widgets' => array() ),
 		array_fill_keys( array_keys( $wp_registered_sidebars ), array() ),
 		wp_get_sidebars_widgets()
 	);
diff --git a/package-lock.json b/package-lock.json
index 8cd4a781dd2a0..87e4e7640b525 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12040,6 +12040,18 @@
 				"escape-string-regexp": "^1.0.5"
 			}
 		},
+		"@wordpress/customize-widgets": {
+			"version": "file:packages/customize-widgets",
+			"requires": {
+				"@babel/runtime": "^7.11.2",
+				"@wordpress/block-editor": "file:packages/block-editor",
+				"@wordpress/block-library": "file:packages/block-library",
+				"@wordpress/blocks": "file:packages/blocks",
+				"@wordpress/components": "file:packages/components",
+				"@wordpress/element": "file:packages/element",
+				"lodash": "^4.17.19"
+			}
+		},
 		"@wordpress/data": {
 			"version": "file:packages/data",
 			"requires": {
diff --git a/package.json b/package.json
index 98e81efbd749e..ca5d278a5717e 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 		"@wordpress/components": "file:packages/components",
 		"@wordpress/compose": "file:packages/compose",
 		"@wordpress/core-data": "file:packages/core-data",
+		"@wordpress/customize-widgets": "file:packages/customize-widgets",
 		"@wordpress/data": "file:packages/data",
 		"@wordpress/data-controls": "file:packages/data-controls",
 		"@wordpress/date": "file:packages/date",
diff --git a/packages/customize-widgets/.npmrc b/packages/customize-widgets/.npmrc
new file mode 100644
index 0000000000000..43c97e719a5a8
--- /dev/null
+++ b/packages/customize-widgets/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
new file mode 100644
index 0000000000000..f11e8cd301086
--- /dev/null
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/master/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.
diff --git a/packages/customize-widgets/README.md b/packages/customize-widgets/README.md
new file mode 100644
index 0000000000000..acf91eb61b6c7
--- /dev/null
+++ b/packages/customize-widgets/README.md
@@ -0,0 +1,6 @@
+- Package name
+- Package description
+- Installation details
+- Usage example
+- API documentation, if applicable ([more info](#maintaining-api-documentation))
+- `Code is Poetry` logo (`<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>`)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
new file mode 100644
index 0000000000000..a4d68f19829e2
--- /dev/null
+++ b/packages/customize-widgets/package.json
@@ -0,0 +1,32 @@
+{
+	"name": "@wordpress/customize-widgets",
+	"version": "1.0.0-prerelease",
+	"description": "Package description.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [ "wordpress" ],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/customize-widgets/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/customize-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.11.2",
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/block-library": "file:../block-library",
+		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
+		"@wordpress/element": "file:../element",
+		"lodash": "^4.17.19"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
similarity index 83%
rename from packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js
rename to packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 3c6a290cc482c..d019fb827335a 100644
--- a/packages/edit-widgets/src/components/customize-sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -17,12 +17,10 @@ import {
 /**
  * Internal dependencies
  */
-import useCustomizeSidebarBlockEditor from './use-customize-sidebar-block-editor';
+import useSidebarBlockEditor from './use-sidebar-block-editor';
 
 export default function CustomizeSidebarBlockEditor( { sidebar } ) {
-	const [ blocks, onInput, onChange ] = useCustomizeSidebarBlockEditor(
-		sidebar
-	);
+	const [ blocks, onInput, onChange ] = useSidebarBlockEditor( sidebar );
 
 	return (
 		<SlotFillProvider>
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js
similarity index 100%
rename from packages/edit-widgets/src/components/customize-sidebar-block-editor/sidebar-adapter.js
rename to packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js
diff --git a/packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
similarity index 97%
rename from packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js
rename to packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
index a35caac189253..600bfe67fc3d4 100644
--- a/packages/edit-widgets/src/components/customize-sidebar-block-editor/use-customize-sidebar-block-editor.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
@@ -43,6 +43,7 @@ function blockToWidget( block, existingWidget = null ) {
 function widgetToBlock( widget, existingBlock = null ) {
 	let block;
 
+	// FIXME: We'll never get it here with blocks, we need to update this.
 	if ( widget.widgetClass === 'WP_Widget_Block' ) {
 		const parsedBlocks = parse( widget.instance.content );
 		block = parsedBlocks.length
@@ -86,7 +87,7 @@ function initState( sidebar ) {
 	return state;
 }
 
-export default function useCustomizeSidebarBlockEditor( sidebar ) {
+export default function useSidebarBlockEditor( sidebar ) {
 	// TODO: Could/should optimize these data structures so that there's less
 	// array traversal. In particular, setBlocks() is a really hot path.
 
diff --git a/packages/customize-widgets/src/customize-control.js b/packages/customize-widgets/src/customize-control.js
new file mode 100644
index 0000000000000..c4ee281360379
--- /dev/null
+++ b/packages/customize-widgets/src/customize-control.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SidebarBlockEditor from './components/sidebar-block-editor';
+import SidebarAdapter from './components/sidebar-block-editor/sidebar-adapter';
+
+const { wp } = window;
+
+const CustomizeControl = wp.customize.Control.extend( {
+	ready() {
+		render(
+			<SidebarBlockEditor
+				sidebar={ new SidebarAdapter( this.setting, wp.customize ) }
+			/>,
+			this.container[ 0 ]
+		);
+	},
+} );
+
+export default CustomizeControl;
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
new file mode 100644
index 0000000000000..f637f2584ac9b
--- /dev/null
+++ b/packages/customize-widgets/src/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import {
+	registerCoreBlocks,
+	__experimentalGetCoreBlocks,
+	__experimentalRegisterExperimentalCoreBlocks,
+} from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import CustomizeControl from './customize-control';
+
+const { wp } = window;
+
+/**
+ * Initializes the widgets block editor in the customizer.
+ */
+export function initialize() {
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( block ) => ! [ 'core/more' ].includes( block.name )
+	);
+	registerCoreBlocks( coreBlocks );
+
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks();
+	}
+
+	// TODO: Register legacy widgets block
+	registerBlockType( 'core/legacy-widget', {
+		title: 'Legacy Widget',
+		attributes: {
+			widgetClass: {
+				type: 'string',
+			},
+			referenceWidgetName: {
+				type: 'string',
+			},
+			name: {
+				type: 'string',
+			},
+			idBase: {
+				type: 'string',
+			},
+			number: {
+				type: 'number',
+			},
+			instance: {
+				type: 'object',
+			},
+		},
+		edit( { attributes } ) {
+			return <div>{ JSON.stringify( attributes ) }</div>;
+		},
+	} );
+
+	wp.customize.controlConstructor.sidebar_block_editor = CustomizeControl;
+}
+
+initialize();
diff --git a/packages/customize-widgets/src/style.scss b/packages/customize-widgets/src/style.scss
new file mode 100644
index 0000000000000..70b786d12ed05
--- /dev/null
+++ b/packages/customize-widgets/src/style.scss
@@ -0,0 +1 @@
+// TODO
diff --git a/packages/edit-widgets/src/customizer-control.js b/packages/edit-widgets/src/customizer-control.js
deleted file mode 100644
index 0123171e80f05..0000000000000
--- a/packages/edit-widgets/src/customizer-control.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CustomizeSidebarBlockEditor from './components/customize-sidebar-block-editor';
-import SidebarAdapter from './components/customize-sidebar-block-editor/sidebar-adapter';
-
-const { wp } = window;
-
-const CustomizerControl = wp.customize.Control.extend( {
-	ready() {
-		render(
-			<CustomizeSidebarBlockEditor
-				sidebar={ new SidebarAdapter( this.setting, wp.customize ) }
-			/>,
-			this.container[ 0 ]
-		);
-	},
-} );
-
-export default CustomizerControl;
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index cd6bfc89a981e..e2d3a4813fd94 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -20,9 +20,6 @@ import './hooks';
 import { create as createLegacyWidget } from './blocks/legacy-widget';
 import * as widgetArea from './blocks/widget-area';
 import Layout from './components/layout';
-import CustomizerControl from './customizer-control';
-
-let registered = false;
 
 /**
  * Initializes the block editor in the widgets screen.
@@ -47,27 +44,6 @@ export function initialize( id, settings ) {
 	);
 }
 
-export function initializeCustomizer( settings ) {
-	if ( registered ) {
-		return;
-	}
-
-	const coreBlocks = __experimentalGetCoreBlocks().filter(
-		( block ) => ! [ 'core/more' ].includes( block.name )
-	);
-	registerCoreBlocks( coreBlocks );
-
-	if ( process.env.GUTENBERG_PHASE === 2 ) {
-		__experimentalRegisterExperimentalCoreBlocks();
-	}
-	registerBlock( createLegacyWidget( settings ) );
-	registerBlock( widgetArea );
-
-	window.wp.customize.controlConstructor.sidebar_block_editor = CustomizerControl;
-
-	registered = true;
-}
-
 /**
  * Function to register an individual block.
  *

From 3e9ab99be8a6521165dbcc9e31c0a5731b0f32bd Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 5 Feb 2021 15:43:57 +0800
Subject: [PATCH 09/18] Remove unused code

---
 .../src/components/header/style.scss          |  4 --
 .../src/components/layout/index.js            |  9 ++--
 .../src/components/layout/interface.js        |  2 +-
 .../src/components/sidebar/index.js           |  7 +---
 packages/edit-widgets/src/style.scss          | 42 -------------------
 5 files changed, 6 insertions(+), 58 deletions(-)

diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 5e1ac9a4c9157..ddfd782a910fa 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -21,10 +21,6 @@
 	font-size: 20px;
 	padding: 0;
 	margin: 0 20px 0 0;
-
-	#customize-theme-controls & {
-		display: none;
-	}
 }
 
 .edit-widgets-header__actions {
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index ba9e69c9297e3..8ce67108fef81 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/packages/edit-widgets/src/components/layout/index.js
@@ -12,16 +12,13 @@ import Sidebar from '../sidebar';
 import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 
-function Layout( { blockEditorSettings, isInCustomizer } ) {
+function Layout( { blockEditorSettings } ) {
 	return (
 		<WidgetAreasBlockEditorProvider
 			blockEditorSettings={ blockEditorSettings }
 		>
-			<Interface
-				blockEditorSettings={ blockEditorSettings }
-				isInCustomizer={ isInCustomizer }
-			/>
-			<Sidebar isInCustomizer={ isInCustomizer } />
+			<Interface blockEditorSettings={ blockEditorSettings } />
+			<Sidebar />
 			<Popover.Slot />
 			<PluginArea />
 			<UnsavedChangesWarning />
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index e81db5a48288a..0f0c36bfe0b15 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -37,7 +37,7 @@ const interfaceLabels = {
 	sidebar: __( 'Widgets settings' ),
 };
 
-function Interface( { blockEditorSettings, isInCustomizer } ) {
+function Interface( { blockEditorSettings } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const { setIsInserterOpened, closeGeneralSidebar } = useDispatch(
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index 78ae22e49ab09..945dbf1b55bf5 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -57,10 +57,7 @@ function ComplementaryAreaTab( { identifier, label, isActive } ) {
 	);
 }
 
-export default function Sidebar( { isInCustomizer } ) {
-	const isSideBarActiveByDefault =
-		SIDEBAR_ACTIVE_BY_DEFAULT && ! isInCustomizer;
-
+export default function Sidebar() {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const {
 		currentArea,
@@ -171,7 +168,7 @@ export default function Sidebar( { isInCustomizer } ) {
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }
-			isActiveByDefault={ isSideBarActiveByDefault }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
 			{ currentArea === WIDGET_AREAS_IDENTIFIER && (
 				<WidgetAreas
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 82196dd3ad981..6b14fdf0faad3 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -46,12 +46,6 @@ body.widgets-php {
 	.interface-interface-skeleton__content {
 		background-color: #f1f1f1;
 	}
-
-	#customize-theme-controls & {
-		min-height: unset;
-		position: unset;
-		margin: -12px;
-	}
 }
 
 .blocks-widgets-container .editor-style-wrapper {
@@ -63,40 +57,4 @@ body.widgets-php {
 	display: none;
 }
 
-// stylelint-disable-next-line selector-id-pattern
-#customize-theme-controls #sub-accordion-section-gutenberg_widget_blocks.customize-pane-child.open {
-	overflow: visible;
-}
-
-#customize-theme-controls {
-	.interface-interface-skeleton {
-		top: 0;
-		left: 0;
-		position: relative;
-	}
-
-	.interface-interface-skeleton__sidebar {
-		position: absolute !important;
-	}
-}
-
-#widgets-left#widgets-left {
-	padding: 0;
-
-	.block-editor-inserter__menu {
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	.block-editor-inserter__main-area {
-		background: #fff;
-	}
-}
-
-// stylelint-disable-next-line selector-id-pattern
-#sub-accordion-section-gutenberg_widget_blocks {
-	.customize-section-title {
-		z-index: 35 !important;
-	}
-}
-
 @include wordpress-admin-schemes();

From 3793df664aa97799c0ea4e51490cfc78af1d255d Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 5 Feb 2021 17:15:44 +0800
Subject: [PATCH 10/18] Use a new setting and control

---
 lib/widgets-customize.php | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index e5907c4fda7f2..ead4434b7ed1c 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -26,7 +26,6 @@ function gutenberg_widgets_customize_register( $manager ) {
 			$section->description = '';
 		}
 	}
-
 	foreach ( $manager->controls() as $control ) {
 		if (
 			$control instanceof WP_Widget_Area_Customize_Control ||
@@ -36,24 +35,30 @@ function gutenberg_widgets_customize_register( $manager ) {
 		}
 	}
 
-	$sidebars_widgets = array_merge(
-		array_fill_keys( array_keys( $wp_registered_sidebars ), array() ),
-		wp_get_sidebars_widgets()
-	);
-
-	foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widgets_ids ) {
-		$control = new WP_Sidebar_Block_Editor_Control(
-			$manager,
+	foreach ( $wp_registered_sidebars as $sidebar_id => $sidebar ) {
+		$manager->add_setting(
 			"sidebars_widgets[$sidebar_id]",
 			array(
-				'section'    => "sidebar-widgets-$sidebar_id",
-				'sidebar_id' => $sidebar_id,
+				'type'       => 'gutenberg_widget_blocks',
+				'capability' => 'edit_theme_options',
+				'transport'  => 'postMessage',
+			)
+		);
+
+		$manager->add_control(
+			new WP_Sidebar_Block_Editor_Control(
+				$manager,
+				"sidebars_widgets[$sidebar_id]",
+				array(
+					'section'    => "sidebar-widgets-$sidebar_id",
+					'settings'   => "sidebars_widgets[$sidebar_id]",
+					'sidebar_id' => $sidebar_id,
+				)
 			)
 		);
-		$manager->add_control( $control );
 	}
 }
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) ) {
-	add_action( 'customize_register', 'gutenberg_widgets_customize_register', 20 );
+	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
 }

From ab226e28d2bd51ff9d9a3ca2b07df0e643b50f3d Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 5 Feb 2021 17:18:44 +0800
Subject: [PATCH 11/18] Add comment

---
 lib/class-wp-sidebar-block-editor-control.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index 389533a906baf..db19ce28fb295 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -37,5 +37,6 @@ public function enqueue() {
 	 * Render the widgets block editor container.
 	 */
 	public function render_content() {
+		// Render nothing.
 	}
 }

From 9b80260f2d2f254674a38672bcf2624152f92953 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:47:50 +0800
Subject: [PATCH 12/18] Add private true

---
 packages/customize-widgets/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index a4d68f19829e2..95481bbda613d 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,5 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
+	"private": true,
 	"version": "1.0.0-prerelease",
 	"description": "Package description.",
 	"author": "The WordPress Contributors",

From 90c2d47c51c36018f6c4cd75806b70ffd626ab2b Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:48:34 +0800
Subject: [PATCH 13/18] Remove $sidebar_id

---
 lib/class-wp-sidebar-block-editor-control.php | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/lib/class-wp-sidebar-block-editor-control.php b/lib/class-wp-sidebar-block-editor-control.php
index db19ce28fb295..cda048ee88191 100644
--- a/lib/class-wp-sidebar-block-editor-control.php
+++ b/lib/class-wp-sidebar-block-editor-control.php
@@ -18,13 +18,6 @@ class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
 	 */
 	public $type = 'sidebar_block_editor';
 
-	/**
-	 * The current sidebar ID.
-	 *
-	 * @var string
-	 */
-	public $sidebar_id;
-
 	/**
 	 * Enqueue the scripts and styles.
 	 */

From 5569316a28ec70bda650192187dddb5c32c4d9d7 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:54:13 +0800
Subject: [PATCH 14/18] Update README

---
 packages/customize-widgets/README.md    | 23 +++++++++++++++++------
 packages/customize-widgets/package.json |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/customize-widgets/README.md b/packages/customize-widgets/README.md
index acf91eb61b6c7..6ed533cde09b2 100644
--- a/packages/customize-widgets/README.md
+++ b/packages/customize-widgets/README.md
@@ -1,6 +1,17 @@
-- Package name
-- Package description
-- Installation details
-- Usage example
-- API documentation, if applicable ([more info](#maintaining-api-documentation))
-- `Code is Poetry` logo (`<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>`)
+# Customize Widgets
+
+Widgets blocks in Customizer Module for WordPress.
+
+> 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/customize-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 lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 95481bbda613d..52372195f5039 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -2,7 +2,7 @@
 	"name": "@wordpress/customize-widgets",
 	"private": true,
 	"version": "1.0.0-prerelease",
-	"description": "Package description.",
+	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [ "wordpress" ],

From f73e62eddb247317c4ebafa90b305d19c62b7ab2 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:55:04 +0800
Subject: [PATCH 15/18] Fix naming

---
 .../src/components/sidebar-block-editor/index.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index d019fb827335a..a0b28a72d90cb 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -19,7 +19,7 @@ import {
  */
 import useSidebarBlockEditor from './use-sidebar-block-editor';
 
-export default function CustomizeSidebarBlockEditor( { sidebar } ) {
+export default function SidebarBlockEditor( { sidebar } ) {
 	const [ blocks, onInput, onChange ] = useSidebarBlockEditor( sidebar );
 
 	return (

From 0b977275af41c721f2fe49f4edf2f642cc6141a1 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:55:20 +0800
Subject: [PATCH 16/18] Remove unused type

---
 lib/widgets-customize.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index ead4434b7ed1c..ab88b90096cee 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -39,7 +39,6 @@ function gutenberg_widgets_customize_register( $manager ) {
 		$manager->add_setting(
 			"sidebars_widgets[$sidebar_id]",
 			array(
-				'type'       => 'gutenberg_widget_blocks',
 				'capability' => 'edit_theme_options',
 				'transport'  => 'postMessage',
 			)

From e4dad861ee60089ae4a75416d899e804bcedeb4b Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 11:56:23 +0800
Subject: [PATCH 17/18] Rename to SidebarControl

---
 packages/customize-widgets/src/index.js                       | 4 ++--
 .../src/{customize-control.js => sidebar-control.js}          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/customize-widgets/src/{customize-control.js => sidebar-control.js} (83%)

diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index f637f2584ac9b..3dbdbf469843f 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -11,7 +11,7 @@ import {
 /**
  * Internal dependencies
  */
-import CustomizeControl from './customize-control';
+import SidebarControl from './sidebar-control';
 
 const { wp } = window;
 
@@ -56,7 +56,7 @@ export function initialize() {
 		},
 	} );
 
-	wp.customize.controlConstructor.sidebar_block_editor = CustomizeControl;
+	wp.customize.controlConstructor.sidebar_block_editor = SidebarControl;
 }
 
 initialize();
diff --git a/packages/customize-widgets/src/customize-control.js b/packages/customize-widgets/src/sidebar-control.js
similarity index 83%
rename from packages/customize-widgets/src/customize-control.js
rename to packages/customize-widgets/src/sidebar-control.js
index c4ee281360379..f294d0a0ea6d0 100644
--- a/packages/customize-widgets/src/customize-control.js
+++ b/packages/customize-widgets/src/sidebar-control.js
@@ -11,7 +11,7 @@ import SidebarAdapter from './components/sidebar-block-editor/sidebar-adapter';
 
 const { wp } = window;
 
-const CustomizeControl = wp.customize.Control.extend( {
+const SidebarControl = wp.customize.Control.extend( {
 	ready() {
 		render(
 			<SidebarBlockEditor
@@ -22,4 +22,4 @@ const CustomizeControl = wp.customize.Control.extend( {
 	},
 } );
 
-export default CustomizeControl;
+export default SidebarControl;

From 59d36e572c8f43289b9d1f5f15b9e0b4ee3555dc Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 9 Feb 2021 12:33:29 +0800
Subject: [PATCH 18/18] Delay initializing the customizer until dom ready

---
 ...r-control.js => create-sidebar-control.js} | 24 +++++++++----------
 packages/customize-widgets/src/index.js       |  6 ++---
 2 files changed, 15 insertions(+), 15 deletions(-)
 rename packages/customize-widgets/src/{sidebar-control.js => create-sidebar-control.js} (53%)

diff --git a/packages/customize-widgets/src/sidebar-control.js b/packages/customize-widgets/src/create-sidebar-control.js
similarity index 53%
rename from packages/customize-widgets/src/sidebar-control.js
rename to packages/customize-widgets/src/create-sidebar-control.js
index f294d0a0ea6d0..464d2524704da 100644
--- a/packages/customize-widgets/src/sidebar-control.js
+++ b/packages/customize-widgets/src/create-sidebar-control.js
@@ -11,15 +11,15 @@ import SidebarAdapter from './components/sidebar-block-editor/sidebar-adapter';
 
 const { wp } = window;
 
-const SidebarControl = wp.customize.Control.extend( {
-	ready() {
-		render(
-			<SidebarBlockEditor
-				sidebar={ new SidebarAdapter( this.setting, wp.customize ) }
-			/>,
-			this.container[ 0 ]
-		);
-	},
-} );
-
-export default SidebarControl;
+export default function createSidebarControl() {
+	return wp.customize.Control.extend( {
+		ready() {
+			render(
+				<SidebarBlockEditor
+					sidebar={ new SidebarAdapter( this.setting, wp.customize ) }
+				/>,
+				this.container[ 0 ]
+			);
+		},
+	} );
+}
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 3dbdbf469843f..47838b0a94da6 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -11,7 +11,7 @@ import {
 /**
  * Internal dependencies
  */
-import SidebarControl from './sidebar-control';
+import createSidebarControl from './create-sidebar-control';
 
 const { wp } = window;
 
@@ -56,7 +56,7 @@ export function initialize() {
 		},
 	} );
 
-	wp.customize.controlConstructor.sidebar_block_editor = SidebarControl;
+	wp.customize.controlConstructor.sidebar_block_editor = createSidebarControl();
 }
 
-initialize();
+wp.domReady( initialize );