Add the styles for rendering the repeated image on the frontend

woocommerce · Apr 28, 2022 · f126738 · f126738
1 parent 1aa278d
commit f126738
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/assets/js/blocks/featured-product/example.js b/assets/js/blocks/featured-product/example.js
@@ -9,6 +9,8 @@ export const example = {
 		contentAlign: 'center',
 		dimRatio: 50,
 		editMode: false,
+		hasParallax: false,
+		isRepeated: false,
 		height: getSetting( 'default_height', 500 ),
 		mediaSrc: '',
 		overlayColor: '#000000',

diff --git a/assets/js/blocks/featured-product/style.scss b/assets/js/blocks/featured-product/style.scss
@@ -43,6 +43,7 @@
 		display: flex;
 		flex-wrap: wrap;
 		height: 100%;
+		width: 100%;
 		justify-content: center;
 		overflow: hidden;
 	}

diff --git a/src/BlockTypes/FeaturedProduct.php b/src/BlockTypes/FeaturedProduct.php
@@ -24,6 +24,8 @@ class FeaturedProduct extends AbstractDynamicBlock {
 		'contentAlign' => 'center',
 		'dimRatio'     => 50,
 		'focalPoint'   => false,
+		'hasParallax'  => false,
+		'isRepeated'   => false,
 		'imageFit'     => 'none',
 		'mediaId'      => 0,
 		'mediaSrc'     => '',
@@ -68,7 +70,9 @@ protected function render( $attributes, $content ) {
 		}
 		$attributes = wp_parse_args( $attributes, $this->defaults );
 
-		$attributes['height'] = isset( $attributes['height'] ) ? $attributes['height'] : wc_get_theme_support( 'featured_block::default_height', 500 );
+		$default_height       = wc_get_theme_support( 'featured_block::default_height', 500 );
+		$min_height           = $attributes['minHeight'] ?? $default_height;
+		$attributes['height'] = $attributes['height'] ?? $default_height;
 
 		$title = sprintf(
 			'<h2 class="wc-block-featured-product__title">%s</h2>',
@@ -95,10 +99,19 @@ protected function render( $attributes, $content ) {
 		$styles  = $this->get_styles( $attributes );
 		$classes = $this->get_classes( $attributes );
 
-		$output  = sprintf( '<div class="%1$s wp-block-woocommerce-featured-product" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
-		$output .= '<div class="wc-block-featured-product__wrapper">';
+		$output = sprintf( '<div class="%1$s wp-block-woocommerce-featured-product" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
+
+		$image_url = esc_url( $this->get_image_url( $attributes, $product ) );
+
+		$wrapper_styles = $this->get_wrapper_styles( $attributes, $image_url, $min_height );
+
+		$output .= sprintf( '<div class="wc-block-featured-product__wrapper" style="%s">', esc_attr( $wrapper_styles ) );
 		$output .= $this->render_overlay( $attributes );
-		$output .= $this->render_image( $attributes, $product );
+
+		if ( ! $attributes['isRepeated'] ) {
+			$output .= $this->render_image( $attributes, $product, $image_url );
+		}
+
 		$output .= $title;
 		if ( $attributes['showDesc'] ) {
 			$output .= $desc_str;
@@ -139,14 +152,13 @@ private function get_image_url( $attributes, $product ) {
 	 *
 	 * @param array       $attributes Block attributes. Default empty array.
 	 * @param \WC_Product $product Product object.
+	 * @param string      $image_url Product image url.
 	 *
 	 * @return string
 	 */
-	private function render_image( $attributes, $product ) {
+	private function render_image( $attributes, $product, $image_url ) {
 		$style = sprintf( 'object-fit: %s;', $attributes['imageFit'] );
 
-		$image = $this->get_image_url( $attributes, $product );
-
 		if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) {
 			$style .= sprintf(
 				'object-position: %s%% %s%%;',
@@ -155,11 +167,11 @@ private function render_image( $attributes, $product ) {
 			);
 		}
 
-		if ( ! empty( $image ) ) {
+		if ( ! empty( $image_url ) ) {
 			return sprintf(
 				'<img alt="%1$s" class="wc-block-featured-product__background-image" src="%2$s" style="%3$s" />',
 				wp_kses_post( $product->get_short_description() ),
-				esc_url( $image ),
+				$image_url,
 				$style
 			);
 		}
@@ -239,6 +251,10 @@ public function get_classes( $attributes ) {
 			$classes[] = $attributes['className'];
 		}
 
+		if ( $attributes['isRepeated'] ) {
+			$classes[] = 'is-repeated';
+		}
+
 		$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
 		$classes[]            = $global_style_classes;
 
@@ -266,6 +282,30 @@ public function get_image( $product, $size = 'full' ) {
 		return $image;
 	}
 
+	/**
+	 * Get the styles for the feature product wrapper.
+	 *
+	 * @param array  $attributes Block attributes. Default empty array.
+	 * @param string $image_url Product image url.
+	 * @param string $min_height Block min-height.
+	 *
+	 * @return string
+	 */
+	public function get_wrapper_styles( $attributes, $image_url, $min_height ) {
+		$wrapper_styles = sprintf( 'min-height:%dpx;', intval( $min_height ) );
+
+		if ( $attributes['isRepeated'] ) {
+			$wrapper_styles .= "background-image: url($image_url);";
+			$wrapper_styles .= sprintf(
+				'background-position: %s%% %s%%;',
+				$attributes['focalPoint']['x'] * 100,
+				$attributes['focalPoint']['y'] * 100
+			);
+		}
+
+		return $wrapper_styles;
+	}
+
 	/**
 	 * Extra data passed through from server to client for block.
 	 *