diff --git a/packages/customize-widgets/src/components/active-sidebar-control-provider/index.js b/packages/customize-widgets/src/components/active-sidebar-control-provider/index.js
new file mode 100644
index 0000000000000..1880a3a0bfc9e
--- /dev/null
+++ b/packages/customize-widgets/src/components/active-sidebar-control-provider/index.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ createContext,
+ useContext,
+ useEffect,
+ useState,
+} from '@wordpress/element';
+
+const ActiveSidebarControlContext = createContext( [] );
+
+export default function ActiveSidebarControlProvider( {
+ children,
+ sidebarControls,
+} ) {
+ const [ activeSidebarControl, setActiveSidebarControl ] = useState( null );
+
+ useEffect( () => {
+ const unsubscribers = sidebarControls.map( ( sidebarControl ) =>
+ sidebarControl.subscribe( ( expanded ) => {
+ if ( expanded ) {
+ setActiveSidebarControl( sidebarControl );
+ }
+ } )
+ );
+
+ return () => {
+ unsubscribers.forEach( ( unsubscriber ) => unsubscriber() );
+ };
+ }, [ sidebarControls ] );
+
+ return (
+
+ { children }
+
+ );
+}
+
+export const useActiveSidebarControl = () =>
+ useContext( ActiveSidebarControlContext );
diff --git a/packages/customize-widgets/src/components/customize-widgets/index.js b/packages/customize-widgets/src/components/customize-widgets/index.js
index 78625a5755cf1..aac960bc3b3dd 100644
--- a/packages/customize-widgets/src/components/customize-widgets/index.js
+++ b/packages/customize-widgets/src/components/customize-widgets/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { useState, useEffect, useRef, createPortal } from '@wordpress/element';
+import { useRef, createPortal } from '@wordpress/element';
import { SlotFillProvider, Popover } from '@wordpress/components';
/**
@@ -10,7 +10,7 @@ import { SlotFillProvider, Popover } from '@wordpress/components';
import ErrorBoundary from '../error-boundary';
import SidebarBlockEditor from '../sidebar-block-editor';
import FocusControl from '../focus-control';
-import SidebarControls from '../sidebar-controls';
+import { useActiveSidebarControl } from '../sidebar-controls';
import useClearSelectedBlock from './use-clear-selected-block';
export default function CustomizeWidgets( {
@@ -19,28 +19,14 @@ export default function CustomizeWidgets( {
blockEditorSettings,
onError,
} ) {
- const [ activeSidebarControl, setActiveSidebarControl ] = useState( null );
const parentContainer = document.getElementById(
'customize-theme-controls'
);
const popoverRef = useRef();
+ const activeSidebarControl = useActiveSidebarControl();
useClearSelectedBlock( activeSidebarControl, popoverRef );
- useEffect( () => {
- const unsubscribers = sidebarControls.map( ( sidebarControl ) =>
- sidebarControl.subscribe( ( expanded ) => {
- if ( expanded ) {
- setActiveSidebarControl( sidebarControl );
- }
- } )
- );
-
- return () => {
- unsubscribers.forEach( ( unsubscriber ) => unsubscriber() );
- };
- }, [ sidebarControls ] );
-
const activeSidebar =
activeSidebarControl &&
createPortal(
@@ -69,15 +55,10 @@ export default function CustomizeWidgets( {
return (
-
-
- { activeSidebar }
- { popover }
-
-
+
+ { activeSidebar }
+ { popover }
+
);
}
diff --git a/packages/customize-widgets/src/components/sidebar-controls/index.js b/packages/customize-widgets/src/components/sidebar-controls/index.js
index 3f39b2bb419fa..0c4ca7285eebb 100644
--- a/packages/customize-widgets/src/components/sidebar-controls/index.js
+++ b/packages/customize-widgets/src/components/sidebar-controls/index.js
@@ -1,15 +1,33 @@
/**
* WordPress dependencies
*/
-import { createContext, useMemo, useContext } from '@wordpress/element';
+import {
+ createContext,
+ useMemo,
+ useContext,
+ useEffect,
+ useState,
+} from '@wordpress/element';
export const SidebarControlsContext = createContext();
-export default function SidebarControls( {
- sidebarControls,
- activeSidebarControl,
- children,
-} ) {
+export default function SidebarControls( { sidebarControls, children } ) {
+ const [ activeSidebarControl, setActiveSidebarControl ] = useState( null );
+
+ useEffect( () => {
+ const unsubscribers = sidebarControls.map( ( sidebarControl ) =>
+ sidebarControl.subscribe( ( expanded ) => {
+ if ( expanded ) {
+ setActiveSidebarControl( sidebarControl );
+ }
+ } )
+ );
+
+ return () => {
+ unsubscribers.forEach( ( unsubscriber ) => unsubscriber() );
+ };
+ }, [ sidebarControls ] );
+
const context = useMemo(
() => ( {
sidebarControls,
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index c40142bf5351e..84df6c1fc16d2 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -17,6 +17,7 @@ import { setFreeformContentHandlerName } from '@wordpress/blocks';
* Internal dependencies
*/
import CustomizeWidgets from './components/customize-widgets';
+import SidebarControls from './components/sidebar-controls';
import getSidebarSection from './controls/sidebar-section';
import getSidebarControl from './controls/sidebar-control';
import './filters';
@@ -100,12 +101,14 @@ export function initialize( editorName, blockEditorSettings ) {
);
render(
- ,
+
+
+ ,
container
);
} );