Refactor and simplify navigation block CSS. (#29465)

* Retire theme.scss. * Group reset styles. * Retire dead CSS. The custom select control does not appear used at all in the placeholder anymore. See also #23297. * Whitespace and color tweaks. * Show submenus above the sibling inserter. * Address feedback.
WordPress · Mar 10, 2021 · 1c1db1e · 1c1db1e
1 parent d388883
commit 1c1db1e
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 106 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -41,6 +41,9 @@ $z-layers: (
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
+	// Navigation menu dropdown.
+	".has-child .wp-block-navigation-link__container": 28,
+
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,
 

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -1,17 +1,22 @@
 // Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation-link__field .components-text-control__input.components-text-control__input,
 .wp-block-navigation-link__container {
 	border-radius: 0;
-	// Make it the same height as the appender to prevent a jump. Maybe revisit this.
-	line-height: $button-size;
+
+	// Make it the same height as the appender to prevent a jump.
 	min-height: $button-size;
 }
 
+// Show submenus above the sibling inserter.
+.has-child .wp-block-navigation-link__container {
+	z-index: z-index(".has-child .wp-block-navigation-link__container");
+}
+
 /**
- * Adjust Navigation Item.
+ * Navigation Items.
  */
+
 .wp-block-navigation-link {
-	.block-editor-block-list__layout {
+	.wp-block-navigation-link__container {
 		display: block;
 	}
 
@@ -33,29 +38,17 @@
 	}
 }
 
-// Separator
-.wp-block-navigation-link__separator {
-	margin: $grid-unit-10 0 $grid-unit-10;
-	border-top: $border-width solid $gray-300;
-}
-
-// Popover styles
-.components-popover.wp-block-navigation-link__dropdown-content {
-	margin-top: -1px;
-	margin-left: -4px;
-}
-
-.wp-block-navigation-link__dropdown-content .components-popover__content > div {
-	padding: $grid-unit-10 0;
-}
-
 .wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] {
 	& > .block-editor-block-list__insertion-point {
 		display: none;
 	}
 }
 
-// Menu item setup state, is shown when a menu item has no URL configured.
+
+/**
+ * Menu item setup state. Is shown when a menu item has no URL configured.
+ */
+
 .wp-block-navigation-link__placeholder {
 	position: relative;
 	cursor: pointer;

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -9,11 +9,12 @@
 	}
 }
 
-// Styles for submenu flyout
+// Styles for submenu flyout.
 .has-child {
 	> .wp-block-navigation-link__content {
 		padding-right: 0.5em;
 	}
+
 	.wp-block-navigation-link__container {
 		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
@@ -61,6 +62,8 @@
 			}
 		}
 	}
+
+	// Show submenus on hover.
 	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
 	// We will need to replace focus-within with a JS solution for IE keyboard support.
 	&:hover {
@@ -74,6 +77,7 @@
 		}
 	}
 
+	// Keep submenus open when focus is within.
 	&:focus-within {
 		cursor: pointer;
 
@@ -93,12 +97,11 @@
 		// NOTE TO DEVS - if refactoring this code, please double-check that
 		// submenus have a default background color, this feature has regressed
 		// several times, so care needs to be taken.
-		background-color: $white;
-		color: $gray-900;
+		background-color: #fff;
+		color: #000;
 	}
 }
 
-
 // Force links to inherit text decoration applied to navigation block.
 .wp-block-navigation[style*="text-decoration"] {
 	.wp-block-navigation-link__container,
@@ -126,7 +129,7 @@
 	}
 }
 
