From a005470c5fcb7c6e0da2ff222b467a4f890988d3 Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Thu, 10 Jun 2021 14:07:28 -0700
Subject: [PATCH] try adding a class to block when typing

---
 .../src/components/block-list/block.js        | 20 +++++++++++++++++--
 .../src/components/block-list/style.scss      |  8 +++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index d06c286e430f5..f5701a61dca6e 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,15 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
+	const removeBlockOutline = useSelect(
+		( select ) => {
+			const { isTyping, getSettings } = select( blockEditorStore );
+			const isOutlineMode = getSettings().outlineMode;
+			return isOutlineMode && isSelected && 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
 	// (InspectorControls, etc.) which are inside `BlockEdit` but not
@@ -159,7 +173,9 @@ function BlockListBlock( {
 
 	const value = {
 		clientId,
-		className,
+		className: removeBlockOutline
+			? classnames( className, 'remove-outline' )
+			: className,
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 		isAligned,
 	};
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 9304aaf041f16..59d3871975258 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -261,7 +261,7 @@
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block:not(:focus-within) {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered {
 		cursor: default;
 
@@ -286,6 +286,12 @@
 			bottom: $border-width;
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
 		}
+
+		&:focus {
+			&::after {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+		}
 	}
 }