From fdef2cbb9bf3610682ba23c56ead2289de591b21 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 20 Jan 2021 08:01:48 -1000
Subject: [PATCH] Fix repeated backgrounds with transparent images

See https://github.com/WordPress/gutenberg/pull/28310#issuecomment-763802436
---
 packages/block-library/src/cover/edit.js | 8 +++++---
 packages/block-library/src/cover/save.js | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index e379797e2ef66..2b92d43684477 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -330,8 +330,10 @@ function CoverEdit( {
 		? `${ minHeight }${ minHeightUnit }`
 		: minHeight;
 
+	const isImgElement = ! ( hasParallax || isRepeated );
+
 	const style = {
-		...( isImageBackground && ( hasParallax || isRepeated )
+		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
 			: {} ),
 		backgroundColor: overlayColor.color,
@@ -342,7 +344,7 @@ function CoverEdit( {
 	const mediaStyle = {
 		objectPosition:
 			// prettier-ignore
-			focalPoint && ! hasParallax
+			focalPoint && isImgElement
 				? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100) }%`
 				: undefined,
 	};
@@ -595,7 +597,7 @@ function CoverEdit( {
 						style={ { background: gradientValue } }
 					/>
 				) }
-				{ isImageBackground && ! hasParallax && (
+				{ isImageBackground && isImgElement && (
 					<img
 						ref={ isDarkElement }
 						className="wp-block-cover__image-background"
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index f530ad77790a6..d9f1bb0def032 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -54,8 +54,10 @@ export default function save( { attributes } ) {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const isImgElement = ! ( hasParallax || isRepeated );
+
 	const style = {
-		...( isImageBackground && ( hasParallax || isRepeated )
+		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
 			: {} ),
 		backgroundColor: ! overlayColorClass ? customOverlayColor : undefined,
@@ -65,7 +67,7 @@ export default function save( { attributes } ) {
 
 	const objectPosition =
 		// prettier-ignore
-		focalPoint && ! hasParallax
+		focalPoint && isImgElement
 			? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 			: undefined;
 
@@ -101,7 +103,7 @@ export default function save( { attributes } ) {
 					}
 				/>
 			) }
-			{ isImageBackground && url && ! hasParallax && (
+			{ isImageBackground && isImgElement && url && (
 				<img
 					className={ classnames(
 						'wp-block-cover__image-background',