diff --git a/patterns/featured-category-triple.php b/patterns/featured-category-triple.php
index 6b33bb46a27..b4dc9ca3cb8 100644
--- a/patterns/featured-category-triple.php
+++ b/patterns/featured-category-triple.php
@@ -22,9 +22,9 @@
 <div class="wp-block-columns alignwide" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:column -->
 	<div class="wp-block-column">
-		<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
+		<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","id":1,"dimRatio":30,"overlayColor":"contrast","isUserOverlayColor":true,"contentPosition":"bottom center","style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
 		<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-white-color" style="padding-bottom:56px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
+			<span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-30 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 1 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
 				<!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"margin":{"bottom":"24px"}}}} -->
@@ -43,9 +43,9 @@
 
 	<!-- wp:column -->
 	<div class="wp-block-column">
-		<!-- wp:cover {"url":"<?php echo esc_url( $image2 ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
+		<!-- wp:cover {"url":"<?php echo esc_url( $image2 ); ?>","id":1,"dimRatio":30,"overlayColor":"contrast","isUserOverlayColor":true,"contentPosition":"bottom center","style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
 		<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-white-color" style="padding-bottom:56px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
+			<span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-30 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 2 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image2 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
 				<!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"margin":{"bottom":"24px"}}}} -->
@@ -64,9 +64,9 @@
 
 	<!-- wp:column -->
 	<div class="wp-block-column">
-		<!-- wp:cover {"url":"<?php echo esc_url( $image3 ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
+		<!-- wp:cover {"url":"<?php echo esc_url( $image3 ); ?>","id":1,"dimRatio":30,"overlayColor":"contrast","isUserOverlayColor":true,"contentPosition":"bottom center","style":{"spacing":{"padding":{"bottom":"56px"}}},"className":"has-white-color"} -->
 		<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-white-color" style="padding-bottom:56px">
-			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
+			<span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-30 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 3 out of 3', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image3 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
 				<!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"margin":{"bottom":"24px"}}}} -->