Try: Larger drag handles

edit-post/assets/stylesheets/_mixins.scss

@@ -326,3 +326,29 @@
 	// icon standards.
 	margin-right: 2px;
 }
+
+
+/**
+ * Styles for resize handles
+ */
+
+@mixin resize-handler__container() {
+	display: none;
+
+	// The handle itself is a pseudo element, and will sit inside this larger
+	// container size.
+	width: $resize-handler-container-size;
+	height: $resize-handler-container-size;
+	padding: $grid-size-small;
+}
+
+@mixin resize-handler__visible-handle() {
+	display: block;
+	content: "";
+	width: $resize-handler-size;
+	height: $resize-handler-size;
+	border: 2px solid $white;
+	border-radius: 50%;
+	background: theme(primary);
+	cursor: inherit;
+}

edit-post/assets/stylesheets/_variables.scss

@@ -48,6 +48,8 @@ $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: $block-controls-height + $border-width;
+$resize-handler-size: 16px;
+$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
 $block-padding: 14px; // padding of nested blocks

packages/block-library/src/image/edit.js

@@ -431,6 +431,16 @@ class ImageEdit extends Component {
 							}
 							/* eslint-enable no-lonely-if */
 
+							// Removes the inline styles in the drag handles.
+							const handleStylesOverrides = {
+								width: null,
+								height: null,
+								top: null,
+								right: null,
+								bottom: null,
+								left: null,
+							};
+
 							return (
 								<Fragment>
 									{ getInspectorControls( imageWidth, imageHeight ) }
@@ -452,6 +462,11 @@ class ImageEdit extends Component {
 											bottom: 'block-library-image__resize-handler-bottom',
 											left: 'block-library-image__resize-handler-left',
 										} }
+										handleStyles={ {
+											right: handleStylesOverrides,
+											bottom: handleStylesOverrides,
+											left: handleStylesOverrides,
+										} }
 										enable={ {
 											top: false,
 											right: showRightHandle,

packages/block-library/src/image/editor.scss

@@ -25,34 +25,35 @@
 .block-library-image__resize-handler-right,
 .block-library-image__resize-handler-bottom,
 .block-library-image__resize-handler-left {
-	display: none;
-	border-radius: 50%;
-	border: 2px solid $white;
-	width: 16px !important;
-	height: 16px !important;
-	position: absolute;
-	background: theme(primary);
+	@include resize-handler__container();
 
 	.wp-block-image.is-focused & {
 		display: block;
 		z-index: z-index(".block-library-image__resize-handlers");
 	}
 }
 
+// Draw the visible handle
+.block-library-image__resize-handler-right::before,
+.block-library-image__resize-handler-bottom::before,
+.block-library-image__resize-handler-left::before {
+	@include resize-handler__visible-handle();
+}
+
 /*!rtl:begin:ignore*/
 .block-library-image__resize-handler-right {
-	top: calc(50% - 9px) !important;
-	right: -8px !important;
+	top: calc(50% - #{$resize-handler-container-size / 2});
+	right: calc(#{$resize-handler-container-size / 2} * -1);
 }
 
 .block-library-image__resize-handler-left {
-	top: calc(50% - 9px) !important;
-	left: -8px !important;
+	top: calc(50% - #{$resize-handler-container-size / 2});
+	left: calc(#{$resize-handler-container-size / 2} * -1);
 }
 
 .block-library-image__resize-handler-bottom {
-	bottom: -8px !important;
-	left: calc(50% - 9px) !important;
+	bottom: calc(#{$resize-handler-container-size / 2} * -1);
+	left: calc(50% - #{$resize-handler-container-size / 2});
 }
 /*!rtl:end:ignore*/
 

packages/block-library/src/spacer/editor.scss

@@ -1,5 +1,4 @@
 .block-library-spacer__resize-container.is-selected {
-	.block-library-spacer__resize-handler-top,
 	.block-library-spacer__resize-handler-bottom {
 		display: block;
 	}
@@ -9,17 +8,15 @@
 	background: $light-gray-200;
 }
 
-.block-library-spacer__resize-handler-top,
 .block-library-spacer__resize-handler-bottom {
-	display: none;
-	border-radius: 50%;
-	border: 2px solid $white;
-	width: 15px !important;
-	height: 15px !important;
+	@include resize-handler__container();
+
+	// Offset the handle container's position.
 	position: absolute;
-	background: theme(primary);
-	padding: 0 3px 3px 0;
-	cursor: se-resize;
-	left: 50% !important;
-	margin-left: -7.5px;
+	bottom: calc(#{$resize-handler-container-size / 2} * -1);
+	left: calc(50% - #{$resize-handler-container-size / 2});
+}
+
+.block-library-spacer__resize-handler-bottom::before {
+	@include resize-handler__visible-handle();
 }

packages/block-library/src/spacer/index.js

@@ -36,6 +36,16 @@ export const settings = {
 			const { height } = attributes;
 			const id = `block-spacer-height-input-${ instanceId }`;
 
+			// Removes the inline styles in the drag handles.
+			const handleStylesOverrides = {
+				width: null,
+				height: null,
+				top: null,
+				right: null,
+				bottom: null,
+				left: null,
+			};
+
 			return (
 				<Fragment>
 					<ResizableBox
@@ -48,9 +58,11 @@ export const settings = {
 						} }
 						minHeight="20"
 						handleClasses={ {
-							top: 'block-library-spacer__resize-handler-top',
 							bottom: 'block-library-spacer__resize-handler-bottom',
 						} }
+						handleStyles={ {
+							bottom: handleStylesOverrides,
+						} }
 						enable={ {
 							top: false,
 							right: false,