Try: Remove padding from menu items when no background

WordPress · Apr 13, 2021 · 3af17af · 3af17af
1 parent 8eaf922
commit 3af17af
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -8,7 +8,7 @@
 		display: flex;
 		align-items: center;
 		position: relative;
-		margin: 0 0.5em 0 0;
+		margin: 0 2em 0 0;
 
 		.wp-block-navigation-link__container:empty {
 			display: none;
@@ -27,7 +27,21 @@
 		// Inherit colors set by the block color definition.
 		color: inherit;
 		display: block;
-		padding: 0.5em 1em;
+	}
+
+	// Treat margins and paddings differently when the block has a background.
+	&.has-background {
+		// Menu item container.
+		.wp-block-pages-list__item,
+		.wp-block-navigation-link {
+			margin: 0 0.5em 0 0;
+		}
+
+		// Menu item link.
+		.wp-block-pages-list__item__link,
+		.wp-block-navigation-link__content {
+			padding: 0.5em 1em;
+		}
 	}
 
 	// Force links to inherit text decoration applied to navigation block.
@@ -216,6 +230,9 @@
 		color: #000;
 		border: 1px solid rgba(0, 0, 0, 0.15);
 
+		// Add some padding to menus even if the parent menu item doesn't have.
+		padding: 1em;
+
 		.submenu-container,
 		.wp-block-navigation-link__container {
 			top: -1px;

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -15,13 +15,14 @@
 	// Unset horizontal and vertical margin rules from editor normalization stylesheet.
 	// Both margin-left: auto; and margin-right: auto; from .wp-block, and also
 	// margin: revert; from .editor-styles-wrapper ul li.
+	// These rules are not necessary for block themes.
 	.block-editor-block-list__block {
 		margin: 0;
 
 		// This CSS provides a little spacing between blocks.
 		// It matches a rule in style.scss exactly, but needs higher specificity due to the unsetting of inherited styles above.
 		&.wp-block-navigation-link {
-			margin: 0 0.5em 0 0;
+			margin: 0 2em 0 0;
 		}
 
 		&.has-child .block-editor-block-list__block.wp-block-navigation-link {
@@ -34,6 +35,13 @@
 			margin-right: 0;
 		}
 	}
+
+	&.block-editor-block-list__block.has-background {
+		.wp-block-pages-list__item.wp-block-pages-list__item,
+		.wp-block-navigation-link.wp-block-navigation-link {
+			margin: 0 0.5em 0 0;
+		}
+	}
 }