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: Fix gradient overlay (remove black background color) #38765

Merged

Conversation

webmandesign
Copy link
Contributor

Description

Fixes #38764 by setting a transparent background color on a gradient overlay element so transparent gradient stops don't reveal a default black background color of an overlay.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@Mamaduka Mamaduka added [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 labels Feb 14, 2022
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Thanks @webmandesign. This fix worked for me. I was able to replicate the issue with a non-block theme by adding the following to functions.php:

	add_theme_support(
		'editor-gradient-presets',
		array(
			array(
				'name'     => __( 'Red to transparent', 'test' ),
				'gradient' => 'linear-gradient(135deg, rgba(255,0,0,.8) 0%, rgba(255,0,0,0) 100%)',
				'slug'     => 'red-to-transparent',
			),
		)
	);

and the following css:

.has-red-to-transparent-gradient-background {
		background-image: linear-gradient(135deg, rgba(255,0,0,.8) 0%, rgba(255,0,0,0) 100%);
	}

Without this patch applied the default black background showed through the transparent part of the gradient instead of the background image:
Screen Shot 2022-02-21 at 4 30 11 PM

With patch applied the image show through as expected in the editor and the frontend:
Screen Shot 2022-02-21 at 4 29 26 PM

I also tested the following combinations on a non-block and blocked based theme and they all still functioned as expected with this patch applied:

  • Cover with image showed default block overlay if no overlay color selected
  • Cover with no image and solid overlay color selected
  • Cover with image and solid overlay color selected

Given the recent issues with some of the Cover block CSS I think it would be good to get a second set of 👀 and approval on this before we merge it.

Copy link
Contributor

@andrewserong andrewserong 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 the fix @webmandesign! This is testing nicely for me, too, it looks like it essentially overwrites the background-color: $black rule directly above it for those cases where the has-background-gradient class is applied.

I suppose an alternative would be to add an additional chaining to the :not rules above, but I quite like this separate rule as it's a bit more readable.

It also didn't look like the child combinator was necessary to me if you want to remove it (it seems to work well either way with nested cover blocks), so I'd be happy with it either way.

LGTM!

@webmandesign
Copy link
Contributor Author

Thanks guys. I have updated the code and removed the child combinator.

@webmandesign
Copy link
Contributor Author

Can I ask also for an opinion on #38761 (with #38762 fix)? Thanks.

@ramonjd ramonjd merged commit 314c984 into WordPress:trunk Feb 21, 2022
@github-actions github-actions bot added this to the Gutenberg 12.7 milestone Feb 21, 2022
@Mamaduka Mamaduka added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Feb 22, 2022
@c4rl0sbr4v0 c4rl0sbr4v0 changed the title Fixes #38764 by setting transparent bg color on gradient overlay Fix cover block gradient overlay (remove black background color) Feb 26, 2022
@c4rl0sbr4v0 c4rl0sbr4v0 changed the title Fix cover block gradient overlay (remove black background color) Cover block: Fix gradient overlay (remove black background color) Feb 26, 2022
@Mamaduka Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Mar 29, 2022
Mamaduka pushed a commit that referenced this pull request Mar 29, 2022
)

* Fixes #38764 by setting transparent bg color on gradient overlay

* Removing obsolete child combinator
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
None yet
Development

Successfully merging this pull request may close these issues.

Cover block gradient overlay has a black background color
5 participants