Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add validation message to custom CSS input #47132

Merged
merged 7 commits into from
Jan 31, 2023
+57 −1
Merged

Add validation message to custom CSS input #47132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
826621b
Add custom error message
glendaviesnz Jan 30, 2023
03ff8ee
Only check for errors on blur
glendaviesnz Jan 30, 2023
d816249
Fix big with value not being passed by onBlur method
glendaviesnz Jan 25, 2023
833bc36
Remove duplicate notice
glendaviesnz Jan 30, 2023
046145f
Switch to icon instead of notice
glendaviesnz Jan 30, 2023
ebf9e80
Make error a bit more user friendly
glendaviesnz Jan 31, 2023
7d78375
Clear error onBlur when value is empty
Mamaduka Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion packages/edit-site/src/components/global-styles/custom-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should move the error handling onBlur event? How helpful is the error message while a user is typing?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh, while typing there will be lots of invalid states. I have moved it to onBlur, and only runs in onChange if there was an existing error so that it gets cleared once the user fixes the problem.

}

const originalThemeCustomCSS =
Expand Down Expand Up @@ -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>
</>
);
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down