Update Images for the Product Details Patterns (#9764)

* Update image for the Product Hero pattern.

Replace the Unsplash image with a CCO licensed image from Pxhere.

* Update images for Prod List Gallery Desc pattern

Replace the Unsplash image with a CCO licensed image from Pxhere for the
Product Listing with Gallery and Description pattern.

* Remove unneeded Unsplash images.

* Update copy for Prod Listing Gallery Desc pattern.

* Optimize new image exports.

* Update image for the Product Listing pattern.

Replace the Unsplash image with a CCO licensed image from Pxhere.

* Update images for Product Details pattern.

Replace the Unsplash images with CCO licensed images from Pxhere.

* Remove unneeded Unsplash image.

* Use Relative URLs for Images in the Product Listing Pattern

This commit replaces hardcoded URLs with dynamic ones for image placeholders in the `product-listing-with-gallery-and-description.php` pattern file.

- The `plugins_url()` function is now used to generate URLs, which correctly points to the images folder within the WooCommerce Blocks plugin directory. This approach provides better flexibility and portability since it doesn't rely on a specific domain or path. The `esc_url()` function is used to ensure the URL is safe to use in the HTML context.

- The change is made for a total of four images in the pattern.

---------

Co-authored-by: Manish Menaria <[email protected]>

patterns/product-details-listing.php

@@ -11,7 +11,7 @@
 	<div class="wp-block-column" style="padding:0">
 		<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
 		<figure class="wp-block-image size-full">
-			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-details-product-listing.jpg', dirname( __FILE__ ) ) ); ?>" alt="" />
+			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-horizontal.png', dirname( __FILE__ ) ) ); ?>" alt="" />
 		</figure>
 		<!-- /wp:image -->
 		<!-- wp:group {"align":"full","style":{"spacing":{"padding":"0px","blockGap":"0px","margin":{"top":"30px","bottom":"20px","left":"0px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"center"}} -->
@@ -31,7 +31,7 @@
 		<!-- /wp:group -->
 
 		<!-- wp:heading {"style":{"spacing":{"margin":{"bottom":"20px"}},"typography":{"fontSize":"48px","fontStyle":"normal","fontWeight":"700","lineHeight":"120%"}},"textColor":"black","fontSize":"x-large"} -->
-		<h2 class="wp-block-heading has-black-color has-text-color has-text-align-center has-x-large-font-size" style="font-size:48px;font-style:normal;font-weight:700;line-height:120%;margin-bottom:20px;">Bella Pro Series - 1.6-qt. Deep Fryer - Stainless Steel</h2>
+		<h2 class="wp-block-heading has-black-color has-text-color has-text-align-center has-x-large-font-size" style="font-size:48px;font-style:normal;font-weight:700;line-height:120%;margin-bottom:20px;">Patterned Upright, Orange and White, Wood Legs</h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:group {"align":"full","style":{"spacing":{"padding":"0px","blockGap":"0px","margin":{"top":"0px","bottom":"40px","left":"0px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"center"}} -->

patterns/product-details-pattern.php

@@ -7,30 +7,30 @@
 ?>
 <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
 <div class="wp-block-columns alignwide">
-	<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"50px","bottom":"0","left":"0px"},"blockGap":"0px"}}} -->
-	<div class="wp-block-column" style="padding-top:0;padding-right:50px;padding-bottom:0;padding-left:0px">
+	<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"40px","bottom":"0","left":"0px"},"blockGap":"0px"}}} -->
+	<div class="wp-block-column" style="padding-top:0;padding-right:40px;padding-bottom:0;padding-left:0px">
 		<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
 		<figure class="wp-block-image size-full">
-			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-3.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
+			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-floor-home-living-room-furniture-room.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
 		</figure>
 		<!-- /wp:image -->
 
 		<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0.2em","bottom":"0.2em"}}}} -->
 		<div class="wp-block-columns" style="margin-top:0.2em;margin-bottom:0.2em;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-			<!-- wp:column {"width":"243px","style":{"spacing":{"padding":{"top":"0px","right":"5px","bottom":"0px","left":"0px"},"blockGap":"0"}},"layout":{"type":"default"}} -->
-			<div class="wp-block-column" style="padding-top:0px;padding-right:5px;padding-bottom:0px;padding-left:0px;flex-basis:243px">
+			<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"5px","bottom":"0px","left":"0px"},"blockGap":"0"}},"layout":{"type":"default"}} -->
+			<div class="wp-block-column" style="padding-top:0px;padding-right:5px;padding-bottom:0px;padding-left:0px;">
 				<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
 				<figure class="wp-block-image size-full">
