Polish drag handle and metrics

This makes the drag handle and up/down buttons slightly smaller, and centers them.
WordPress · Sep 4, 2018 · 4128f21 · 4128f21
1 parent a4a8f09
commit 4128f21
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/packages/editor/src/components/block-mover/arrows.js b/packages/editor/src/components/block-mover/arrows.js
@@ -12,11 +12,8 @@ export const downArrow = (
 
 export const dragHandle = (
 	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
-		<circle cx="4.5" cy="6" r="1.5" />
-		<circle cx="9" cy="6" r="1.5" />
-		<circle cx="13.5" cy="6" r="1.5" />
-		<circle cx="4.5" cy="12" r="1.5" />
-		<circle cx="9" cy="12" r="1.5" />
-		<circle cx="13.5" cy="12" r="1.5" />
+		<path d="M13,8c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S12.4,8,13,8z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,10
+			c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,10,5,10z M13,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S13.6,10,13,10z M9,6
+			C8.4,6,8,6.4,8,7s0.4,1,1,1s1-0.4,1-1S9.6,6,9,6z M9,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S9.6,10,9,10z" />
 	</svg>
 );
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
@@ -6,9 +6,19 @@
 	&.is-visible {
 		@include fade_in;
 	}
+
+	// 24px is the smallest size of a good pressable button.
+	// With 3 pieces of side UI, that comes to a total of 72px.
+	// To vertically center against a 56px paragraph, move upwards 72px - 56px / 2.
+	// Don't do this for wide, fullwide, or mobile.
+	@include break-small() {
+		.editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & {
+			margin-top: -8px;
+		}
+	}
 }
 
-// Mover icon buttons
+// Mover icon buttons.
 .editor-block-mover__control {
 	display: flex;
 	align-items: center;
@@ -18,11 +28,19 @@
 	background: none;
 	cursor: pointer;
 	padding: 0;
-	width: $block-side-ui-width;
-	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
 	border-radius: $radius-round-rectangle;
 
-	// use opacity to work in various editor styles
+	// Carefully adjust the size of the side UI to fit one paragraph of text (56px).
+	width: $block-side-ui-width;
+	height: $icon-button-size-small;
+
+	svg {
+		width: $block-side-ui-width;
+		height: $icon-button-size-small;
+		padding: #{ ($block-side-ui-width - $icon-button-size-small) / 2 } #{ ($block-side-ui-width - 18px) / 2 }; // This makes the SVG fill the whole available area, without scaling the artwork.
+	}
+
+	// Use opacity to work in various editor styles
 	color: $dark-opacity-300;
 
 	.is-dark-theme & {
@@ -32,20 +50,14 @@
 	&[aria-disabled="true"] {
 		cursor: default;
 		pointer-events: none;
-		color: $dark-opacity-light-300; // use opacity to work in various editor styles
+		color: $dark-opacity-light-300; // Use opacity to work in various editor styles.
 
 		.is-dark-theme & {
 			color: $light-opacity-light-300;
 		}
 	}
 
-	svg {
-		width: $block-side-ui-width;
-		height: $block-side-ui-width;
-		padding: ($block-side-ui-width - 18px) / 2;	// this makes the SVG fill the whole available area, without scaling the artwork
-	}
-
-	// Apply a background in nested contexts, only on desktop
+	// Apply a background in nested contexts, only on desktop.
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
 			background: $white;