', esc_attr( trim( $classes ) ) );
+ $output .= sprintf( '
', esc_attr( $styles ) );
$output .= $this->render_overlay( $attributes );
if ( ! $attributes['isRepeated'] ) {
@@ -201,14 +198,24 @@ private function render_overlay( $attributes ) {
/**
* Get the styles for the wrapper element (background image, color).
*
- * @param array $attributes Block attributes. Default empty array.
+ * @param array $attributes Block attributes. Default empty array.
+ * @param string $image_url Url of the product image.
*
* @return string
*/
- public function get_styles( $attributes ) {
+ public function get_styles( $attributes, $image_url ) {
$style = '';
- $min_height = isset( $attributes['minHeight'] ) ? $attributes['minHeight'] : wc_get_theme_support( 'featured_block::default_height', 500 );
+ if ( $attributes['isRepeated'] ) {
+ $style .= "background-image: url($image_url);";
+ $style .= sprintf(
+ 'background-position: %s%% %s%%;',
+ $attributes['focalPoint']['x'] * 100,
+ $attributes['focalPoint']['y'] * 100
+ );
+ }
+
+ $min_height = $attributes['minHeight'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );
if ( isset( $attributes['minHeight'] ) ) {
$style .= sprintf( 'min-height:%dpx;', intval( $min_height ) );