From 3ff94bb856bd9586c1c207e2f61eabd26c6dba60 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 10 Nov 2021 14:36:10 +0100
Subject: [PATCH 1/2] Navigation: Refactor and simplify setup state.

---
 .../src/navigation/edit/placeholder/index.js  | 58 ++++++++++---------
 .../block-library/src/navigation/editor.scss  | 39 +++++++------
 .../components/src/placeholder/style.scss     |  8 +++
 3 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 2c7155fdf81c1..73645d496ea66 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { navigation, chevronDown, Icon } from '@wordpress/icons';
+import { navigation, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -34,13 +34,14 @@ const ExistingMenusDropdown = ( {
 	onCreateFromMenu,
 } ) => {
 	const toggleProps = {
-		variant: 'primary',
+		variant: 'tertiary',
+		iconPosition: 'right',
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
 	return (
 		<DropdownMenu
-			text={ __( 'Select existing menu' ) }
-			icon={ chevronDown }
+			text={ __( 'Existing menu' ) }
+			icon={ null }
 			toggleProps={ toggleProps }
 			popoverProps={ { isAlternate: true } }
 		>
@@ -201,32 +202,35 @@ export default function NavigationPlaceholder( {
 								<Icon icon={ navigation } />{ ' ' }
 								{ __( 'Navigation' ) }
 							</div>
+							<hr />
 							{ hasMenus || navigationMenus.length ? (
-								<ExistingMenusDropdown
-									canSwitchNavigationMenu={
-										canSwitchNavigationMenu
-									}
-									navigationMenus={ navigationMenus }
-									setSelectedMenu={ setSelectedMenu }
-									onFinish={ onFinish }
-									menus={ menus }
-									onCreateFromMenu={ onCreateFromMenu }
-								/>
+								<>
+									<ExistingMenusDropdown
+										canSwitchNavigationMenu={
+											canSwitchNavigationMenu
+										}
+										navigationMenus={ navigationMenus }
+										setSelectedMenu={ setSelectedMenu }
+										onFinish={ onFinish }
+										menus={ menus }
+										onCreateFromMenu={ onCreateFromMenu }
+									/>
+									<hr />
+								</>
 							) : undefined }
 							{ hasPages ? (
-								<Button
-									variant={
-										hasMenus || canSwitchNavigationMenu
-											? 'tertiary'
-											: 'primary'
-									}
-									onClick={ () => {
-										setIsNewMenuModalVisible( true );
-										setCreateEmpty( false );
-									} }
-								>
-									{ __( 'Add all pages' ) }
-								</Button>
+								<>
+									<Button
+										variant="tertiary"
+										onClick={ () => {
+											setIsNewMenuModalVisible( true );
+											setCreateEmpty( false );
+										} }
+									>
+										{ __( 'Add all pages' ) }
+									</Button>
+									<hr />
+								</>
 							) : undefined }
 							<Button
 								variant="tertiary"
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 601936b82b15f..ca22554a336ed 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -324,6 +324,11 @@ $color-control-label-height: 20px;
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
 		}
+
+		// Hide the separators in the vertical version.
+		.wp-block-navigation-placeholder__actions hr {
+			display: none;
+		}
 	}
 
 	.wp-block-navigation-placeholder__icon {
@@ -333,24 +338,19 @@ $color-control-label-height: 20px;
 
 	// Block title
 	.wp-block-navigation-placeholder__actions__indicator {
-		margin-right: $grid-unit-15;
-		padding: 0;
+		display: flex;
+		padding: 0 ($grid-unit-15 * 0.5) 0 0;
 		align-items: center;
 		justify-content: flex-start;
 		line-height: 0;
+		min-height: $button-size;
 
 		// Line up with the icon in the toolbar.
-		margin-left: $grid-unit-05 + $border-width;
+		margin-left: $grid-unit-05;
 
 		svg {
 			margin-right: $grid-unit-05;
 		}
-
-		// Show only in big placeholders.
-		display: none;
-		.is-large & {
-			display: inline-flex;
-		}
 	}
 }
 
@@ -358,22 +358,25 @@ $color-control-label-height: 20px;
 	display: flex;
 	font-size: $default-font-size;
 	font-family: $default-font;
-
-	.components-button.components-dropdown-menu__toggle.has-icon {
-		padding:
-			( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
-			$grid-unit-15;
-		display: flex;
-		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
-	}
+	gap: $grid-unit-15 * 0.5;
 
 	// Margins.
 	.components-dropdown,
 	> .components-button {
-		margin-right: $grid-unit-15;
+		margin-right: 0;
+	}
+
+	// Separator.
+	height: 100%; // This allows the separator to scale vertically.
+
+	&.wp-block-navigation-placeholder__actions hr {
+		margin: auto 0;
+		height: 100%;
+		max-height: $grid-unit-20;
 	}
 }
 
+
 /**
  * Mobile menu.
  */
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 53df5294e497f..8c37dbedb898d 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -30,6 +30,14 @@
 	.components-base-control__label {
 		font-size: $default-font-size;
 	}
+
+	// Separator.
+	hr {
+		border: 0;
+		min-height: $border-width;
+		min-width: $border-width;
+		background-color: $gray-900;
+	}
 }
 
 .components-placeholder__error,

From c024a3501327a9c5c4ed4cdcf0adbf56b5c906cf Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Nov 2021 08:31:23 +0100
Subject: [PATCH 2/2] Address feedback.

---
 .../src/navigation/edit/placeholder/index.js              | 2 +-
 packages/block-library/src/navigation/editor.scss         | 5 +++++
 packages/components/src/placeholder/style.scss            | 8 --------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 73645d496ea66..8853eb122377d 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -40,7 +40,7 @@ const ExistingMenusDropdown = ( {
 	};
 	return (
 		<DropdownMenu
-			text={ __( 'Existing menu' ) }
+			text={ __( 'Select menu' ) }
 			icon={ null }
 			toggleProps={ toggleProps }
 			popoverProps={ { isAlternate: true } }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index ca22554a336ed..0fbb03a5ed630 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -369,7 +369,12 @@ $color-control-label-height: 20px;
 	// Separator.
 	height: 100%; // This allows the separator to scale vertically.
 
+	// Separator.
 	&.wp-block-navigation-placeholder__actions hr {
+		border: 0;
+		min-height: $border-width;
+		min-width: $border-width;
+		background-color: $gray-900;
 		margin: auto 0;
 		height: 100%;
 		max-height: $grid-unit-20;
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 8c37dbedb898d..53df5294e497f 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -30,14 +30,6 @@
 	.components-base-control__label {
 		font-size: $default-font-size;
 	}
-
-	// Separator.
-	hr {
-		border: 0;
-		min-height: $border-width;
-		min-width: $border-width;
-		background-color: $gray-900;
-	}
 }
 
 .components-placeholder__error,