From 16ec554a2605d45414ee121e2f36c1d7177974ad Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 12 Dec 2023 11:25:59 +0100
Subject: [PATCH] Site editor: do not use navigator's internal classname
 (#56911)

* Apply the `edit-site-sidebar__screen-wrapper` classname to all navigator screens in the site editor sidebar

* Use the newly added classname instead of the private component's classname
---
 .../edit-site/src/components/sidebar/index.js | 65 ++++++++++++-------
 .../src/components/sidebar/style.scss         | 22 +++----
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index b66bf4390a6bc..3fa1280d59f42 100644
--- 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>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index 9a3644cc830d5..ef24b0d4b8cf6 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -1,14 +1,17 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+}
+
+.edit-site-sidebar__screen-wrapper {
+	@include custom-scrollbars-on-hover(transparent, $gray-700);
+	scrollbar-gutter: stable;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 
-	.components-navigator-screen {
-		@include custom-scrollbars-on-hover(transparent, $gray-700);
-		scrollbar-gutter: stable;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
 }
 
 .edit-site-sidebar__footer {
@@ -17,8 +20,3 @@
 	margin: 0 $canvas-padding;
 	padding: $canvas-padding 0;
 }
-
-.edit-site-sidebar__content > div {
-	// This matches the logo padding
-	padding: 0 $grid-unit-15;
-}