Tweak edit site resizable frame handle (#50878)

WordPress · May 25, 2023 · 91a268d · 91a268d · github-actions · May 25, 2023
1 parent 66f94d8
commit 91a268d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
@@ -171,6 +171,18 @@ function ResizableFrame( {
 		},
 	};
 
+	const resizeHandleVariants = {
+		default: {
+			opacity: 1,
+			left: -16,
+		},
+		resizing: {
+			opacity: 1,
+			left: -16,
+			scaleY: 1.3,
+		},
+	};
+
 	return (
 		<ResizableBox
 			as={ motion.div }
@@ -212,20 +224,18 @@ function ResizableFrame( {
 						<motion.div
 							key="handle"
 							className="edit-site-resizable-frame__handle"
+							variants={ resizeHandleVariants }
+							animate={ isResizing ? 'resizing' : 'default' }
 							title="Drag to resize"
 							initial={ {
 								opacity: 0,
 								left: 0,
 							} }
-							animate={ {
-								opacity: 1,
-								left: -15,
-							} }
 							exit={ {
 								opacity: 0,
 								left: 0,
 							} }
-							whileHover={ { scale: 1.1 } }
+							whileHover={ { scaleY: 1.3 } }
 						/>
 					) : null,
 			} }

diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss
@@ -28,42 +28,44 @@
 }
 
 .edit-site-resizable-frame__handle {
-	position: absolute;
-	width: 5px;
-	height: 50px;
-	background-color: rgba(255, 255, 255, 0.3);
-	z-index: 100;
-	border-radius: 5px;
+	align-items: center;
+	background-color: rgba($gray-700, 0.4);
+	border-radius: $grid-unit-05;
 	cursor: col-resize;
 	display: flex;
-	align-items: center;
+	height: $grid-unit-80;
 	justify-content: flex-end;
-	top: 50%;
+	position: absolute;
+	top: calc(50% - #{$grid-unit-40});
+	width: $grid-unit-05;
+	z-index: 100;
+
 	&::before {
-		position: absolute;
-		left: 100%;
-		height: 100%;
-		width: $grid-unit-30;
 		content: "";
+		height: 100%;
+		left: 100%;
+		position: absolute;
+		width: $grid-unit-40;
 	}
 
 	&::after {
+		content: "";
+		height: 100%;
 		position: absolute;
 		right: 100%;
-		height: 100%;
-		width: $grid-unit-30;
-		content: "";
+		width: $grid-unit-40;
 	}
 
-	&:hover {
+	&:hover,
+	.is-resizing & {
 		background-color: var(--wp-admin-theme-color);
 	}
 
 	.edit-site-resizable-frame__handle-label {
-		border-radius: 2px;
 		background: var(--wp-admin-theme-color);
-		padding: 4px 8px;
+		border-radius: 2px;
 		color: #fff;
 		margin-right: $grid-unit-10;
+		padding: 4px 8px;
 	}
 }