Update/patterns featured category product collection (#9765)

* Update image for featured category focus pattern

* Update image for featured category cover image pattern

* Update images for featured category triple pattern

* Change to wide width

* Update links to buttons

* Fix typo in hex color value.

There was an extra `f` in the hex color value, causing the text to
unexpectedly render black.

---------

Co-authored-by: Daniel W. Robert <danielwrobert@gmail.com>

patterns/featured-category-cover-image.php

@@ -5,10 +5,10 @@
  * Categories: WooCommerce
  */
 ?>
-<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0,"y":0},"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:2em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-	<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
+	<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
 
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"1.5","fontSize":"2.2em","textColor":"background"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"0px","top":"0px"}}}} -->
@@ -22,7 +22,7 @@
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} -->
 		<div class="wp-block-buttons" style="margin-top:30px">
 			<!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"color":{"text":"#000000","background":"#ffffff"}},"className":"is-style-fill"} -->
-			<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
+			<div class="wp-block-button is-style-fill"><a href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
 			<!-- /wp:button --></div>
 		<!-- /wp:buttons --></div>
 </div>

patterns/featured-category-focus.php

@@ -8,7 +8,7 @@
 <!-- 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"} -->
-	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-10.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="502" height="335"/></figure>
+	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="502" height="335"/></figure>
 	<!-- /wp:image -->
 
 	<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->
@@ -19,7 +19,7 @@
 	<div class="wp-block-buttons">
 		<!-- wp:button {"style":{"color":{"text":"#ffffff","background":"#000000"},"border":{"width":"0px","style":"none"}}} -->
 		<div class="wp-block-button">
-			<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">Shop now</a>
+			<a href="<?php echo esc_url( wc_get_page_permalink( '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">Shop now</a>
 		</div>
 		<!-- /wp:button --></div>
 	<!-- /wp:buttons --></div>

patterns/featured-category-triple.php

@@ -6,73 +6,51 @@
  */
 ?>
 <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}}}} -->
-<div class="wp-block-columns alignwide">
-	<!-- wp:column {"style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"base"} -->
-	<div class="wp-block-column has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
-		<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"blockGap":"0","padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"}}}} -->
-		<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-			<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
-			<div class="wp-block-cover__inner-container">
-				<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
-				<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-					<strong>Aztec clay masks</strong>
+<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"base"} -->
+<div class="wp-block-column has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"blockGap":"0","padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"}}},"className":"has-base-color has-text-color"} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+					<strong>Cupcakes</strong>
 				</p>
-				<!-- /wp:paragraph -->
+<!-- /wp:paragraph -->
 
-				<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"small"} -->
-				<p class="has-text-align-center has-text-color has-small-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
-					<strong><span style="text-decoration: underline;">Shop Now</span></strong>
-				</p>
-				<!-- /wp:paragraph -->
-			</div>
-		</div>
-		<!-- /wp:cover --></div>
-	<!-- /wp:column -->
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"left":"0px","right":"0px","top":"0px","bottom":"0px"}},"color":{"text":"#ffffff"}},"className":"is-style-outline","fontSize":"small"} -->
+<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-text-color wp-element-button" href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" style="border-style:none;border-width:0px;color:#ffffff;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><strong><span style="text-decoration: underline;">Shop Now</span></strong></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column -->
 
-	<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
-	<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
-		<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0.5,"y":0.5},"contentPosition":"bottom center","isDark":false,"className":"has-contrast-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
-		<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-			<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/>
-			<div class="wp-block-cover__inner-container">
-				<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#000000"}},"fontSize":"large"} -->
-				<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-					<strong>Moisturizing toners</strong>
+<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
+<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0.5,"y":0.5},"contentPosition":"bottom center","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}},"className":"has-contrast-color has-text-color"} -->
+<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+					<strong>Sweet Danish</strong>
 				</p>
-				<!-- /wp:paragraph -->
+<!-- /wp:paragraph -->
 
-				<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#000000"}},"fontSize":"small"} -->
-				<p class="has-text-align-center has-text-color has-small-font-size" style="color:#000000;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
-					<strong><span style="text-decoration: underline;">Shop Now</span></strong>
-				</p>
-				<!-- /wp:paragraph -->
-			</div>
-		</div>
-		<!-- /wp:cover --></div>
-	<!-- /wp:column -->
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"left":"0px","right":"0px","top":"0px","bottom":"0px"}},"color":{"text":"#ffffff"}},"className":"is-style-outline","fontSize":"small"} -->
+<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-text-color wp-element-button" href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" style="border-style:none;border-width:0px;color:#ffffff;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><strong><span style="text-decoration: underline;">Shop Now</span></strong></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column -->
 
-	<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
-	<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
-		<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
-		<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-			<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
-			<div class="wp-block-cover__inner-container">
-				<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
-				<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-					<strong>Natural body lotions</strong>
+<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
+<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}},"className":"has-base-color has-text-color"} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+					<strong>Warm Bread</strong>
 				</p>
-				<!-- /wp:paragraph -->
+<!-- /wp:paragraph -->
 
-				<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"small"} -->
-				<p class="has-text-align-center has-text-color has-small-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
-					<strong><span style="text-decoration: underline;">Shop Now</span></strong>
-				</p>
-				<!-- /wp:paragraph -->
-			</div>
-		</div>
-		<!-- /wp:cover --></div>
-	<!-- /wp:column --></div>
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"left":"0px","right":"0px","top":"0px","bottom":"0px"}},"color":{"text":"#ffffff"}},"className":"is-style-outline","fontSize":"small"} -->
+<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-text-color wp-element-button" href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" style="border-style:none;border-width:0px;color:#ffffff;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><strong><span style="text-decoration: underline;">Shop Now</span></strong></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
 <!-- /wp:columns -->