Add product details pattern (#9408)

* Add product details pattern

* Replace stars image

Author: roykho

images/pattern-placeholders/product-furniture-1.png

@@ -0,0 +1,139 @@
+<?php
+/**
+ * Title: Product Details Pattern
+ * Slug: woocommerce-blocks/product-details-pattern
+ * Categories: WooCommerce
+ */
+?>
+<!-- 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:image {"id":1,"width":500,"height":723,"sizeSlug":"full","linkDestination":"none"} -->
+		<figure class="wp-block-image size-full is-resized">
+			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-3.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="500" height="723"/>
+		</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: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"/>
+				</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: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"/>
+				</figure>
+				<!-- /wp:image --></div>
+			<!-- /wp:column --></div>
+		<!-- /wp:columns --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:heading {"textColor":"foreground","fontSize":"x-large"} -->
+		<h2 class="wp-block-heading has-foreground-color has-text-color has-x-large-font-size">Herriott 40" Solid Wood Console Table</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"}} -->
+		<div class="wp-block-group" style="margin-top:10px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
+			<!-- wp:paragraph {"textColor":"luminous-vivid-amber"} -->
+			<p class="has-luminous-vivid-amber-color has-text-color">★★★★</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph {"style":{"color":{"text":"#ffe8a4"},"spacing":{"margin":{"right":"5px"}}}} -->
+			<p class="has-text-color" style="color:#ffe8a4;margin-right:5px">★</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="font-size:0.7em">  <strong>4.2</strong>(1,079 reviews)</p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"8px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"2px","bottom":"0px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group" style="margin-top:2px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.2em"}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="font-size:1.2em"><strong><sup><sub>$</sub></sup>158.99</strong></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="font-size:0.7em"><s>was $173.99</s></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"}},"textColor":"vivid-red"} -->
+			<p class="has-vivid-red-color has-text-color" style="font-size:0.7em"><strong>9% off</strong></p>
+			<!-- /wp:paragraph --></div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0px","margin":{"top":"5px"}}},"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group" style="margin-top:5px">
+			<!-- wp:paragraph {"style":{"color":{"text":"#00a510"},"typography":{"fontSize":"0.7em"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+			<p class="has-text-color" style="color:#00a510;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:0.7em"><strong>Free 2-Day Shipping</strong></p>
+			<!-- /wp:paragraph --></div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="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>
+			<!-- /wp:paragraph --></div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group"><!-- wp:buttons -->
+			<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground","textColor":"background"} -->
+			<div class="wp-block-button">
+				<a class="wp-block-button__link has-background-color has-foreground-background-color has-text-color has-background wp-element-button">Add to cart</a>
+			</div>
+			<!-- /wp:button --></div>
+			<!-- /wp:buttons --></div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="font-size:0.8em"><strong>Features</strong></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:list {"style":{"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}},"textColor":"foreground"} -->
+			<ul class="has-foreground-color has-text-color" style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0">
+				<!-- wp:list-item {"style":{"typography":{"fontSize":"0.8em"}}} -->
+				<li style="font-size:0.8em">Top shelf weight capacity of 100 lbs</li>
+				<!-- /wp:list-item -->
+
+				<!-- wp:list-item {"style":{"typography":{"fontSize":"0.8em"}}} -->
+				<li style="font-size:0.8em">Drawer weight capacity of 50 lbs</li>
+			<!-- /wp:list-item --></ul>
+			<!-- /wp:list --></div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
+			<p class="has-foreground-color has-text-color" style="font-size:0.8em"><strong>Weight and Dimensions</strong></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:table {"style":{"typography":{"fontSize":"0.7em"}},"backgroundColor":"background","textColor":"foreground","className":"is-style-stripes"} -->
+			<figure class="wp-block-table is-style-stripes" style="font-size:0.7em">
+				<table class="has-foreground-color has-background-background-color has-text-color has-background">
+					<tbody>
+						<tr><td>Overall</td><td>36.5'' H X 40'' W X 20'' D</td></tr>
+						<tr><td>Drawer Interior</td><td>2'' H X 29.25'' W X 12.5'' D</td></tr>
+						<tr><td>Countertop</td><td>40'' W X 20'' D</td></tr>
+						<tr><td>Countertop Thickness</td><td>0.7'' H</td></tr>
+						<tr><td>Overall Product Weight</td><td>39.6 lb.</td></tr>
+					</tbody>
+				</table>
+			</figure>
+			<!-- /wp:table --></div>
+		<!-- /wp:group --></div>
+	<!-- /wp:column --></div>
+<!-- /wp:columns -->