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

@@ -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;
 }

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 }

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