Add Fixed image behaviour

woocommerce · May 2, 2022 · 28e8f95 · 28e8f95
1 parent 8ff17a4
commit 28e8f95
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 8 deletions.
diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js
@@ -464,6 +464,7 @@ const FeaturedProduct = ( {
 			contentAlign,
 			dimRatio,
 			focalPoint,
+			hasParallax,
 			isRepeated,
 			imageFit,
 			mediaSrc,
@@ -500,7 +501,7 @@ const FeaturedProduct = ( {
 			objectFit: imageFit,
 		};
 
-		const isImgElement = ! isRepeated;
+		const isImgElement = ! isRepeated && ! hasParallax;
 
 		const wrapperStyle = {
 			...( ! isImgElement
@@ -513,6 +514,10 @@ const FeaturedProduct = ( {
 				: undefined ),
 			...getSpacingClassesAndStyles( attributes ).style,
 			minHeight,
+			...( ! isRepeated && {
+				backgroundRepeat: 'no-repeat',
+				backgroundSize: imageFit === 'cover' ? imageFit : 'auto',
+			} ),
 		};
 
 		const overlayStyle = {
@@ -530,7 +535,10 @@ const FeaturedProduct = ( {
 				/>
 				<div className={ classes } style={ containerStyle }>
 					<div
-						className="wc-block-featured-product__wrapper"
+						className={ classnames(
+							'wc-block-featured-product__wrapper',
+							{ 'has-parallax': hasParallax }
+						) }
 						style={ wrapperStyle }
 					>
 						<div

diff --git a/assets/js/blocks/featured-product/style.scss b/assets/js/blocks/featured-product/style.scss
@@ -46,6 +46,22 @@
 		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 {

diff --git a/src/BlockTypes/FeaturedProduct.php b/src/BlockTypes/FeaturedProduct.php
@@ -96,14 +96,15 @@ protected function render( $attributes, $content ) {
 
 		$image_url = esc_url( $this->get_image_url( $attributes, $product ) );
 
-		$styles  = $this->get_styles( $attributes, $image_url );
-		$classes = $this->get_classes( $attributes );
+		$styles          = $this->get_styles( $attributes, $image_url );
+		$classes         = $this->get_classes( $attributes );
+		$wrapper_classes = $this->get_wrapper_classes( $attributes );
 
 		$output  = sprintf( '<div class="%1$s wp-block-woocommerce-featured-product">', esc_attr( trim( $classes ) ) );
-		$output .= sprintf( '<div class="wc-block-featured-product__wrapper" style="%s">', esc_attr( $styles ) );
+		$output .= sprintf( '<div class="%s" style="%s">', esc_attr( $wrapper_classes ), esc_attr( $styles ) );
 		$output .= $this->render_overlay( $attributes );
 
-		if ( ! $attributes['isRepeated'] ) {
+		if ( ! $attributes['isRepeated'] && ! $attributes['hasParallax'] ) {
 			$output .= $this->render_image( $attributes, $product, $image_url );
 		}
 
@@ -154,7 +155,7 @@ private function get_image_url( $attributes, $product ) {
 	private function render_image( $attributes, $product, $image_url ) {
 		$style = sprintf( 'object-fit: %s;', $attributes['imageFit'] );
 
-		if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) {
+		if ( $this->hasFocalPoint( $attributes ) ) {
 			$style .= sprintf(
 				'object-position: %s%% %s%%;',
 				$attributes['focalPoint']['x'] * 100,
@@ -206,8 +207,16 @@ private function render_overlay( $attributes ) {
 	public function get_styles( $attributes, $image_url ) {
 		$style = '';
 
-		if ( $attributes['isRepeated'] ) {
+		if ( $attributes['isRepeated'] || $attributes['hasParallax'] ) {
 			$style .= "background-image: url($image_url);";
+		}
+
+		if ( ! $attributes['isRepeated'] ) {
+			$style .= "background-repeat: 'no-repeat';";
+			$style .= 'background-size: ' . ( 'cover' === $attributes['imageFit'] ? $attributes['imageFit'] : 'auto' ) . ';';
+		}
+
+		if ( $this->hasFocalPoint( $attributes ) ) {
 			$style .= sprintf(
 				'background-position: %s%% %s%%;',
 				$attributes['focalPoint']['x'] * 100,
@@ -227,6 +236,22 @@ public function get_styles( $attributes, $image_url ) {
 		return $style;
 	}
 
+	/**
+	 * Get class names for the block wrapper.
+	 *
+	 * @param array $attributes Block attributes. Default empty array.
+	 * @return string
+	 */
+	private function get_wrapper_classes( $attributes ) {
+		$classes[] = 'wc-block-featured-product__wrapper';
+
+		if ( $attributes['hasParallax'] ) {
+			$classes[] = ' has-parallax';
+		}
+
+		return implode( ' ', $classes );
+	}
+
 	/**
 	 * Get class names for the block container.
 	 *
@@ -287,6 +312,17 @@ public function get_image( $product, $size = 'full' ) {
 		return $image;
 	}
 
+	/**
+	 * Returns whether the focal point is defined for the block.
+	 *
+	 * @param array $attributes Block attributes. Default empty array.
+	 *
+	 * @return bool
+	 */
+	private function hasFocalPoint( $attributes ): bool {
+		return is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] );
+	}
+
 	/**
 	 * Extra data passed through from server to client for block.
 	 *