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.

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

Don’t auto-select a pullquote text colour for regular style #10792

Merged
merged 3 commits into from Nov 6, 2018

Conversation

Projects
None yet
3 participants
@johngodley
Contributor

johngodley commented Oct 19, 2018

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:

edit_post_ wordpress_latest _wordpress

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:

edit_post_ wordpress_latest _wordpress

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:

edit_post_ wordpress_latest _wordpress

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?

  1. Create a pull quote block
  2. Open block settings
  3. Set main colour to red
  4. Confirm the text colour does not change
  5. Clear the text colour
  6. Clear the main colour and verify that the text colour is not set

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
Don’t auto-select a pullquote text colour for regular style
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.
Only auto-set colour if setting the main colour
This prevents clearing of the main colour from setting the text colour
@jorgefilipecosta

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 ) {

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta Oct 23, 2018

Member

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 );

This comment has been minimized.

@johngodley

johngodley Oct 24, 2018

Contributor

Ah yes, nice! Updated

Stop switch from solid to regular style still changing text colour
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
@jorgefilipecosta

LGTM 👍

@johngodley johngodley added this to the 4.3 milestone Nov 6, 2018

@johngodley johngodley merged commit ead88a1 into master Nov 6, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@johngodley johngodley deleted the fix/pullquote-auto-colour branch Nov 6, 2018

@mtias mtias added the Accessibility label Nov 12, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Don’t auto-select a pullquote text colour for regular style (WordPres…
…s#10792)

* Don’t auto-select a pullquote text colour for regular style

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.

* Only auto-set colour if setting the main colour

This prevents clearing of the main colour from setting the text colour

* Stop switch from solid to regular style still changing text colour

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment