From c03559f30d8e442e5a9e73dc9d8a535ac51b4484 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 22 Jun 2018 15:53:10 +0100
Subject: [PATCH] Refact block hover and select css

---
 components/draggable/README.md          |  8 -------
 components/draggable/index.js           |  4 ++--
 editor/components/block-list/block.js   |  3 +--
 editor/components/block-list/style.scss | 28 +++++++++++++++++++++----
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/components/draggable/README.md b/components/draggable/README.md
index 8752607dadbcd..974f1eab06db6 100644
--- a/components/draggable/README.md
+++ b/components/draggable/README.md
@@ -6,14 +6,6 @@
 
 The component accepts the following props:
 
-### draggable
-
-If the component is in a draggable state or not. If false, the component is rendered but it is not possible to drag it. Defaults to true.
-
-- Type: `boolean`
-- Required: No
-- Default:  `true`
-
 ### elementId
 
 The HTML id of the element to clone on drag
diff --git a/components/draggable/index.js b/components/draggable/index.js
index 586432c882545..ec0ac57464c2d 100644
--- a/components/draggable/index.js
+++ b/components/draggable/index.js
@@ -152,13 +152,13 @@ class Draggable extends Component {
 	}
 
 	render() {
-		const { children, draggable = true, className } = this.props;
+		const { children, className } = this.props;
 		return (
 			<div
 				className={ classnames( 'components-draggable', className ) }
 				onDragStart={ this.onDragStart }
 				onDragEnd={ this.onDragEnd }
-				draggable={ draggable }
+				draggable
 			>
 				{ children }
 			</div>
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index bcb5a19293cb8..9a1db98f9dad0 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -471,7 +471,7 @@ export class BlockListBlock extends Component {
 				] }
 				{ ...wrapperProps }
 			>
-				{ ! isMultiSelected && (
+				{ ! isMultiSelected && isMovable && (
 					<BlockDraggable
 						rootUID={ rootUID }
 						index={ order }
@@ -481,7 +481,6 @@ export class BlockListBlock extends Component {
 						onDragEnd={ this.onDragEnd }
 						isDragging={ dragging }
 						elementId={ blockElementId }
-						draggable={ isMovable } // only in locking all moving blocks is totally impossible
 					/>
 				) }
 				{ shouldShowInsertionPoint && (
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 6d7a1eaea2425..7f999f683ba67 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -74,10 +74,9 @@
 		}
 	}
 
-	&[draggable=true]{
-		cursor: move; // Fallback for IE/Edge < 14
-		cursor: grab;
-	}
+
+	cursor: move; // Fallback for IE/Edge < 14
+	cursor: grab;
 }
 
 
@@ -932,3 +931,24 @@
 		content: '←';
 	}
 }
+
+.editor-block-list__block {
+	@include break-small {
+		// use a wider available space for hovering/selecting on top level blocks
+		&:before {
+			content: '';
+			position: absolute;
+			right: -$parent-block-padding - $block-padding;
+			left: -$parent-block-padding - $block-padding;
+
+			bottom: 0;
+			top: 0;
+		}
+
+		// use smaller space for hovering/selecting on child blocks
+		& &:before {
+			left: 0;
+			right: 0;
+		}
+	}
+}