Move resize styles to mixins, document use of !important, apply to im…

…age block

edit-post/assets/stylesheets/_mixins.scss

@@ -326,3 +326,34 @@
 	// icon standards.
 	margin-right: 2px;
 }
+
+
+/**
+ * Styles for resize handles
+ */
+
+@mixin resize-handler-container() {
+	display: none;
+
+	// The unfortunate use of `!important` in the CSS below is because the
+	// re-resizable package, which we use for our resize functionality,
+	// applies an inline `style` attribute that cannot be disabled.
+	// See https://github.com/WordPress/gutenberg/pull/10331
+
+	// The handle itself is a pseudo element, and will sit inside this larger
+	// container size
+	width: $resize-handler-container-size !important;
+	height: $resize-handler-container-size !important;
+	padding: $grid-size-small;
+}
+
+@mixin resize-handler() {
+	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

@@ -49,6 +49,7 @@ $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/editor.scss

@@ -25,34 +25,40 @@
 .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();
+}
+
 /*!rtl:begin:ignore*/
+// The unfortunate use of `!important` in the CSS below is because the
+// re-resizable package, which we use for our resize functionality,
+// applies an inline `style` attribute that cannot be disabled.
+// See https://github.com/WordPress/gutenberg/pull/10331
+
 .block-library-image__resize-handler-right {
-	top: calc(50% - 9px) !important;
-	right: -8px !important;
+	top: calc(50% - #{$resize-handler-container-size / 2}) !important;
+	right: calc(#{$resize-handler-container-size / 2} * -1) !important;
 }
 
 .block-library-image__resize-handler-left {
-	top: calc(50% - 9px) !important;
-	left: -8px !important;
+	top: calc(50% - #{$resize-handler-container-size / 2}) !important;
+	left: calc(#{$resize-handler-container-size / 2} * -1) !important;
 }
 
 .block-library-image__resize-handler-bottom {
-	bottom: -8px !important;
-	left: calc(50% - 9px) !important;
+	bottom: calc(#{$resize-handler-container-size / 2} * -1) !important;
+	left: calc(50% - #{$resize-handler-container-size / 2}) !important;
 }
 /*!rtl:end:ignore*/
 

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

@@ -9,31 +9,14 @@
 }
 
 .block-library-spacer__resize-handler-bottom {
-	display: none;
+	@include resize-handler-container();
 
-	// Make the container larger so there's a larger grabbable area
-	$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2);
-
-	// Offset the handle's position
+	// Offset the handle container's position.
 	position: absolute;
-	left: calc(50% - #{$resize-handler-container-size / 2}) !important;
 	bottom: calc(#{$resize-handler-container-size / 2} * -1) !important;
-
-	// Apply the width/height of the container size plus padding so the handle
-	// sits in the middle of the grabbable area
-	width: $resize-handler-container-size !important;
-	height: $resize-handler-container-size !important;
-	padding: $grid-size-small;
+	left: calc(50% - #{$resize-handler-container-size / 2}) !important;
 }
 
 .block-library-spacer__resize-handler-bottom::before {
-	display: block;
-	content: "";
-	border: 2px solid $white;
-	border-radius: 50%;
-	width: $resize-handler-size !important;
-	height: $resize-handler-size !important;
-	padding: 0 3px 3px 0;
-	background: theme(primary);
-	cursor: se-resize;
+	@include resize-handler();
 }