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.

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

Cover block: disable contrast checker #53080

Merged
merged 1 commit into from
Jul 28, 2023

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jul 27, 2023

What?

Resolves #50531

Let's deactivate the contrast checker on the cover block!

Why?

Given the combination of text, image, alpha and overlay color, it's just too much for the contrast checking algorithm to cope.

See discussion on the current issue or a past PR.

How?

Whacking "enableContrastChecker": false in the Cover block's block.json.
Too easy.

Testing Instructions

  1. Insert a Cover block into a post
  2. Set the same color for overlay and text
  3. Witness that the contrast checker does not come to the party
Example HTML (you'll have to replace the image)
<!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2023/07/Eq_it-na_pizza-margherita_sep2005_sml.jpg.webp","id":7,"dimRatio":50,"customOverlayColor":"#f2f0f0","isDark":false,"style":{"elements":{"link":{"color":{"text":"#f7f2f2"}}},"color":{"text":"#f7f2f2"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light has-text-color has-link-color" style="color:#f7f2f2"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#f2f0f0"></span><img class="wp-block-cover__image-background wp-image-7" alt="" src="http://localhost:8888/wp-content/uploads/2023/07/Eq_it-na_pizza-margherita_sep2005_sml.jpg.webp" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">A sweet cover block</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Screenshots or screencast

Before After
Screenshot 2023-07-28 at 9 22 20 am Screenshot 2023-07-28 at 9 22 56 am

@ramonjd ramonjd added [Type] Bug An existing feature does not function as intended [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Jul 27, 2023
@ramonjd ramonjd requested a review from ajitbohra as a code owner July 27, 2023 23:32
@ramonjd ramonjd self-assigned this Jul 27, 2023
@github-actions
Copy link

github-actions bot commented Jul 28, 2023

Flaky tests detected in 2ec77b4.
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/5686445315
📝 Reported issues:

Copy link
Member

@ndiego ndiego left a comment

Choose a reason for hiding this comment

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

Works like a charm. LGTM 🚀

image

@ramonjd ramonjd merged commit 4a1e918 into trunk Jul 28, 2023
53 checks passed
@ramonjd ramonjd deleted the update/cover-block-disable-contrast-checker branch July 28, 2023 03:11
@github-actions github-actions bot added this to the Gutenberg 16.4 milestone Jul 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

ContrastChecker: Cover block overlay and text color incorrect
2 participants