Fix duotone for fixed and repeated images

woocommerce · May 16, 2022 · 12214ee · 12214ee
1 parent 6b59457
commit 12214ee
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js
@@ -526,6 +526,11 @@ const FeaturedProduct = ( {
 		const isImgElement = ! isRepeated && ! hasParallax;
 
 		const wrapperStyle = {
+			...getSpacingClassesAndStyles( attributes ).style,
+			minHeight,
+		};
+
+		const backgroundDivStyle = {
 			...( ! isImgElement
 				? {
 						...backgroundImageStyles( backgroundImageSrc ),
@@ -534,8 +539,6 @@ const FeaturedProduct = ( {
 						),
 				  }
 				: undefined ),
-			...getSpacingClassesAndStyles( attributes ).style,
-			minHeight,
 			...( ! isRepeated && {
 				backgroundRepeat: 'no-repeat',
 				backgroundSize: imageFit === 'cover' ? imageFit : 'auto',
@@ -558,8 +561,7 @@ const FeaturedProduct = ( {
 				<div className={ classes } style={ containerStyle }>
 					<div
 						className={ classnames(
-							'wc-block-featured-product__wrapper',
-							{ 'has-parallax': hasParallax }
+							'wc-block-featured-product__wrapper'
 						) }
 						style={ wrapperStyle }
 					>
@@ -581,6 +583,17 @@ const FeaturedProduct = ( {
 								} }
 							/>
 						) }
+						{ ! isImgElement && (
+							<div
+								className={ classnames(
+									'wc-block-featured-product__background-image',
+									{
+										'has-parallax': hasParallax,
+									}
+								) }
+								style={ backgroundDivStyle }
+							/>
+						) }
 						<h2
 							className="wc-block-featured-product__title"
 							dangerouslySetInnerHTML={ {

diff --git a/assets/js/blocks/featured-product/style.scss b/assets/js/blocks/featured-product/style.scss
@@ -61,22 +61,6 @@
 		width: 100%;
 		justify-content: center;
 		overflow: hidden;
-
-		&.has-parallax {
-			background-attachment: fixed;
-
-			// Mobile Safari does not support fixed background attachment properly.
-			// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
-			// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-			@supports (-webkit-overflow-scrolling: touch) {
-				background-attachment: scroll;
-			}
-
-			// Remove the appearance of scrolling based on OS-level animation preferences.
-			@media (prefers-reduced-motion: reduce) {
-				background-attachment: scroll;
-			}
-		}
 	}
 
 	&.has-left-content {
@@ -155,6 +139,22 @@
 	.wc-block-featured-product__background-image {
 		@include absolute-stretch();
 		object-fit: none;
+
+		&.has-parallax {
+			background-attachment: fixed;
+
+			// Mobile Safari does not support fixed background attachment properly.
+			// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
+			// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
+			@supports (-webkit-overflow-scrolling: touch) {
+				background-attachment: scroll;
+			}
+
+			// Remove the appearance of scrolling based on OS-level animation preferences.
+			@media (prefers-reduced-motion: reduce) {
+				background-attachment: scroll;
+			}
+		}
 	}
 
 	.wp-block-button.aligncenter {