From b386aba523647fc6f7fb929f80853afc963ef094 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 7 Sep 2021 12:01:35 +0800
Subject: [PATCH] Styling adjustments

---
 .../src/components/block-placeholder/index.js | 19 ++++++++-------
 .../components/block-placeholder/style.scss   | 24 ++++++++++++++-----
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/edit-navigation/src/components/block-placeholder/index.js b/packages/edit-navigation/src/components/block-placeholder/index.js
index 98de7b668b1c63..7b4312080f85ea 100644
--- a/packages/edit-navigation/src/components/block-placeholder/index.js
+++ b/packages/edit-navigation/src/components/block-placeholder/index.js
@@ -52,6 +52,9 @@ function convertPagesToBlocks( pages ) {
 	);
 }
 
+const TOGGLE_PROPS = { variant: 'tertiary' };
+const POPOVER_PROPS = { position: 'bottom center' };
+
 function BlockPlaceholder( { onCreate }, ref ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
 	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
@@ -108,10 +111,6 @@ function BlockPlaceholder( { onCreate }, ref ) {
 		}
 	}, [ isCreatingFromMenu, hasResolvedMenuItems ] );
 
-	const toggleProps = {
-		variant: 'tertiary',
-	};
-
 	const selectableMenus = menus?.filter(
 		( menu ) => menu.id !== selectedMenuId
 	);
@@ -120,21 +119,24 @@ function BlockPlaceholder( { onCreate }, ref ) {
 
 	return (
 		<Placeholder
-			className="wp-block-placeholder"
+			className="edit-navigation-block-placeholder"
 			label={ menuName }
 			instructions={ __(
 				'This menu is empty. You can start blank and choose what to add,' +
 					' add your existing pages, or add the content of another menu.'
 			) }
 		>
-			<div className="wp-block-placeholder__controls">
+			<div className="edit-navigation-block-placeholder__controls">
 				{ isLoading && (
 					<div ref={ ref }>
 						<Spinner />
 					</div>
 				) }
 				{ ! isLoading && (
-					<div ref={ ref } className="wp-block-placeholder__actions">
+					<div
+						ref={ ref }
+						className="edit-navigation-block-placeholder__actions"
+					>
 						<Button
 							variant="tertiary"
 							onClick={ onCreateEmptyMenu }
@@ -153,7 +155,8 @@ function BlockPlaceholder( { onCreate }, ref ) {
 							<DropdownMenu
 								text={ __( 'Copy existing menu' ) }
 								icon={ chevronDown }
-								toggleProps={ toggleProps }
+								toggleProps={ TOGGLE_PROPS }
+								popoverProps={ POPOVER_PROPS }
 							>
 								{ ( { onClose } ) => (
 									<MenuGroup>
diff --git a/packages/edit-navigation/src/components/block-placeholder/style.scss b/packages/edit-navigation/src/components/block-placeholder/style.scss
index af9e392326de60..bd9b6eab7c9a93 100644
--- a/packages/edit-navigation/src/components/block-placeholder/style.scss
+++ b/packages/edit-navigation/src/components/block-placeholder/style.scss
@@ -1,8 +1,13 @@
-.wp-block-placeholder {
+.edit-navigation-block-placeholder {
 	// The navigation editor already has a border around content.
 	// Hide the placeholder's border. Requires extra specificity.
-	&.wp-block-placeholder {
+	&.edit-navigation-block-placeholder {
 		box-shadow: none;
+		background: transparent;
+
+		@include break-medium() {
+			margin: -$grid-unit-20 0;
+		}
 	}
 
 	// Show placeholder instructions when it's a medium size.
@@ -11,29 +16,36 @@
 	}
 
 	// Display buttons in a column when placeholder is small.
-	.wp-block-placeholder__actions {
+	.edit-navigation-block-placeholder__actions {
 		display: flex;
 		flex-direction: column;
+		align-items: flex-start;
 
 		.components-button {
-			margin-bottom: $grid-unit-15;
+			margin-bottom: $grid-unit-05;
 			margin-right: 0;
 
 			// Avoid bottom margin on the dropdown since it makes the
 			// menu anchor itself too far away from the button.
 			&.components-dropdown-menu__toggle {
 				margin-bottom: 0;
+
+				svg {
+					// Make the spacing inside the left of the button match the
+					// spacing inside the right of the button.
+					margin-left: -6px;
+				}
 			}
 		}
 	}
 
 	@include break-medium() {
-		.wp-block-placeholder__actions {
+		.edit-navigation-block-placeholder__actions {
 			flex-direction: row;
 		}
 
 		// Change the default button margin. Again use extra specificity.
-		&.wp-block-placeholder.is-medium .components-button {
+		&.edit-navigation-block-placeholder.is-medium .components-button {
 			margin-bottom: 0;
 			margin-right: $grid-unit-15;
 		}