feat: Add horizontal negative margins for navigation, pages, template…

…s and patterns in site editor
WordPress · Dec 2, 2024 · 1e92a58 · 1e92a58
1 parent f27113e
commit 1e92a58
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 3 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
@@ -27,3 +27,8 @@
 		color: $white;
 	}
 }
+
+.edit-site-sidebar-dataviews {
+	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
@@ -46,3 +46,8 @@
 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
 	display: none;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
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
@@ -56,7 +56,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/style.scss b/packages/edit-site/src/style.scss
@@ -35,6 +35,7 @@
 @import "./components/pagination/style.scss";
 @import "./components/global-styles/variations/style.scss";
 @import "./components/sidebar-global-styles-wrapper/style.scss";
+@import "./components/sidebar-navigation-screen-templates-browse/style.scss";
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {