Add Tree mode

WordPress · Oct 8, 2021 · 5ece076 · 5ece076
1 parent fdff9ca
commit 5ece076
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -524,7 +524,10 @@ body.editor-styles-wrapper
 	// Increase specificity.
 	.wp-block-navigation-item {
 		display: block;
-		margin: $grid-unit-10 0;
+
+		&.wp-block {
+			margin: #{$grid-unit-05 + 1px} $grid-unit-05 $grid-unit-05 $grid-unit-05;
+		}
 
 		// Show submenus on click.
 		> .wp-block-navigation__submenu-container {
@@ -547,21 +550,25 @@ body.editor-styles-wrapper
 		}
 
 		.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
+			position: relative;
 			padding: 0.5em 1em;
 			margin-right: 0;
 			border-radius: $radius-block-ui;
 
 			&:hover {
-				box-shadow: 0 0 0 $border-width $gray-300;
+				box-shadow: 0 0 0 $border-width $gray-600;
 			}
 		}
 
+		.wp-block-navigation-item__label,
+		.wp-block-navigation-item__placeholder-text,
 		.wp-block-navigation-link__label,
 		.wp-block-navigation-link__placeholder-text {
 			padding: $grid-unit-05;
 			padding-left: $grid-unit-10;
 		}
 
+		.wp-block-navigation-item__label,
 		.wp-block-navigation-link__label {
 			// Without this Links with submenus display a pointer.
 			cursor: text;
@@ -588,7 +595,8 @@ body.editor-styles-wrapper
 	// Submenu icon indicator.
 	.wp-block-navigation__submenu-icon {
 		position: absolute;
-		top: 15px;
+		top: 50%;
+		margin-top: -7px;
 		left: 0;
 		padding: 0;
 		pointer-events: none;

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -255,9 +255,11 @@
  */
 
 // Menu items with no background.
-.wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
-	gap: 0.5em 2em;
+.wp-block-navigation:where(:not(.is-tree-view)) {
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0.5em 2em;
+	}
 }
 
 // Menu items with background.