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