Refactor sidebar controls provider to application level so that its s…

…tate is not lost when re-initializing
WordPress · Jul 30, 2021 · 7d607ff · 7d607ff
1 parent 5b7a7dc
commit 7d607ff
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 38 deletions.
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
@@ -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 (
+		<ActiveSidebarControlContext.Provider value={ activeSidebarControl }>
+			{ children }
+		</ActiveSidebarControlContext.Provider>
+	);
+}
+
+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
@@ -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 (
 		<SlotFillProvider>
-			<SidebarControls
-				sidebarControls={ sidebarControls }
-				activeSidebarControl={ activeSidebarControl }
-			>
-				<FocusControl api={ api } sidebarControls={ sidebarControls }>
-					{ activeSidebar }
-					{ popover }
-				</FocusControl>
-			</SidebarControls>
+			<FocusControl api={ api } sidebarControls={ sidebarControls }>
+				{ activeSidebar }
+				{ popover }
+			</FocusControl>
 		</SlotFillProvider>
 	);
 }
diff --git 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
@@ -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(
-			<CustomizeWidgets
-				api={ wp.customize }
-				sidebarControls={ sidebarControls }
-				blockEditorSettings={ blockEditorSettings }
-				onError={ reboot }
-			/>,
+			<SidebarControls sidebarControls={ sidebarControls }>
+				<CustomizeWidgets
+					api={ wp.customize }
+					sidebarControls={ sidebarControls }
+					blockEditorSettings={ blockEditorSettings }
+					onError={ reboot }
+				/>
+			</SidebarControls>,
 			container
 		);
 	} );