Add navigation editor block deselection when clicking canvas backgrou…

…nd (#28876) * Initial styleadjustments to allow full-size canvas * Use variable for sidebar width * Add block deselection hook * Unskip e2e test * Adjust spacing * Fix classname convention and update test
WordPress · Feb 11, 2021 · 4c97efe · 4c97efe
1 parent 3db2b85
commit 4c97efe
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -193,8 +193,7 @@ describe( 'Navigation editor', () => {
 		expect( await getSerializedBlocks() ).toMatchSnapshot();
 	} );
 
-	// Regressed—to be reimplemented.
-	it.skip( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
+	it( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
 		await setUpResponseMocking( [
 			...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
 			...getMenuItemMocks( { GET: menuItemsFixture } ),
@@ -219,7 +218,7 @@ describe( 'Navigation editor', () => {
 		expect( submenuLinkVisible ).toBeDefined();
 
 		// Click the editor canvas.
-		await page.click( '.edit-navigation-editor__block-view' );
+		await page.click( '.edit-navigation-layout__canvas' );
 
 		// There should be a submenu in the DOM, but it should be hidden.
 		const submenuLinkHidden = await page.waitForXPath( submenuLinkXPath, {

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
@@ -2,7 +2,8 @@
 	background: $white;
 	border: $border-width solid $gray-900;
 	border-radius: $radius-block-ui;
-	margin-top: $grid-unit-50 * 2;
+	max-width: 420px;
+	margin: auto;
 
 	.components-spinner {
 		display: block;

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
@@ -2,7 +2,6 @@
 	display: flex;
 	align-items: center;
 	padding: $grid-unit-15;
-	margin-bottom: $grid-unit-40;
 }
 
 .edit-navigation-header__title-subtitle {

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -11,7 +11,9 @@ import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockInspector,
+	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,6 +30,9 @@ import InspectorAdditions from '../inspector-additions';
 import { store as editNavigationStore } from '../../store';
 
 export default function Layout( { blockEditorSettings } ) {
+	const canvasRef = useRef();
+	useBlockSelectionClearer( canvasRef );
+
 	const { saveNavigationPost } = useDispatch( editNavigationStore );
 	const savePost = () => saveNavigationPost( navigationPost );
 
@@ -78,7 +83,10 @@ export default function Layout( { blockEditorSettings } ) {
 							<NavigationEditorShortcuts
 								saveBlocks={ savePost }
 							/>
-							<div className="navigation-editor-canvas">
+							<div
+								className="edit-navigation-layout__canvas"
+								ref={ canvasRef }
+							>
 								<Editor
 									isPending={ ! navigationPost }
 									blocks={ blocks }

diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
@@ -4,13 +4,33 @@
 	#wpcontent {
 		padding-left: 0;
 	}
+
+	// Ensure the entire layout is full-height, the background
+	// of the editing canvas needs to be full-height for block
+	// deselection to work.
+	#wpwrap,
+	#wpcontent,
+	#wpbody,
+	#wpbody-content,
+	.edit-navigation,
+	.components-drop-zone__provider,
+	.edit-navigation-layout {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
 }
 
 .edit-navigation-layout {
-	margin-right: 280px;
+	margin-right: $sidebar-width;
+
+	.edit-navigation-layout__canvas {
+		// Provide space for the floating block toolbar.
+		padding-top: $grid-unit-40 * 3;
 
-	.navigation-editor-canvas {
-		max-width: 420px;
-		margin: auto;
+		// Ensure the entire layout is full-height, the background
+		// of the editing canvas needs to be full-height for block
+		// deselection to work.
+		flex-grow: 1;
 	}
 }