Allow resizing the sidebar in the site editor using keyboard (#47176)

WordPress · Jan 16, 2023 · e768804 · e768804 · github-actions · Jan 16, 2023
1 parent af82d1d
commit e768804
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -233,7 +233,17 @@ export default function Layout( { onError } ) {
 								} }
 								handleComponent={ {
 									right: (
-										<ResizeHandle variation="separator" />
+										<ResizeHandle
+											direction="right"
+											variation="separator"
+											resizeWidthBy={ ( delta ) => {
+												setForcedWidth(
+													( forcedWidth ??
+														defaultSidebarWidth ) +
+														delta
+												);
+											} }
+										/>
 									),
 								} }
 								handleClasses={ undefined }

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -89,6 +89,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		min-height: 100%;
 		@include custom-scrollbars-on-hover;
 	}
+
+	.resizable-editor__drag-handle {
+		right: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {