Spacing Sizes Control: Improve layout spacing (#44858)

WordPress · Oct 13, 2022 · d7e9b29 · d7e9b29
1 parent 36d59fc
commit d7e9b29
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -221,6 +221,7 @@ export default function SpacingInputControl( {
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
 						style={ { gridColumn: '1' } }
+						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
@@ -279,6 +280,7 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
 				/>
 			) }
 		</>

diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 25px auto;
+	grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -27,7 +27,7 @@
 		grid-column: 1 / 1;
 		justify-content: left;
 		height: $grid-unit-20;
-		margin-top: $grid-unit-15;
+		margin-top: $grid-unit-20;
 	}
 
 	.components-spacing-sizes-control__side-label {
@@ -37,8 +37,9 @@
 	}
 
 	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control {
-			margin-top: $grid-unit-15;
+		.components-range-control.components-spacing-sizes-control__range-control,
+		.components-spacing-sizes-control__custom-value-input {
+			margin-top: $grid-unit-10;
 		}
 	}
 
@@ -60,12 +61,7 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		padding: 0;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-		}
+		margin-top: -4px;
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -75,33 +71,43 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-			margin-top: $grid-unit-15;
-		}
+		margin-top: $grid-unit-15;
 	}
 
 	.component-spacing-sizes-control__linked-button {
 		grid-column: 3 / 3;
 		grid-row: 1 / 1;
 		justify-self: end;
+		line-height: 0;
+		margin-top: -4px;
 	}
 
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
-		margin-left: $grid-unit-10;
-		height: 30px;
+		margin-left: $grid-unit-20;
+		margin-top: 8px;
 	}
 
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
+		margin-top: 8px;
+	}
+
+	.components-range-control {
+		height: 40px;
+		/* Vertically center the RangeControl until it has true 40px height. */
+		display: flex;
+		align-items: center;
+
+		> .components-base-control__field {
+			/* Fixes RangeControl contents when the outer wrapper is flex */
+			flex: 1;
+		}
 	}
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		height: 40px;
+		margin-top: 8px;
 	}
 
 	.components-range-control__mark {
@@ -125,5 +131,6 @@
 
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
+		margin-top: $grid-unit-10;
 	}
 }