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 b70e02803224a5..26180931d49f2f 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 0a40cb032e7621..0a44ebeb70d8b6 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 7dc5a0b4cfddad..6cbc4ff09db4da 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;
}
}