gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Add validation message to custom CSS input

Open kevin940726 opened this issue 1 year ago • 10 comments

What?

Part of https://github.com/WordPress/gutenberg/issues/30142. Add CSS validation message to custom CSS input. Currently only an error message Error while parsing the CSS. will be shown, there's no debug info.

Why?

For users to know why their CSS isn't being applied to the preview.

How?

This PR isn't ideal but it does the job for now. The challenge is how to move the validation/transformation to the input. Currently, all the transformation is done in <EditorStyles>, which is in a different package, and it will be too late to display error messages there. This PR currently does double-transform, and we should fix that in the future.

While testing this PR, I found out that the transformation library we use (reworkcss) is at least 4 years ago and has many bugs. For instance, body{background:red will throw an error while it should be valid syntax. On the other hand, body{backgroundd:red;} doesn't throw an error while it should be invalid. We should work on replacing/updating it in the future.

Testing Instructions

  1. Enable custom CSS in gutenberg experiments
  2. Go to Site Editor
  3. Open Styles -> Custom CSS
  4. Start writing some CSS and leave it in an invalid state
  5. Blur the edit box and Notice the validation message appears when the CSS is invalid
  6. Edit the CSS to make it valid and check that the error disappears

Testing Instructions for Keyboard

  1. Enable custom CSS in gutenberg experiments
  2. Go to Site Editor, tab through to the "Edit" button and hit Enter.
  3. Tab through to the "Styles" button in the editor toolbar and hit Enter. Use Ctrl + ` to navigate to the "Styles" panel. Tab through to the "Additional CSS" button.
  4. Tab through to the textbox and start writing some CSS and leave it in an invalid state.
  5. Tab away from the box and screen readers should announce the validation message if the CSS is invalid.

Screenshots or screencast

https://user-images.githubusercontent.com/7753001/212232514-2805a993-be0d-495c-b14e-a458f0ff7832.mp4

kevin940726 avatar Jan 13 '23 03:01 kevin940726