Movers: Add bigger mobile touch targets.

This increases the size of the mover control touch targets to 48x48.
WordPress · Aug 3, 2020 · 45ebe4b · 45ebe4b
1 parent c1b0553
commit 45ebe4b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -15,8 +15,14 @@
 .block-editor-block-mover {
 	.components-toolbar-group,
 	.components-toolbar {
-		flex-direction: column;
 		flex: 1;
+
+		// Increase touch targets on mobile.
+		flex-direction: row;
+
+		@include break-small() {
+			flex-direction: column;
+		}
 	}
 
 	&.is-horizontal .components-toolbar-group,
@@ -25,9 +31,10 @@
 	}
 
 	.block-editor-block-mover-button {
-		height: $block-toolbar-height/2;
-		width: $block-toolbar-height;
-		padding: 0 !important;
+		@include break-small() {
+			padding: 0 !important;
+			height: $block-toolbar-height/2;
+		}
 
 		// Focus style.
 		// Overrides .components-toolbar-group styles
@@ -38,29 +45,31 @@
 	}
 
 	// Position the icons correctly.
-	.components-toolbar-group .block-editor-block-mover-button.is-up-button,
-	.components-toolbar .block-editor-block-mover-button.is-up-button {
-		svg {
-			margin-bottom: -$grid-unit-10;
-		}
+	@include break-small() {
+		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
+		.components-toolbar .block-editor-block-mover-button.is-up-button {
+			svg {
+				margin-bottom: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			bottom: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				bottom: 0;
+				height: calc(100% - #{ $grid-unit-10 });
+			}
 		}
-	}
 
-	.components-toolbar-group .block-editor-block-mover-button.is-down-button,
-	.components-toolbar .block-editor-block-mover-button.is-down-button {
-		svg {
-			margin-top: -$grid-unit-10;
-		}
+		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
+		.components-toolbar .block-editor-block-mover-button.is-down-button {
+			svg {
+				margin-top: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			top: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				top: 0;
+				height: calc(100% - #{ $grid-unit-10 });
+			}
 		}
 	}
 
@@ -70,7 +79,6 @@
 			height: $block-toolbar-height;
 			// Overrides .components-toolbar-group styles
 			width: $block-toolbar-height / 2;
-			min-width: $grid-unit-30;
 			padding-left: 0;
 			padding-right: 0;
 

diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
@@ -92,7 +92,7 @@ div.components-toolbar {
 }
 
 // Last button in a group.
-.components-accessible-toolbar .components-toolbar-group > .components-button:last-child.has-icon,
+.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon,
 .components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon,
 .components-toolbar div:last-child .components-button.has-icon {
 	min-width: $block-toolbar-height - $grid-unit-15 / 2;