From ad119ad734ef2f6ec7807bbc93f873c1d635319c Mon Sep 17 00:00:00 2001
From: Kerry Liu <gwwar@users.noreply.github.com>
Date: Fri, 11 Jun 2021 08:06:28 -0700
Subject: [PATCH] Performance: Remove `is-typing` root class (#32567)

---
 .../src/components/block-list/index.js        | 34 ++++++++-----------
 .../src/components/block-list/style.scss      |  2 +-
 .../use-block-props/use-block-class-names.js  |  3 ++
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 87784cef2fbf53..46e5d56f9f0317 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -27,25 +27,20 @@ export const IntersectionObserver = createContext();
 
 function Root( { className, children } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	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(),
-		};
-	}, [] );
+	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
+		( select ) => {
+			const { getSettings, isNavigationMode: _isNavigationMode } = select(
+				blockEditorStore
+			);
+			const { outlineMode, focusMode } = getSettings();
+			return {
+				isOutlineMode: outlineMode,
+				isFocusMode: focusMode,
+				isNavigationMode: _isNavigationMode(),
+			};
+		},
+		[]
+	);
 	return (
 		<div
 			ref={ useMergeRefs( [
@@ -57,7 +52,6 @@ function Root( { className, children } ) {
 				'block-editor-block-list__layout is-root-container',
 				className,
 				{
-					'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 ebe5d59097395d..e579e7d7786048 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -257,7 +257,7 @@
 	}
 }
 
-.is-outline-mode:not(.is-typing) .block-editor-block-list__block {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered {
 		cursor: default;
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
index c3a99b4ec5e04c..1c24ae12b5b22b 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
@@ -32,10 +32,12 @@ export function useBlockClassNames( clientId ) {
 				getBlockName,
 				getSettings,
 				hasSelectedInnerBlock,
+				isTyping,
 				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
 			const {
 				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
+				outlineMode,
 			} = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
@@ -59,6 +61,7 @@ export function useBlockClassNames( clientId ) {
 				'has-active-entity': activeEntityBlockId,
 				// Determine if there is an active entity area to spotlight.
 				'is-active-entity': activeEntityBlockId === clientId,
+				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},
 		[ clientId ]