From ffe28be9685834b8b14149b5540bb4e8099beb3f Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 8 Jun 2020 10:01:58 +0200
Subject: [PATCH] Simplify handle positioning variables.

---
 .../src/components/block-toolbar/style.scss   | 36 +++++++++----------
 packages/components/src/draggable/index.js    |  2 +-
 packages/components/src/draggable/style.scss  |  6 ++--
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index b70e02803224a..26180931d49f2 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -105,24 +105,20 @@
 }
 
 // Show a draggable handle when you're dragging using the toolbar component.
-.block-editor-block-toolbar__drag-clone {
-	margin-top: -$block-toolbar-height; // This puts it closer to the drag handle.
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		top: 0;
-		width: $button-size * 2;
-		height: $block-toolbar-height;
-		border-radius: $radius-block-ui;
-		background-color: $dark-gray-primary;
-		border: $border-width solid $dark-gray-primary;
-
-		// This should be reconsidered if successful.
-		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
-		background-size: $icon-size;
-		background-repeat: no-repeat;
-		background-position: center center;
-	}
+.block-editor-block-toolbar__drag-clone::before {
+	content: "";
+	display: block;
+	position: absolute;
+	top: -$block-toolbar-height - $grid-unit-15;
+	width: $button-size * 2;
+	height: $block-toolbar-height;
+	border-radius: $radius-block-ui;
+	background-color: $dark-gray-primary;
+	border: $border-width solid $dark-gray-primary;
+
+	// This should be reconsidered if successful.
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+	background-size: $icon-size;
+	background-repeat: no-repeat;
+	background-position: center center;
 }
diff --git a/packages/components/src/draggable/index.js b/packages/components/src/draggable/index.js
index 0a40cb032e762..0a44ebeb70d8b 100644
--- a/packages/components/src/draggable/index.js
+++ b/packages/components/src/draggable/index.js
@@ -12,7 +12,7 @@ import { withSafeTimeout } from '@wordpress/compose';
 const dragImageClass = 'components-draggable__invisible-drag-image';
 const cloneWrapperClass = 'components-draggable__clone';
 const cloneHeightTransformationBreakpoint = 700;
-const clonePadding = 20;
+const clonePadding = 0;
 
 class Draggable extends Component {
 	constructor() {
diff --git a/packages/components/src/draggable/style.scss b/packages/components/src/draggable/style.scss
index 7dc5a0b4cfdda..6cbc4ff09db4d 100644
--- a/packages/components/src/draggable/style.scss
+++ b/packages/components/src/draggable/style.scss
@@ -12,12 +12,14 @@ body.is-dragging-components-draggable {
 
 .components-draggable__clone {
 	position: fixed;
-	padding: 20px;
+	padding: 0; // Should match clonePadding variable.
 	background: transparent;
 	pointer-events: none;
 	z-index: z-index(".components-draggable__clone");
 
 	> * {
-		opacity: 0.8;
+		// This needs specificity as a theme is meant to define these by default.
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
 	}
 }