Don't allow to start dragging blocks if a lock all exists (#7225)

Don't allow to start dragging blocks if a locking lock all exists.
Refactor block hover and select CSS to not rely on draggable.

editor/components/block-list/block.js

@@ -387,6 +387,7 @@ export class BlockListBlock extends Component {
 			hoverArea,
 			isLargeViewport,
 			isEmptyDefaultBlock,
+			isMovable,
 			isPreviousBlockADefaultEmptyBlock,
 			hasSelectedInnerBlock,
 		} = this.props;
@@ -470,7 +471,7 @@ export class BlockListBlock extends Component {
 				] }
 				{ ...wrapperProps }
 			>
-				{ ! isMultiSelected && (
+				{ ! isMultiSelected && isMovable && (
 					<BlockDraggable
 						rootUID={ rootUID }
 						index={ order }
@@ -620,6 +621,7 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		initialPosition: getSelectedBlocksInitialCaretPosition(),
 		isEmptyDefaultBlock: block && isUnmodifiedDefaultBlock( block ),
 		isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ),
+		isMovable: 'all' !== templateLock,
 		isLocked: !! templateLock,
 		previousBlockUid,
 		block,

editor/components/block-list/style.scss

@@ -934,3 +934,30 @@
 		content: '←';
 	}
 }
+
+.editor-block-list__block {
+	@include break-small {
+		// Increase the hover and selection area around blocks.
+		// This makes the blue hover line and the settings button appear even if
+		// the mouse cursor is technically outside the block.
+		// This improves usability by making it possible to click somewhat outside
+		// the block and select it. (eg. A fuzzy click target.)
+		&:before {
+			bottom: 0;
+			content: '';
+			left: -$parent-block-padding - $block-padding;
+			position: absolute;
+			right: -$parent-block-padding - $block-padding;
+			top: 0;
+		}
+
+		// Remove the fuzzy click area effect set above on nested blocks.
+		// It should only applies to top-level blocks; applying this rule to
+		// nested blocks will result in difficult-to-use and possibly overlapping
+		// click targets.
+		& &:before {
+			left: 0;
+			right: 0;
+		}
+	}
+}