Performance: Remove is-typing root class (#32567)

WordPress · Jun 14, 2021 · ad119ad · ad119ad
1 parent 207ceec
commit ad119ad
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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 ]