Add validation message to custom CSS input (#47132)

* Add custom error message * Only check for errors on blur * Fix big with value not being passed by onBlur method * Remove duplicate notice * Switch to icon instead of notice * Make error a bit more user friendly * Clear error onBlur when value is empty --------- Co-authored-by: Glen Davies <glen.davies@automattic.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
WordPress · Jan 31, 2023 · bed9351 · bed9351
1 parent 793cd39
commit bed9351
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -1,14 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import {
 	TextareaControl,
 	Panel,
 	PanelBody,
 	__experimentalVStack as VStack,
+	Tooltip,
+	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import {
+	experiments as blockEditorExperiments,
+	transformStyles,
+} from '@wordpress/block-editor';
+import { info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,6 +31,7 @@ function CustomCSSControl( { blockName } ) {
 
 	const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );
 	const [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );
+	const [ cssError, setCSSError ] = useState( null );
 	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
 
 	// If there is custom css from theme.json show it in the edit box
@@ -44,6 +52,33 @@ function CustomCSSControl( { blockName } ) {
 			return;
 		}
 		setCustomCSS( value );
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.editor-styles-wrapper'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
 	}
 
 	const originalThemeCustomCSS =
@@ -74,9 +109,20 @@ function CustomCSSControl( { blockName } ) {
 						themeCustomCSS
 					}
 					onChange={ ( value ) => handleOnChange( value ) }
+					onBlur={ handleOnBlur }
 					className="edit-site-global-styles__custom-css-input"
 					spellCheck={ false }
 				/>
+				{ cssError && (
+					<Tooltip text={ cssError }>
+						<div className="edit-site-global-styles__custom-css-validation-wrapper">
+							<Icon
+								icon={ info }
+								className="edit-site-global-styles__custom-css-validation-icon"
+							/>
+						</div>
+					</Tooltip>
+				) }
 			</VStack>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -166,6 +166,16 @@ $block-preview-height: 150px;
 	font-family: $editor_html_font;
 }
 
+.edit-site-global-styles__custom-css-validation-wrapper {
+	position: absolute;
+	bottom: $grid-unit-20;
+	right: $grid-unit * 3;
+}
+
+.edit-site-global-styles__custom-css-validation-icon {
+	fill: $alert-red;
+}
+
 .edit-site-global-styles__custom-css-theme-css {
 	width: 100%;
 	line-break: anywhere;