From bed9351906f8937cfbf305644d926e17dd6a498e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 1 Feb 2023 07:52:42 +0800 Subject: [PATCH] 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 Co-authored-by: George Mamadashvili --- .../components/global-styles/custom-css.js | 48 ++++++++++++++++++- .../src/components/global-styles/style.scss | 10 ++++ 2 files changed, 57 insertions(+), 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 index 0892fd411f0f53..dbc9a531781801 100644 --- 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 && ( + +
+ +
+
+ ) } ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 268536ff0433cc..46204fcabab68c 100644 --- 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;