Update patterns with the new images (#11782)

* delete current images used in the patterns

* Update Feactured Category Cover Image Pattern

* Update Hero Product split pattern

* Update just arrived full hero pattern

* Update Featured Category Triple pattern

* Update Hero Product 3 Split pattern

* Update Hero Product Chessboard

* Update Alterning image and text pattern

* Update Testimonial single pattern

* Update Follow Us on social media pattern

* Update Banner pattern

* Update Alternating Image and Text pattern

* Update Hero Product Chessboard

* Update Featured Category focus pattern

* Update banner pattern

* restore images

* update hero product 3 split pattern

* remove duplicate image

* update dictionary json

* update banner pattern

* optimize image

* fix validation

* fixed width and height

* Replace image Featured Category Focus pattern

patterns/banner.php

@@ -13,20 +13,20 @@
 $second_description = $content['descriptions'][1]['default'] ?? '';
 ?>
 
-<!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"color":{"background":"#caf0fa"}}} -->
-<div class="wp-block-columns alignwide has-background" style="background-color:#caf0fa">
+<!-- wp:columns {"verticalAlignment":null,"align":"wide","backgroundColor":"contrast"} -->
+<div class="wp-block-columns alignwide has-contrast-background-color has-background">
 	<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
 	<div class="wp-block-column is-vertically-aligned-center" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
