Update navigation editor styles

WordPress · Aug 25, 2021 · 5bd48ab · 5bd48ab
1 parent bf8e17b
commit 5bd48ab
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
@@ -30,11 +30,12 @@
 		font-family: $default-font;
 
 		// Increase specificity.
-		.wp-block-navigation-link {
+		.wp-block-navigation-link,
+		.wp-block-navigation-submenu {
 			display: block;
 
 			// Show submenus on click.
-			> .wp-block-navigation-link__container {
+			> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 				// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
 				opacity: 1;
 				visibility: visible;
@@ -44,8 +45,8 @@
 			}
 
 			// Fix focus outlines.
-			&.is-selected > .wp-block-navigation-link__content,
-			&.is-selected:hover > .wp-block-navigation-link__content {
+			&.is-selected > .wp-block-navigation-item__content,
+			&.is-selected:hover > .wp-block-navigation-item__content {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			}
 
@@ -55,11 +56,12 @@
 
 			// Menu items.
 			// This needs high specificity to override inherited values.
-			&.wp-block-navigation-link.wp-block-navigation-link {
+			&.wp-block-navigation-link.wp-block-navigation-link,
+			&.wp-block-navigation-submenu .wp-block-navigation-submenu {
 				margin-right: 0;
 			}
 
-			.wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
+			.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
 				padding: 0.5em 1em;
 				margin-bottom: 6px;
 				margin-right: 0;
@@ -124,22 +126,22 @@
 		}
 
 		// Override inherited values to optimize menu items for the screen context.
+		.wp-block-navigation-submenu.has-child,
 		.wp-block-navigation-link.has-child {
 			cursor: default;
 			border-radius: $radius-block-ui;
 		}
 
 		// Override for deeply nested submenus.
-		.has-child .wp-block-navigation__container .wp-block-navigation__container,
-		.has-child .wp-block-navigation__container .wp-block-navigation-link__container {
+		.has-child .wp-block-navigation__submenu-container {
 			left: auto;
 		}
 
 		// When editing a link with children, highlight the parent
 		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-link.has-child.is-editing {
-			> .wp-block-navigation__container,
-			> .wp-block-navigation-link__container {
+		.wp-block-navigation-link.has-child.is-editing,
+		.wp-block-navigation-submenu.has-child.is-editing {
+			> .wp-block-navigation__submenu-container {
 				opacity: 1;
 				visibility: visible;
 				position: relative;