-// All links
+// All links.
 .wp-block-navigation-link__content {
 	color: inherit;
 	padding: 0.5em 1em;

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -1,18 +1,26 @@
+/**
+ * Editor only CSS.
+ */
+
 // Undo default editor styles.
-.editor-styles-wrapper .wp-block-navigation ul,
-.editor-styles-wrapper .wp-block-navigation ol {
-	margin-bottom: 0;
-	margin-left: 0;
-	padding-left: 0;
-}
+// These need extra specificity.
+.editor-styles-wrapper .wp-block-navigation {
+	ul {
+		margin-bottom: 0;
+		margin-left: 0;
+		padding-left: 0;
+	}
 
-.editor-styles-wrapper .wp-block-navigation .block-editor-block-list__block {
-	margin: 0;
+	// Unset horizontal and vertical margin rules from editor normalization stylesheet.
+	.block-editor-block-list__block {
+		margin: 0;
+	}
 }
 
-.wp-block-navigation__inserter-content {
-	padding: $grid-unit-20;
-}
+
+/**
+ * Submenus.
+ */
 
 // Ensure sub-menus stay open and visible when a nested block is selected.
 .wp-block-navigation__container.is-parent-of-selected-block {
@@ -49,6 +57,14 @@
 	}
 }
 
+// IE fix for submenu visibility on parent focus
+.is-editing > .wp-block-navigation__container {
+	visibility: visible;
+	opacity: 1;
+	display: flex;
+	flex-direction: column;
+}
+
 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
@@ -63,6 +79,7 @@
 /**
  * Colors Selector component
  */
+
 $colors-selector-size: 22px;
 .block-library-colors-selector {
 	width: auto;
@@ -138,57 +155,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-// IE fix for submenu visibility on parent focus
-
-.is-editing > .wp-block-navigation__container {
-	visibility: visible;
-	opacity: 1;
-	display: flex;
-	flex-direction: column;
-}
-
-.wp-block-navigation-placeholder {
-	.components-custom-select-control__button {
-		height: auto;
-		padding: 0.375rem 0.75rem 0.375rem 1.5rem;
-		min-width: 13.75rem; // avoids control size jump depending on selection
-	}
-
-	// Styles for when there are Menus present in the dropdown.
-	.components-custom-select-control.has-menus .components-custom-select-control__item {
-		// Creates a faux divider between the menu options if present
-		&.is-create-empty-option {
-			position: relative; // positioning context for pseudo
-			margin-top: 20px;
-
-			&::before {
-				content: "";
-				position: absolute; // take out of flow to retain size of list item
-				top: -10px;
-				left: 25px; // match list item padding
-				right: 25px; // match list item padding
-				height: 15px;
-				border-top: 1px solid $gray-700;
-			}
-		}
-	}
-
-	.components-custom-select-control__label {
-		margin-bottom: 1rem;
-
-		// Overrides theme styles (Twenty Twenty).
-		font-size: $default-font-size;
-		font-weight: normal;
-	}
-
-	.components-custom-select-control__menu {
-		margin: 0;
-		max-height: none;
-		font-family: $default-font;
-		font-size: $default-font-size;
-	}
-}
-
 .wp-block-navigation .block-editor-button-block-appender {
 	justify-content: flex-start;
 }

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -1,7 +1,20 @@
-.wp-block-navigation .wp-block-navigation__container {
+.wp-block-navigation {
+	// Normalize list styles.
+	ul,
+	ul li {
+		list-style: none;
+
+		// Overrides generic ".entry-content li" styles on the front end.
+		margin: 0;
+		padding: 0;
+	}
+
+	// Submenus.
 	.wp-block-navigation__container {
-		align-items: normal;
-		min-width: 200px;
+		.wp-block-navigation__container {
+			align-items: normal;
+			min-width: 200px;
+		}
 	}
 }
 
@@ -19,13 +32,12 @@
 	flex-wrap: wrap;
 
 	// Vertical layout
-
 	.is-vertical & {
 		display: block;
 	}
-
 }
 
+// Justification.
 .items-justified-center > ul {
 	justify-content: center;
 }

diff --git a/packages/block-library/src/navigation/theme.scss b/packages/block-library/src/navigation/theme.scss
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
@@ -9,7 +9,6 @@
 @import "./gallery/theme.scss";
 @import "./image/theme.scss";
 @import "./pullquote/theme.scss";
-@import "./navigation/theme.scss";
 @import "./quote/theme.scss";
 @import "./search/theme.scss";
 @import "./group/theme.scss";