-		<!-- wp:paragraph {"style":{"color":{"text":"#005cc9"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#005cc9;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong><?php echo esc_html( $first_description ); ?></strong> </p>
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}, "textColor":"base"} -->
+		<p class="has-base-color has-text-color" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong><?php echo esc_html( $first_description ); ?></strong> </p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:paragraph {"style":{"typography":{"fontSize":"48px"},"color":{"text":"#043553"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#043553;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong><?php echo esc_html( $banner_title ); ?></strong> </p>
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"48px"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}, "textColor":"base"} -->
+		<p class="has-base-color has-text-color" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong><?php echo esc_html( $banner_title ); ?></strong> </p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:paragraph {"style":{"color":{"text":"#075586"},"typography":{"fontSize":"24px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#075586;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px"><?php echo esc_html( $second_description ); ?></p>
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"24px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}, "textColor":"base"} -->
+		<p class="has-base-color has-text-color" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px"><?php echo esc_html( $second_description ); ?></p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons {"style":{"spacing":{"blockGap":"0","margin":{"top":"20px","bottom":"0"}}}} -->
@@ -47,7 +47,7 @@
 	<div class="wp-block-column is-vertically-aligned-center">
 		<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
 		<figure class="wp-block-image size-full">
-			<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" />
+			<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/music-needle-turntable-black-and-white-white-photography.jpg' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" />
 		</figure>
 		<!-- /wp:image -->
 	</div>

patterns/featured-category-cover-image.php

@@ -7,17 +7,17 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/shop-jeans.png' );
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/table-wood-house-chair-floor-window.jpg' );
 
 $category_title = $content['titles'][0]['default'] ?? '';
 $description    = $content['descriptions'][0]['default'] ?? '';
 $button         = $content['buttons'][0]['default'] ?? '';
 ?>
 
-<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"align":"full","style":{"spacing":{"padding":{"top":"3%","right":"0%","bottom":"10%","left":"5%"},"margin":{"top":"0","bottom":"80px"},"blockGap":"1%"}},"layout":{"type":"default"}} -->
+<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"focalPoint":{"x":0.5,"y":1},"align":"full","style":{"spacing":{"padding":{"top":"3%","right":"0%","bottom":"10%","left":"5%"},"margin":{"top":"0","bottom":"80px"},"blockGap":"1%"}},"layout":{"type":"default"}} -->
 <div class="wp-block-cover alignfull" style="margin-top:0;margin-bottom:80px;padding-top:3%;padding-right:0%;padding-bottom:10%;padding-left:5%">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
-	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
+	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" style="object-position:50% 100%" data-object-fit="cover" data-object-position="50% 100%"/>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:heading {"level":3} -->
 		<h3 class="wp-block-heading"><?php echo esc_html( $category_title ); ?></h3>

patterns/featured-category-focus.php

@@ -10,11 +10,11 @@
 $category_title = $content['titles'][0]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"full","style":{"color":{"background":"#84bfe1"},"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
-<div class="wp-block-group alignfull has-background" style="background-color:#84bfe1;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)">
-	<!-- wp:image {"id":1,"width":502,"height":335,"sizeSlug":"full","linkDestination":"none"} -->
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)">
+	<!-- wp:image {"id":1,"width":"469px","height":"348px","sizeSlug":"full","linkDestination":"none", "scale":"cover"} -->
 	<figure class="wp-block-image size-full is-resized">
-		<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" width="502" height="335"/>
+		<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/white-black-black-and-white-photograph-monochrome-photography.jpg' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1"  style="object-fit:cover;width:469px;height:348px"/>
 	</figure>
 	<!-- /wp:image -->
 

patterns/featured-category-triple.php

@@ -7,9 +7,9 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png' );
-$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png' );
-$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png' );
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/tree-branch-plant-wood-leaf-flower.jpg' );
+$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/watch-hand-brand-jewellery-strap-platinum.jpg' );
+$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/white-vase-decoration-pattern-ceramic-lamp.jpg' );
 
 $first_title  = $content['titles'][0]['default'] ?? '';
 $second_title = $content['titles'][1]['default'] ?? '';

patterns/hero-product-3-split.php

@@ -21,13 +21,13 @@
 <div class="wp-block-columns alignwide" style="margin-top:0px;margin-bottom:80px">
 	<!-- wp:column -->
 	<div class="wp-block-column">
-		<!-- wp:cover {"url":"<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png' ) ); ?>","dimRatio":0,"minHeight":800,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
+		<!-- wp:cover {"url":"<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg' ) ); ?>","dimRatio":0,"minHeight":800,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
 		<div class="wp-block-cover is-light" style="min-height:800px">
 			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
 			<img
 				class="wp-block-cover__image-background"
 				alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased.', 'woo-gutenberg-products-block' ); ?>"
-				src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png' ) ); ?>"
+				src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg' ) ); ?>"
 				data-object-fit="cover" />
 			<div class="wp-block-cover__inner-container">
 				<!-- wp:paragraph {"align":"center","placeholder":" ","fontSize":"large"} -->

patterns/hero-product-chessboard.php

@@ -7,8 +7,8 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png' );
-$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png' );
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg' );
+$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/table-wood-house-chair-floor-window.jpg' );
 
 $first_title  = $content['titles'][0]['default'] ?? '';
 $second_title = $content['titles'][1]['default'] ?? '';

patterns/hero-product-split.php

@@ -29,7 +29,7 @@
 	</div>
 
 	<figure class="wp-block-media-text__media">
-		<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" />
+		<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-guy-statue.jpg' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" />
 	</figure>
 </div>
 <!-- /wp:media-text -->

patterns/just-arrived-full-hero.php

@@ -10,13 +10,13 @@
 $pattern_title       = $content['titles'][0]['default'] ?? '';
 $pattern_description = $content['descriptions'][0]['default'] ?? '';
 $pattern_button      = $content['buttons'][0]['default'] ?? '';
-$pattern_image       = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' );
+$pattern_image       = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-music-black-and-white-white-photography.jpg' );
 ?>
 
-<!-- wp:cover {"url":"<?php echo esc_url( $pattern_image ); ?>","dimRatio":30,"minHeight":739,"contentPosition":"center right","align":"full","style":{"spacing":{"margin":{"bottom":"80px"},"padding":{"left":"0","right":"25%"}}}}  -->
+<!-- wp:cover {"url":"<?php echo esc_url( $pattern_image ); ?>", "focalPoint":{"x":0.5,"y":0.1}, "dimRatio":30,"minHeight":739,"contentPosition":"center right","align":"full","style":{"spacing":{"margin":{"bottom":"80px"},"padding":{"left":"0","right":"25%"}}}}  -->
 <div class="wp-block-cover alignfull has-custom-content-position is-position-center-right" style="margin-bottom:80px;padding-right:25%;padding-left:0;min-height:739px">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
-	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $pattern_image ); ?>" data-object-fit="cover" />
+	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $pattern_image ); ?>" style="object-position:50% 10%" data-object-fit="cover" data-object-position="50% 10%" />
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"},"blockGap":"16px"}}} {"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">

patterns/product-hero-2-col-2-row.php

@@ -7,7 +7,7 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png' );
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-guy-statue.jpg' );
 $image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png' );
 
 $first_title  = $content['titles'][0]['default'] ?? '';

patterns/social-follow-us-in-social-media.php

@@ -7,10 +7,10 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/office.png' );
-$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/living-room.png' );
-$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/living-room-sofa.png' );
-$image4 = PatternsHelper::get_image_url( $images, 3, 'images/pattern-placeholders/dining-room.png' );
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg' );
+$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/watch-hand-brand-jewellery-strap-platinum.jpg' );
+$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/tree-branch-plant-wood-leaf-flower.jpg' );
+$image4 = PatternsHelper::get_image_url( $images, 3, 'images/pattern-placeholders/road-sport-vintage-wheel-retro-old.jpg' );
 
 $social_title = $content['titles'][0]['default'] ?? '';
 ?>
@@ -41,39 +41,39 @@
 	<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)">
 		<!-- wp:column -->
 		<div class="wp-block-column">
-			<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
-			<figure class="wp-block-image size-large">
-				<img src="<?php echo esc_url( $image1 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
+			<!-- wp:image {"width":"266px","height":"266px","aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
+			<figure class="wp-block-image is-resized size-large">
+				<img src="<?php echo esc_url( $image1 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover;width:266px;height:266px"/>
 			</figure>
 			<!-- /wp:image -->
 		</div>
 		<!-- /wp:column -->
 
 		<!-- wp:column -->
 		<div class="wp-block-column">
-			<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
-			<figure class="wp-block-image size-large">
-				<img src="<?php echo esc_url( $image2 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
+			<!-- wp:image {"width":"266px","height":"266px","aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
+			<figure class="wp-block-image is-resized size-large">
+				<img src="<?php echo esc_url( $image2 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover;width:266px;height:266px"/>
 			</figure>
 			<!-- /wp:image -->
 		</div>
 		<!-- /wp:column -->
 
 		<!-- wp:column -->
 		<div class="wp-block-column">
-			<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
-			<figure class="wp-block-image size-large">
-				<img src="<?php echo esc_url( $image3 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
+			<!-- wp:image {"width":"266px","height":"266px","aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
+			<figure class="wp-block-image is-resized size-large">
+				<img src="<?php echo esc_url( $image3 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover;width:266px;height:266px"/>
 			</figure>
 			<!-- /wp:image -->
 		</div>
 		<!-- /wp:column -->
 
 		<!-- wp:column -->
 		<div class="wp-block-column">
-			<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
-			<figure class="wp-block-image size-large">
-				<img src="<?php echo esc_url( $image4 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
+			<!-- wp:image {"width":"266px","height":"266px","aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
+			<figure class="wp-block-image is-resized size-large">
+				<img src="<?php echo esc_url( $image4 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover;width:266px;height:266px"/>
 			</figure>
 			<!-- /wp:image -->
 		</div>