Reduce gap between steps in SpacingSizesControl, add animation, remov…

…e first/last marks (#63803) Co-authored-by: jameskoster <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: paaljoachim <[email protected]> Co-authored-by: bgardner <[email protected]>
WordPress · Aug 8, 2024 · c48075b · c48075b
1 parent 5d408ce
commit c48075b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -188,10 +188,12 @@ export default function SpacingInputControl( {
 		name: size.name,
 	} ) );
 
-	const marks = spacingSizes.map( ( _newValue, index ) => ( {
-		value: index,
-		label: undefined,
-	} ) );
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
 
 	const sideLabel =
 		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';

diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -4,6 +4,18 @@
 		margin-bottom: 0;
 	}
 
+	.is-marked {
+		.components-range-control__track {
+			transition: width ease 0.1s;
+			@include reduce-motion("transition");
+		}
+
+		.components-range-control__thumb-wrapper {
+			transition: left ease 0.1s;
+			@include reduce-motion("transition");
+		}
+	}
+
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		height: 40px;
@@ -20,18 +32,16 @@
 	}
 
 	.components-range-control__mark {
+		transform: translateX(-50%);
 		height: $grid-unit-05;
-		width: 3px;
-		background-color: #fff;
+		width: math.div($grid-unit-05, 2);
+		background-color: $white;
 		z-index: 1;
+		top: -#{$grid-unit-05};
 	}
 
 	.components-range-control__marks {
 		margin-top: 17px;
-
-		:first-child {
-			display: none;
-		}
 	}
 
 	.components-range-control__thumb-wrapper {