Don’t auto-select a pullquote text colour for regular style#10792
Merged
Conversation
Regular style uses the theme background, but the auto-selected colour assumes the main colour is the background. This can often lead to a very poor colour choice.
johngodley
added
[Feature] Blocks
This prevents clearing of the main colour from setting the text colour
johngodley
removed
the
[Status] In Progress
Member
jorgefilipecosta
left a comment
jorgefilipecosta
left a comment
There was a problem hiding this comment.
Thank you for this change @johngodley this generally works well on my tests 👍 There is only an edge case that I think we may be able to improve.
|
|
||
| setMainColor( colorValue ); | ||
| if ( ! textColor.color || this.wasTextColorAutomaticallyComputed ) { | ||
| if ( shouldSetTextColor || this.wasTextColorAutomaticallyComputed ) { |
Member
There was a problem hiding this comment.
If we go the solid color style we pick the main color, and then we change to the regular style, each time we change the main color the text color continue to change.
I think maybe we can solve this by updating shouldSetTextColor to be isSolidColorStyle && colorValue && ( ! textColor.color || this.wasTextColorAutomaticallyComputed );
Contributor
Author
There was a problem hiding this comment.
Ah yes, nice! Updated
If you picked the solid style and set a main colour and then switched to regular style and picked a main colour it would continue to change the text colour. This moves the wasTextColorAutomaticallyComputed check so this doesn’t happen
mtias
added
the
[Focus] Accessibility (a11y)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The pullquote block auto-selects an appropriate text colour based on the main colour. This is designed to give a good contrast. However it assumes the quote has a 'solid colour' style where the main colour is the background, with the text overlayed:
If the pullquote uses the 'regular colour' style the background is white (or whatever the theme uses), and the main colour changes the top and bottom border:
The colour calculated for the main colour background can often give a poor contrast ratio on this white background.
For example, if you create a pull quote with regular style and pick red as the main colour it sets the text colour to light grey (the calculated text colour for red). In the above solid colour quote this gives good contrast, but on a regular colour quote with white background it gives poor contrast:
This PR restricts the auto-colour selection to the 'solid colour' style only. I'm not sure if this fits the intended purpose of the block, but it fixes the problem in this instance.
Also fixes the situation where clicking 'clear' on the main colour sets a text colour.
Fixes #10568
How has this been tested?
Checklist: