Clear selected block when clicking on the gray background (#35816)

WordPress · Oct 21, 2021 · c715b4c · c715b4c
1 parent bd1a5b7
commit c715b4c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -16,6 +16,7 @@ import {
 	BlockTools,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableUseTypingObserver as useTypingObserver,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 
@@ -54,6 +55,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const isTemplatePart = templateType === 'wp_template_part';
 
@@ -87,6 +89,12 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					'is-focus-mode': isTemplatePart,
 				} ) }
 				__unstableContentRef={ contentRef }
+				onClick={ ( event ) => {
+					// Clear selected block when clicking on the gray background.
+					if ( event.target === event.currentTarget ) {
+						clearSelectedBlock();
+					}
+				} }
 			>
 				<BackButton />
 

diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/edit-site/src/components/block-editor/resize-handle.js
@@ -23,9 +23,9 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	}
 
 	return (
-		<div className={ `resizable-editor__drag-handle is-${ direction }` }>
+		<>
 			<button
-				className="resizable-editor__drag-handle-button"
+				className={ `resizable-editor__drag-handle is-${ direction }` }
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }
@@ -35,6 +35,6 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 			>
 				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
 			</VisuallyHidden>
-		</div>
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -41,27 +41,12 @@
 }
 
 .resizable-editor__drag-handle {
+	$height: 100px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	width: $grid-unit-60;
-
-	&.is-left {
-		left: -$grid-unit-60;
-	}
-
-	&.is-right {
-		right: -$grid-unit-60;
-	}
-}
-
-.resizable-editor__drag-handle-button {
-	$height: 100px;
-	position: absolute;
-	top: calc(50% - #{math.div($height, 2)});
-	left: 50%;
-	transform: translateX(-$grid-unit-05);
 	padding: 0;
+	margin: auto 0;
 	width: $grid-unit-10;
 	height: $height;
 	appearance: none;
@@ -71,6 +56,14 @@
 	border-radius: 4px;
 	border: 0;
 
+	&.is-left {
+		left: #{-$grid-unit-30 - $grid-unit-05};
+	}
+
+	&.is-right {
+		right: #{-$grid-unit-30 - $grid-unit-05};
+	}
+
 	&:hover {
 		background: $gray-600;
 	}