-					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-2.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
+					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-white-chair-floor-shelf-lamp-square-lg.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
 				</figure>
 				<!-- /wp:image --></div>
 			<!-- /wp:column -->
 
-			<!-- wp:column {"width":"244px","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
-			<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:244px">
+			<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
+			<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
 				<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
 				<figure class="wp-block-image size-full">
-					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-1.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
+					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
 				</figure>
 				<!-- /wp:image --></div>
 			<!-- /wp:column --></div>
@@ -40,7 +40,7 @@
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:heading {"style":{"color":{"text":"#000000"}},"fontSize":"x-large"} -->
-		<h2 class="wp-block-heading has-text-color has-x-large-font-size" style="color:#000000">Herriott 40" Solid Wood Console Table</h2>
+		<h2 class="wp-block-heading has-text-color has-x-large-font-size" style="color:#000000">Luxurious Charcoal Grey Upholstered Sofa</h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"10px","bottom":"0px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
@@ -86,7 +86,7 @@
 		<!-- wp:group {"layout":{"type":"constrained","justifyContent":"left"}} -->
 		<div class="wp-block-group">
 			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"},"color":{"text":"#000000"}}} -->
-			<p class="has-text-color" style="color:#000000;font-size:0.8em">Crafted from solid wood with a rich walnut finish, this table exudes warmth and sophistication. The clean lines and minimalist design effortlessly complement a variety of interior styles, from modern to rustic. With its spacious tabletop, the Urban Loft Dining Table comfortably seats six guests, making it ideal for family dinners, social gatherings, and special occasions. The sturdy construction ensures lasting durability, while the easy-to-clean surface allows for hassle-free maintenance.</p>
+			<p class="has-text-color" style="color:#000000;font-size:0.8em">The "Modern Elegance: Luxurious Charcoal Grey Upholstered Sofa" harmonizes style and comfort to redefine your living space. This stunning piece is crafted with plush, high-density foam cushions, enveloped in a rich, charcoal grey fabric that is invitingly soft to the touch. Its clean lines and contemporary silhouette are complemented by the sturdy wooden frame, making it a durable yet stylish addition to any home decor. Whether you're lounging or entertaining, this sofa promises unrivaled comfort and a look that's seamlessly chic.</p>
 			<!-- /wp:paragraph -->
 		</div>
 		<!-- /wp:group -->

patterns/product-hero.php

@@ -11,7 +11,7 @@
 	<div class="wp-block-columns">
 		<!-- wp:column {"width":"40%"} -->
 		<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
-			<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-electronics-1.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/></figure>
+			<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/></figure>
 			<!-- /wp:image --></div>
 		<!-- /wp:column -->
 
@@ -29,14 +29,14 @@
 			<div class="wp-block-buttons">
 				<!-- wp:button {"style":{"typography":{"fontSize":"0.8em"},"spacing":{"padding":{"left":"2em","right":"2em"}},"color":{"text":"#ffffff","background":"#000000"},"border":{"width":"0px","style":"none"}}} -->
 				<div class="wp-block-button has-custom-font-size" style="font-size:0.8em">
-					<a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#ffffff;background-color:#000000;padding-right:2em;padding-left:2em">Add to cart</a>
+					<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#ffffff;background-color:#000000;padding-right:2em;padding-left:2em">Add to cart</a>
 				</div>
 				<!-- /wp:button -->
 			</div>
 			<!-- /wp:buttons -->
 
 			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"},"color":{"text":"#ffffff"}}} -->
-			<p class="has-text-color" style="color:#ffffff;font-size:0.8em">Do anything you can imagine with a single unit. Chorus, distortion, echo, wah, volume and more can all be applied and controlled from a single pedal-sized unit. The all-in-one Mini 5 Dreamer is on the pedal board of your favorite artists.</p>
+			<p class="has-text-color" style="color:#ffffff;font-size:0.8em">The Bluetooth keyboard, a striking homage to classic typewriters with its round, tactile keys and vintage aesthetic, merges nostalgia with modern connectivity for a unique typing experience.</p>
 			<!-- /wp:paragraph -->
 		</div>
 		<!-- /wp:column -->

patterns/product-listing-with-gallery-and-description.php

@@ -12,37 +12,37 @@
 	<div class="wp-block-column">
 		<!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"1.5rem","left":"1.5rem"}}}} -->
 		<div class="wp-block-columns is-not-stacked-on-mobile" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-			<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|20","bottom":"0","left":"0"},"blockGap":"0"}},"layout":{"type":"constrained","wideSize":"80px"}} -->
