Update Hero Product – Split Pattern Color Settings (#9433)

* Update color settings to abide by designs.

* Update pattern heading to use inline style.

This ensures the heading color will be white by default and not take on
the heading color from the active theme.

* Translate and escape rendered text in pattern.

patterns/hero-product-split.php

@@ -6,23 +6,26 @@
  */
 ?>
 
-<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image","mediaSizeSlug":"full","imageFill":false,"backgroundColor":"contrast","textColor":"base"} -->
-<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile has-base-color has-contrast-background-color has-text-color has-background">
-	<div class="wp-block-media-text__content"><!-- wp:heading -->
-		<h2 class="wp-block-heading">Get cozy this fall with flannel shirts</h2>
+<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image","mediaSizeSlug":"full","imageFill":false,"style":{"color":{"background":"#000000","text":"#ffffff"}}} -->
+<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile has-text-color has-background" style="color:#ffffff;background-color:#000000">
+	<div class="wp-block-media-text__content">
+		<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
+		<h2 class="wp-block-heading has-text-color" style="color:#ffffff;"><?php esc_html_e( 'Get cozy this fall with flannel shirts', 'woo-gutenberg-products-block' ); ?></h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
 		<div class="wp-block-buttons" style="margin-bottom:var(--wp--preset--spacing--40)">
-			<!-- wp:button -->
-			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Shop now</a></div>
-			<!-- /wp:button -->
+		<!-- wp:button {"style":{"color":{"text":"#000000","background":"#ffffff"}}} -->
+		<div class="wp-block-button">
+			<a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#000000;background-color:#ffffff;"><?php esc_html_e( 'Shop now', 'woo-gutenberg-products-block' ); ?></a>
+		</div>
+		<!-- /wp:button -->
 		</div>
 		<!-- /wp:buttons -->
 	</div>
 
 	<figure class="wp-block-media-text__media">
-		<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hero-product-split.webp', dirname( __FILE__ ) ) ); ?>" alt="Woman in red, black, and white plaid hoodie." />
+		<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hero-product-split.webp', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Woman in red, black, and white plaid hoodie.', 'woo-gutenberg-products-block' ); ?>" />
 	</figure>
 </div>
 <!-- /wp:media-text -->