diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 0d674919bc4dfb..a0ebc634abb526 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -241,7 +241,6 @@ function BlockListBlock( {
 			'has-selected-ui': hasSelectedUI,
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': shouldAppearSelected && hasSelectedUI,
-			'is-navigate-mode': isNavigationMode,
 			'is-multi-selected': isMultiSelected,
 			'is-reusable': isReusableBlock( blockType ),
 			'is-dragging': isDragging,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 8124ca1beb4cd8..173225ceab1ecd 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -127,7 +127,7 @@
 			}
 		}
 
-		&.is-navigate-mode::before {
+		.is-navigate-mode &::before {
 			border-color: $blue-medium-focus;
 			box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;
 
@@ -277,7 +277,7 @@
 	}
 
 	// Select tool/navigation mode shows the default cursor until an additional click edits.
-	&.is-navigate-mode {
+	.is-navigate-mode & {
 		cursor: default;
 	}
 
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index 170199a8f679f9..475be097c9132d 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { overEvery, find, findLast, reverse, first, last } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -505,11 +506,15 @@ export default function WritingFlow( { children } ) {
 		}
 	}, [ hasMultiSelection, isMultiSelecting ] );
 
+	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 */
 	return (
-		<div className="block-editor-writing-flow">
+		<div className={ className }>
 			<FocusCapture
 				ref={ focusCaptureBeforeRef }
 				selectedClientId={ selectedBlockClientId }
diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss
index 12c2bcfc1ef8fa..21195313291920 100644
--- a/packages/block-library/src/block/edit-panel/editor.scss
+++ b/packages/block-library/src/block/edit-panel/editor.scss
@@ -75,7 +75,7 @@
 	}
 }
 
-.is-selected.is-navigate-mode .reusable-block-edit-panel {
+.is-navigate-mode .is-selected .reusable-block-edit-panel {
 	border-color: $blue-medium-focus;
 	border-left-color: transparent;