Use a Control

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' );
 	}

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;

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 }
+	);
 }
 
 /**