Directory

Fix overlay issue when empty featured image is used in Cover Block by akasunil · Pull Request #59855 · WordPress/gutenberg · GitHub
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

Fix overlay issue when empty featured image is used in Cover Block #59855

Merged
merged 2 commits into from
Mar 15, 2024

Conversation

akasunil
Copy link
Contributor

What?

Fixes #57887

Why?

Overlay doesn't show when empty featured image is used in cover block.

Testing Instructions

  1. Add cover block
  2. Select featured image option as cover background, Keeping featured image blank.
  3. Notice overlay

Screenshots or screencast

CleanShot 2024-03-14 at 11 00 46@2x

Copy link

github-actions bot commented Mar 14, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sunil25393 <sunil25393@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@akasunil
Copy link
Contributor Author

@draganescu need you to review this PR.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for putting this PR together @sunil25393 👍

It's testing nicely for me.

✅ Could replicate original issue
✅ This PR displays the overlay in the editor

Before After
Screenshot 2024-03-14 at 4 18 05 PM Screenshot 2024-03-14 at 4 20 26 PM

It looks like the overlay was deliberately omitted previously in this scenario in favour of the placeholder for the featured image.

Perhaps it is worth getting some quick design feedback as if we are looking for parity here between the editor and the frontend, having both the overlay and the background color for the placeholder results in a different color in the editor when the overlay is semi-transparent.

cc @jasmussen given your past work around image placeholders do you have any thoughts?

I don't think that small discrepancy is a blocker. This PR is a step in the right direction.

I've left one small suggestion as an inline comment but this PR looks almost ready to me.

packages/block-library/src/cover/edit/index.js Outdated Show resolved Hide resolved
@jasmussen
Copy link
Contributor

Thank you for the PR 🙏

This tentatively looks good to me. Before:

Screenshot 2024-03-14 at 08 53 06

After:

Screenshot 2024-03-14 at 08 54 43

I believe some of the challenges were around border and radius, that appears to still work as intended:

Screenshot 2024-03-14 at 08 55 11

— even if there's still a bug around how Chromium renders backdrop-filter/blur causing the edges to blur inwards. That's separate.

The following is entirely separate, but in testing this I'm noticing that the color tint from duotone, which used to affect the Featured Image block is no longer working either there or on the site logo. I wonder when that regressed.

It still works on the Image block, but that is now smaller than it used to:

Screenshot 2024-03-14 at 08 57 13

I'll investigate. But tentative 👍 👍 on this one, and thanks again.

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Mar 15, 2024
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for taking a look at this one @jasmussen 👍

I've given it another smoke test after the latest tweaks and it still tests well for me.

I'm happy to approve this one. The noted issues or regressions (unrelated) can be iterated on in follow-ups.

@draganescu draganescu merged commit 9e0d5f3 into WordPress:trunk Mar 15, 2024
60 of 61 checks passed
@github-actions github-actions bot added this to the Gutenberg 18.0 milestone Mar 15, 2024
@draganescu
Copy link
Contributor

I don't remember having a specific requirement to not allow overlay over featured image, it's just how it was implemented at the time. I think the addition is good and makes the experience of using the cover block more consistent.

@akasunil akasunil deleted the fix-issue-57887 branch March 15, 2024 13:33
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Mar 27, 2024
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] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cover Block: Overlay doesn't show when empty featured image is used
4 participants