Remove .components-item-group selector in edit-site components[2] (#6…

…7575) * 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 <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Dec 8, 2024 · 7cf1ced · 7cf1ced · github-actions · Dec 8, 2024
1 parent df98e37
commit 7cf1ced
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";