From 8d029c6a0ace1bb09fd04a0b75b917ea81a67432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <wp@iseulde.com>
Date: Wed, 24 Mar 2021 15:54:23 +0200
Subject: [PATCH] Block editor: nav mode: move class (#30181)

---
 .../src/components/block-list/index.js         | 15 +++++++++++++--
 .../src/components/block-list/style.scss       | 18 +++++++++---------
 .../src/components/writing-flow/index.js       | 10 +---------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index fdc755d4071bf..40dbb02d4c6d4 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -32,13 +32,23 @@ export default function BlockList( { className, __experimentalLayout } ) {
 	useScrollSelectionIntoView( ref );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isTyping, isOutlineMode, isFocusMode } = useSelect( ( select ) => {
-		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+	const {
+		isTyping,
+		isOutlineMode,
+		isFocusMode,
+		isNavigationMode,
+	} = useSelect( ( select ) => {
+		const {
+			isTyping: _isTyping,
+			getSettings,
+			isNavigationMode: _isNavigationMode,
+		} = select( blockEditorStore );
 		const { outlineMode, focusMode } = getSettings();
 		return {
 			isTyping: _isTyping(),
 			isOutlineMode: outlineMode,
 			isFocusMode: focusMode,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
@@ -55,6 +65,7 @@ export default function BlockList( { className, __experimentalLayout } ) {
 						'is-typing': isTyping,
 						'is-outline-mode': isOutlineMode,
 						'is-focus-mode': isFocusMode && isLargeViewport,
+						'is-navigate-mode': isNavigationMode,
 					}
 				) }
 			>
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 019685bfa2a18..443903fa8e976 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -44,10 +44,15 @@
 .block-editor-block-list__layout {
 	position: relative;
 
+	// Select tool/navigation mode shows the default cursor until an additional click edits.
+	&.is-navigate-mode {
+		cursor: default;
+	}
+
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
-	.is-navigate-mode & .block-editor-block-list__block.is-selected,
-	.is-navigate-mode & .block-editor-block-list__block.is-hovered,
+	&.is-navigate-mode .block-editor-block-list__block.is-selected,
+	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-multi-selected {
 
@@ -83,13 +88,13 @@
 		}
 	}
 
-	.is-navigate-mode & .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
+	&.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
 		box-shadow: 0 0 0 1px $gray-600;
 	}
 
 	.block-editor-block-list__block.is-highlighted::after,
 	.block-editor-block-list__block.is-multi-selected::after,
-	.is-navigate-mode & .block-editor-block-list__block.is-selected::after,
+	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: var(--wp-admin-border-width-focus) solid transparent;
@@ -264,11 +269,6 @@
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
 
-	// Select tool/navigation mode shows the default cursor until an additional click edits.
-	.is-navigate-mode & {
-		cursor: default;
-	}
-
 	// Clear floats.
 	&[data-clear="true"] {
 		float: none;
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index cdceea337f9f0..f09a9507d883d 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { find, reverse, first, last } from 'lodash';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -156,7 +155,6 @@ function selector( select ) {
 		getLastMultiSelectedBlockClientId,
 		hasMultiSelection,
 		getBlockOrder,
-		isNavigationMode,
 		isSelectionEnabled,
 		getBlockSelectionStart,
 		isMultiSelecting,
@@ -182,7 +180,6 @@ function selector( select ) {
 		hasMultiSelection: hasMultiSelection(),
 		firstBlock: first( blocks ),
 		lastBlock: last( blocks ),
-		isNavigationMode: isNavigationMode(),
 		isSelectionEnabled: isSelectionEnabled(),
 		blockSelectionStart: getBlockSelectionStart(),
 		isMultiSelecting: isMultiSelecting(),
@@ -226,7 +223,6 @@ export default function WritingFlow( { children } ) {
 		hasMultiSelection,
 		firstBlock,
 		lastBlock,
-		isNavigationMode,
 		isSelectionEnabled,
 		blockSelectionStart,
 		isMultiSelecting,
@@ -535,10 +531,6 @@ export default function WritingFlow( { children } ) {
 		};
 	}, [] );
 
-	const className = classnames( 'block-editor-writing-flow', {
-		'is-navigate-mode': isNavigationMode,
-	} );
-
 	// Disable reason: Wrapper itself is non-interactive, but must capture
 	// bubbling events from children to determine focus transition intents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -568,7 +560,7 @@ export default function WritingFlow( { children } ) {
 			/>
 			<div
 				ref={ container }
-				className={ className }
+				className="block-editor-writing-flow"
 				onKeyDown={ onKeyDown }
 				onMouseDown={ onMouseDown }
 			>