diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 1579f2239c1fb..2e1b5ba41314f 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -15,7 +15,12 @@ import {
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+	useDispatch,
+	useSelect,
+} from '@wordpress/data';
 import { compose, pure, ifCondition } from '@wordpress/compose';
 
 /**
@@ -83,6 +88,21 @@ function BlockListBlock( {
 } ) {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
+	const isTypingWithinBlock = useSelect(
+		( select ) => {
+			const { isTyping, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			return (
+				// We only care about this prop when the block is selected
+				// Thus to avoid unnecessary rerenders we avoid updating the
+				// prop if the block is not selected.
+				( isSelected || hasSelectedInnerBlock( clientId, true ) ) &&
+				isTyping()
+			);
+		},
+		[ clientId, isSelected ]
+	);
 
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
@@ -163,7 +183,10 @@ function BlockListBlock( {
 		isSelected,
 		index,
 		// The wp-block className is important for editor styles.
-		className: classnames( className, { 'wp-block': ! isAligned } ),
+		className: classnames( className, {
+			'wp-block': ! isAligned,
+			'is-typing': isTypingWithinBlock,
+		} ),
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 	};
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
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 c27f382c3656c..d16bb5a4a9063 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
@@ -27,7 +27,6 @@ export function useBlockClassNames( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				isTyping,
 				isBlockBeingDragged,
 				isBlockHighlighted,
 				isBlockSelected,
@@ -60,11 +59,6 @@ export function useBlockClassNames( clientId ) {
 				'is-multi-selected': isBlockMultiSelected( clientId ),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
-				// We only care about this prop when the block is selected
-				// Thus to avoid unnecessary rerenders we avoid updating the prop if
-				// the block is not selected.
-				'is-typing':
-					( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
 				'is-focused':
 					focusMode &&
 					isLargeViewport &&