Apply the edit-site-sidebar__screen-wrapper classname to all naviga…

…tor screens in the site editor sidebar
WordPress · Dec 8, 2023 · 22a531f · 22a531f
1 parent 7872195
commit 22a531f
Showing 1 changed file with 41 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -33,53 +38,65 @@ import DataViewsSidebarContent from '../sidebar-dataviews';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+function SidebarScreenWrapper( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ classNames(
+				'edit-site-sidebar__screen-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 function SidebarScreens() {
 	useSyncPathWithURL();
 
 	return (
 		<>
-			<NavigatorScreen path="/">
+			<SidebarScreenWrapper path="/">
 				<SidebarNavigationScreenMain />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation/:postType/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationMenu />
-			</NavigatorScreen>
-			<NavigatorScreen path="/wp_global_styles">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page">
 				<SidebarNavigationScreenPages />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />
-			</NavigatorScreen>
+			</SidebarScreenWrapper>
 			{ window?.__experimentalAdminViews && (
-				<NavigatorScreen path="/pages">
+				<SidebarScreenWrapper path="/pages">
 					<SidebarNavigationScreen
 						title={ __( 'Pages' ) }
 						backPath="/page"
 						content={ <DataViewsSidebarContent /> }
 					/>
-				</NavigatorScreen>
+				</SidebarScreenWrapper>
 			) }
-			<NavigatorScreen path="/:postType(wp_template)">
+			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
-			</NavigatorScreen>
-			<NavigatorScreen path="/patterns">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/patterns">
 				<SidebarNavigationScreenPatterns />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
-			</NavigatorScreen>
+			</SidebarScreenWrapper>
 		</>
 	);
 }