-			<div class="wp-block-column" style="padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:0;flex-basis:33.33%">
+			<!-- wp:column {"width":"15%","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|20","bottom":"0","left":"0"},"blockGap":"0"}},"layout":{"type":"constrained","wideSize":"80px"}} -->
+			<div class="wp-block-column" style="padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:0;flex-basis:15%">
 				<!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center","justifyContent":"center"}} -->
 				<div class="wp-block-group">
-					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}}} -->
-					<figure class="wp-block-image size-thumbnail is-resized has-custom-border">
-						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-1.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
+					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}},"className":"is-resized"} -->
+					<figure class="wp-block-image size-thumbnail has-custom-border is-resized">
+						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/desk-table-wood-chair-floor-home-square.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
 					</figure>
 					<!-- /wp:image -->
 
-					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}}} -->
-					<figure class="wp-block-image size-thumbnail is-resized has-custom-border">
-						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-2.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
+					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}},"className":"is-resized"} -->
+					<figure class="wp-block-image size-thumbnail has-custom-border is-resized">
+						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
 					</figure>
 					<!-- /wp:image -->
 
-					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}}} -->
-					<figure class="wp-block-image size-thumbnail is-resized has-custom-border">
-						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-4.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
+					<!-- wp:image {"sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"color":"#dddddd","width":"1px","radius":"5px"}},"className":"is-resized"} -->
+					<figure class="wp-block-image size-thumbnail has-custom-border is-resized">
+						<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-floor-home-living-room-furniture-room-square.png', dirname( __FILE__ ) ) ); ?>" alt="" class="has-border-color" style="border-color:#dddddd;border-width:1px;border-radius:5px"/>
 					</figure>
 					<!-- /wp:image -->
 				</div>
 				<!-- /wp:group -->
 			</div>
 			<!-- /wp:column -->
 
-			<!-- wp:column {"width":"66.66%","style":{"spacing":{"blockGap":"0","padding":{"right":"0","bottom":"0","left":"0","top":"20px"}}}} -->
-			<div class="wp-block-column" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:66.66%">
+			<!-- wp:column {"width":"85%","style":{"spacing":{"blockGap":"0"}}} -->
+			<div class="wp-block-column" style="flex-basis:85%">
 				<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
 				<figure class="wp-block-image size-full">
-					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-4.png', dirname( __FILE__ ) ) ); ?>" alt="" />
+					<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-vertical.png', dirname( __FILE__ ) ) ); ?>" alt=""/>
 				</figure>
 				<!-- /wp:image -->
 			</div>
@@ -55,7 +55,7 @@
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:heading {"style":{"typography":{"fontSize":"48px","fontStyle":"normal","fontWeight":"700"}},"textColor":"foreground"} -->
-		<h2 class="wp-block-heading has-foreground-color has-text-color" style="font-size:48px;font-style:normal;font-weight:700">Wicker Back Dining Chair, Blue Seat, Wood Base</h2>
+		<h2 class="wp-block-heading has-foreground-color has-text-color" style="font-size:48px;font-style:normal;font-weight:700">Patterned Upright, Orange and White, Wood Legs</h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"10px","bottom":"0px"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
@@ -93,13 +93,7 @@
 		<!-- wp:group {"layout":{"type":"constrained","justifyContent":"left"}} -->
 		<div class="wp-block-group">
 			<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}},"textColor":"foreground"} -->
-			<p class="has-foreground-color has-text-color" style="font-size:18px">Crafted from solid wood with a rich
-				walnut finish, this table exudes warmth and sophistication. The clean lines and minimalist design
-				effortlessly complement a variety of interior styles, from modern to rustic. With its spacious tabletop,
-				the Urban Loft Dining Table comfortably seats six guests, making it ideal for family dinners, social
-				gatherings, and special occasions. The sturdy construction ensures lasting durability, while the
-				easy-to-clean surface allows for hassle-free maintenance.
-			</p>
+			<p class="has-foreground-color has-text-color" style="font-size:18px">Designed with your well-being in mind, this chair features a contoured backrest that provides exceptional lumbar support, helping to reduce strain on your back during long hours of sitting. The adjustable height and tilt mechanisms allow you to customize the chair to your preferred sitting position, ensuring a comfortable and productive workday. Upholstered in premium fabric and available in a variety of colors, the Harmony Ergonomic Chair adds a touch of elegance to any room.</p>
 			<!-- /wp:paragraph -->
 		</div>
 		<!-- /wp:group -->