From 6f13377025077b95dccb05273b823636ce73f522 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 16 Jan 2023 10:51:18 +0100
Subject: [PATCH] Site editor: Update resize handle. (#47138)

* Site editor: Update resize handle.

* Fix

* Update handle

* Fix linting.

* More linting

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 .../src/components/block-editor/style.scss    | 21 ++++++++++++-------
 .../edit-site/src/components/layout/index.js  |  5 +----
 .../src/components/layout/style.scss          |  5 -----
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 35c2649b8b0c3..0eca3b7c529b4 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -97,13 +97,16 @@
 
 	&.is-variation-separator {
 		height: 100%;
+		width: $grid-unit-30;
+		right: 0;
 
 		&::after {
-			width: 1px;
+			width: 2px;
 			border-radius: 0;
-			background: $gray-800;
-			left: auto;
-			right: 50%;
+			background: transparent;
+			left: 50%;
+			transform: translateX(-1px);
+			right: 0;
 			transition: all ease 0.2s;
 			transition-delay: 0.1s;
 			@include reduce-motion;
@@ -112,10 +115,10 @@
 
 	&::after {
 		position: absolute;
-		top: 0;
+		top: $grid-unit-30;
 		left: $grid-unit-05;
 		right: 0;
-		bottom: 0;
+		bottom: $grid-unit-30;
 		content: "";
 		width: $grid-unit-05;
 		background: $gray-600;
@@ -137,7 +140,6 @@
 			background: $gray-400;
 		}
 		&.is-variation-separator::after {
-			width: 2px;
 			background: var(--wp-admin-theme-color);
 		}
 	}
@@ -145,4 +147,9 @@
 	&:focus::after {
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
+
+	&.is-variation-separator:focus::after {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+	}
 }
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 9a6d4373edc27..5f0f78b64fd4c 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -233,10 +233,7 @@ export default function Layout( { onError } ) {
 								} }
 								handleComponent={ {
 									right: (
-										<ResizeHandle
-											direction="right"
-											variation="separator"
-										/>
+										<ResizeHandle variation="separator" />
 									),
 								} }
 								handleClasses={ undefined }
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index f5db7df0c0732..5c49ed0901c63 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -63,7 +63,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 .edit-site-layout__content {
 	flex-grow: 1;
 	display: flex;
-	gap: $canvas-padding;
 
 	// Hide scrollbars during the edit/view animation.
 	overflow: hidden;
@@ -85,10 +84,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 	}
 
-	.resizable-editor__drag-handle.is-right {
-		right: math.div(-$grid-unit-15, 2);
-	}
-
 	> div {
 		overflow-y: auto;
 		min-height: 100%;