From 7cf1ceddbef6ea3802014c43ea16d193febcb6d1 Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Sun, 8 Dec 2024 07:44:53 +0530
Subject: [PATCH] Remove .components-item-group selector in edit-site
 components[2] (#67575)

* fix: Removed .components-item-group selector class usage in scss file in edit-site components

Applied horizontal margins to the following screens
1. Navigation
2. Pages
3. Templates
4. Patterns

* fix: Added sidebar-navigation-screen-main/style.scss file correctly

* refactor: CSS code for sidebar in editor

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
---
 packages/edit-site/src/components/sidebar-dataviews/index.js | 2 +-
 .../edit-site/src/components/sidebar-dataviews/style.scss    | 5 +++++
 .../src/components/sidebar-navigation-screen-main/index.js   | 2 +-
 .../src/components/sidebar-navigation-screen-main/style.scss | 4 ++++
 .../sidebar-navigation-screen-navigation-menus/index.js      | 2 +-
 .../sidebar-navigation-screen-navigation-menus/style.scss    | 5 +++++
 .../components/sidebar-navigation-screen-patterns/style.scss | 2 ++
 .../sidebar-navigation-screen-templates-browse/content.js    | 2 +-
 .../sidebar-navigation-screen-templates-browse/style.scss    | 4 ++++
 .../src/components/sidebar-navigation-screen/style.scss      | 5 -----
 packages/edit-site/src/style.scss                            | 4 +++-
 11 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-main/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss

diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
index 410767650c6f36..312bf43d6df657 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/index.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) {
 
 	return (
 		<>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-dataviews">
 				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
index a36d693c4f80ea..6d4c01e1a222b6 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/style.scss
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -7,6 +7,11 @@
 	}
 }
 
+.edit-site-sidebar-dataviews {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
 .edit-site-sidebar-dataviews-dataview-item {
 	border-radius: $radius-small;
 	padding-right: $grid-unit-10;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 5cf162a8cd28cc..bd40a5ad540d4c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -18,7 +18,7 @@ import { store as editSiteStore } from '../../store';
 
 export function MainSidebarNavigationContent() {
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			<SidebarNavigationItem
 				uid="navigation-navigation-item"
 				to="/navigation"
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-main/style.scss
new file mode 100644
index 00000000000000..f8190ec097c485
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-main {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index dc3dd879611843..1fc7d61318c57a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -116,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreenWrapper backPath={ backPath }>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-navigation-menus">
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
 						postId={ id }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 544aad5075aec0..959ed07938e5df 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -2,6 +2,11 @@
 	margin: 0 0 $grid-unit-40 0;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
index 19885eb3baf2cb..fd50d757f276b1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
@@ -1,5 +1,7 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
 
 	&:last-of-type {
 		border-bottom: 0;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
index aad38959c73dcd..7920d49a43c8cd 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -57,7 +57,7 @@ export default function DataviewsTemplatesSidebarContent() {
 	}, [ records ] );
 
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
 			<SidebarNavigationItem
 				to="/template"
 				icon={ layout }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss
new file mode 100644
index 00000000000000..8846d5a4b47b4d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-templates-browse {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 1486e6b7258441..71704653b4cd89 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -18,11 +18,6 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.components-item-group {
-		margin-left: -$grid-unit-20;
-		margin-right: -$grid-unit-20;
-	}
-
 	.components-text {
 		color: $gray-400;
 	}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 4269cdb4bc90d1..9f98c2c172e091 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -21,9 +21,11 @@
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
+@import "./components/sidebar-navigation-screen-main/style.scss";
+@import "./components/sidebar-navigation-screen-templates-browse/style.scss";
 @import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
-@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";