From 226002e8c4511ba5076548ab0ba99cc7c199a171 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 25 Jan 2023 10:44:18 +1300
Subject: [PATCH] Only check for errors on blur instead of onChange

---
 .../src/components/global-styles/custom-css.js    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
index 26bef12c0ff851..1a25894f61e7af 100644
--- a/packages/edit-site/src/components/global-styles/custom-css.js
+++ b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -49,8 +49,18 @@ function CustomCSSControl( { blockName } ) {
 			return;
 		}
 		setCustomCSS( value );
-		// TODO: transform it to find syntax error. Note that it will be transformed again
-		// after applied to the preview frame. We should refactor this to prevent double-transform.
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+
+	function handleOnBlur( value ) {
 		const [ transformed ] = transformStyles(
 			[ { css: value } ],
 			'.editor-styles-wrapper'
@@ -74,6 +84,7 @@ function CustomCSSControl( { blockName } ) {
 					themeCustomCSS
 				}
 				onChange={ ( value ) => handleOnChange( value ) }
+				onBlur={ handleOnBlur }
 				rows={ 15 }
 				className="edit-site-global-styles__custom-css-input"
 				spellCheck={ false }