From 6e62e8ab741675577a4327524c66c73535a2fed1 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 10 Aug 2018 10:14:46 +0200
Subject: [PATCH] Pad menus (#8758)

* Pad menus

This adds padding to the block more menu. At first glance this will look like much, but in fact it simply makes it the same padding as that of every other popover.

* Sort again.
---
 packages/components/src/menu-group/style.scss        |  4 ++--
 .../src/components/block-settings-menu/index.js      | 12 ++++++------
 .../src/components/block-settings-menu/style.scss    |  3 +++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index 5d0952d468f54b..55d73f0d784d9e 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,9 +1,9 @@
 .components-menu-group {
 	width: 100%;
-	padding: 10px;
+	padding: $item-spacing - $border-width;
 }
 
 .components-menu-group__label {
-	margin-bottom: 10px;
+	margin-bottom: $item-spacing;
 	color: $dark-gray-300;
 }
diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
index 9b6aa24e4441fc..d953895739a703 100644
--- a/packages/editor/src/components/block-settings-menu/index.js
+++ b/packages/editor/src/components/block-settings-menu/index.js
@@ -118,12 +118,6 @@ export class BlockSettingsMenu extends Component {
 						// Should this just use a DropdownMenu instead of a DropDown ?
 						<NavigableMenu className="editor-block-settings-menu__content">
 							<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
-							{ count === 1 && (
-								<BlockModeToggle
-									clientId={ firstBlockClientId }
-									onToggle={ onClose }
-								/>
-							) }
 							{ count === 1 && (
 								<BlockUnknownConvertButton
 									clientId={ firstBlockClientId }
@@ -144,6 +138,12 @@ export class BlockSettingsMenu extends Component {
 									{ __( 'Duplicate' ) }
 								</MenuItem>
 							) }
+							{ count === 1 && (
+								<BlockModeToggle
+									clientId={ firstBlockClientId }
+									onToggle={ onClose }
+								/>
+							) }
 							{ count === 1 && (
 								<ReusableBlockConvertButton
 									clientId={ firstBlockClientId }
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
index 38cc137a4f059d..d189caa25e04b1 100644
--- a/packages/editor/src/components/block-settings-menu/style.scss
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -62,11 +62,14 @@
 
 	.editor-block-settings-menu__content {
 		width: 100%;
+		padding: $item-spacing - $border-width;
 	}
 
 	.editor-block-settings-menu__separator {
 		margin-top: $item-spacing;
 		margin-bottom: $item-spacing;
+		margin-left: -$item-spacing + $border-width;
+		margin-right: -$item-spacing + $border-width;
 		border-top: $border-width solid $light-gray-500;
 
 		// Check if the separator is the last child in the node and if so, hide itself