Refact block hover and select css

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

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>

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 && (

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;
 }
 
 
@@ -935,3 +934,28 @@
 		content: '←';
 	}
 }
+
+.editor-block-list__block {
+	@include break-small {
+        // Increases the hover and selection area around blocks.
+        // This makes the blue hover line, and the settings button appear even if the mouse,
+        // is still some pixels outside the block.
+        // It is also possible to click some pixels outside the block and select it.
+		&:before {
+			content: '';
+			position: absolute;
+			right: -$parent-block-padding - $block-padding;
+			left: -$parent-block-padding - $block-padding;
+
+			bottom: 0;
+			top: 0;
+		}
+
+		// Removes the effect of the previous rule on nested blocks,
+		// so it only applies to top-level blocks.
+		& &:before {
+			left: 0;
+			right: 0;
+		}
+	}
+}