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 @@
+ wp.customize.Control.extend( {
+ ready() {
+ render(
+ ,
+ 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(
- ,
- document.getElementById( id )
- );
- }, 0 );
+ window.wp.customize.controlConstructor.sidebar_block_editor = createCustomizerControl(
+ { settings }
+ );
}
/**