Try: Flip orientation of submenus that are towards the right of the v…

…iewport. (#30342)
WordPress · Apr 6, 2021 · 4333b5a · 4333b5a
1 parent 8be7a8d
commit 4333b5a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -15,7 +15,7 @@
 		}
 	}
 
-	// Margin when justified right or space-between.
+	// Margin of right-most margin should be zero, for right aligned or justified items.
 	.wp-block-navigation__container > .wp-block-pages-list__item:last-child,
 	.wp-block-navigation__container > .wp-block-navigation-link:last-child {
 		margin-right: 0;
@@ -181,6 +181,27 @@
 			}
 		}
 	}
+
+
+	// When justified space-between, open submenus leftward for last menu item.
+	// When justified right, open all submenus leftwards.
+	&.items-justified-space-between > .submenu-container > .has-child:last-child,
+	&.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+	&.items-justified-right .has-child {
+		// First submenu.
+		.submenu-container,
+		.wp-block-navigation-link__container {
+			left: auto;
+			right: 0;
+
+			// Nested submenus.
+			.submenu-container,
+			.wp-block-navigation-link__container {
+				left: auto;
+				right: 100%;
+			}
+		}
+	}
 }
 
 // Default background and font color.

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -27,6 +27,12 @@
 		&.has-child .block-editor-block-list__block.wp-block-navigation-link {
 			margin: 0;
 		}
+
+		// Margin of right-most margin should be zero, for right aligned or justified items.
+		&.wp-block-pages-list__item:last-child,
+		&.wp-block-navigation-link:last-child {
+			margin-right: 0;
+		}
 	}
 }