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

Change the textcolor passed to ContrastChecker #14716

Closed
wants to merge 1 commit into from
Closed

Change the textcolor passed to ContrastChecker #14716

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 15 additions & 1 deletion packages/block-library/src/paragraph/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,20 @@ class ParagraphBlock extends Component {
}
}

getDisplayedTextColor( backgroundColorClass, textColor ) {
// If backgroundColor class is primary, secondary, dark gray, light grary,
// then the displayed color of text is '#fff' (white), even if the textColor remains undefined.
// If backgroundColor class is white, then the displayed color of text is '#111' (black).
// This is a feature to improve accessibility.
if ( backgroundColorClass ) {
if ( backgroundColorClass === 'has-white-background-color' ) {
return '#111';
Copy link
Member

Choose a reason for hiding this comment

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

Black is encoded as #000.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi, @gziolo Thanks for your comments. I inspect the CSS files.
When I set the background color to primary, secondary, light gray, dark gray, the CSS file is
image
so the color is '#fff' (white)

When I set the background color to white, the CSS file is
image
so the color is '#111' (black)

And you are right, '#000' is also black. But to maintain the consistency, '#111' may be better I think.

}
return '#fff';
}
return textColor;
}

render() {
const {
attributes,
Expand Down Expand Up @@ -209,7 +223,7 @@ class ParagraphBlock extends Component {
>
<ContrastChecker
{ ...{
textColor: textColor.color,
textColor: this.getDisplayedTextColor( backgroundColor.class, textColor.color ),
Copy link
Member

Choose a reason for hiding this comment

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

Upon inspection of the file, it seems like it might be necessary to provide defaults inside the implementation of withFallbackStyles at the top of the file in place of undefined values.

backgroundColor: backgroundColor.color,
fallbackTextColor,
fallbackBackgroundColor,
Expand Down