Skip to content

Commit

Permalink
Make the custom CSS validation error message accessible. (#56690)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alex Stine <[email protected]>
  • Loading branch information
@afercia @alexstine
afercia and alexstine authored Feb 14, 2024
1 parent 4bf1d21 commit 0e2762c
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 22 deletions.
18 changes: 6 additions & 12 deletions packages/block-editor/src/components/global-styles/advanced-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
*/
import {
TextareaControl,
Tooltip,
Notice,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon, info } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -58,6 +57,11 @@ export default function AdvancedPanel( {

return (
<VStack spacing={ 3 }>
{ cssError && (
<Notice status="error" onRemove={ () => setCSSError( null ) }>
{ cssError }
</Notice>
) }
<TextareaControl
label={ __( 'Additional CSS' ) }
__nextHasNoMarginBottom
Expand All @@ -67,16 +71,6 @@ export default function AdvancedPanel( {
className="block-editor-global-styles-advanced-panel__custom-css-input"
spellCheck={ false }
/>
{ cssError && (
<Tooltip text={ cssError }>
<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
<Icon
icon={ info }
className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
/>
</div>
</Tooltip>
) }
</VStack>
);
}
10 changes: 0 additions & 10 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,3 @@
/*rtl:ignore*/
direction: ltr;
}

.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
position: absolute;
bottom: $grid-unit-20;
right: $grid-unit * 3;
}

.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
fill: $alert-red;
}

1 comment on commit 0e2762c

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 0e2762c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7898638497
📝 Reported issues:

Please sign in to comment.