From 8328b19100bfaa46e02458ce375e558c3a34af6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 18 Oct 2023 11:32:37 +0200
Subject: [PATCH 1/8] Fix hidden elements on mobile and margins

---
 patterns/header-centered-search-pattern.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index 459edfda5f2..70bd4cf051e 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -9,19 +9,19 @@
 
 <!-- wp:group {"className":"wc-blocks-header-pattern","align":"full","layout":{"type":"constrained"}} -->
 <div class="wc-blocks-header-pattern wp-block-group alignfull">
-	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"2%","bottom":"16px","left":"2%","top":"16px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"sticky-header","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:16px;padding-right:2%;padding-bottom:16px;padding-left:2%">
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"20px","bottom":"20px","left":"20px","top":"20px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"sticky-header","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 		<div class="wp-block-group">
 			<!-- wp:site-logo {"shouldSyncIcon":false} /-->
 			<!-- wp:site-title /-->
 		</div>
 		<!-- /wp:group -->
-		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
 		<div class="wp-block-group">
 			<!-- wp:group {"style":{"border":{"top":{"width":"1px","style":"solid"},"right":{"width":"1px","style":"solid"},"bottom":{"width":"1px","style":"solid"},"left":{"width":"1px","style":"solid"}},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
 			<div class="wp-block-group" style="border-top-style:solid;border-top-width:1px;border-right-style:solid;border-right-width:1px;border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-				<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search our store","width":350,"widthUnit":"px","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"},"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"width":"0px","style":"none"},"left":{"width":"0px","style":"none"}}}} /-->
+				<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search our store","width":100,"widthUnit":"%","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"},"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"width":"0px","style":"none"},"left":{"width":"0px","style":"none"}}}} /-->
 			</div>
 			<!-- /wp:group -->
 
@@ -33,8 +33,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:separator {"align":"full","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide" />
+	<!-- wp:separator {"align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"className":"is-style-wide"} -->
+	<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide" style="margin-top:0px;margin-bottom:0px"/>
 	<!-- /wp:separator -->
 
 	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->

From a017bd755753a879f5ff4857e81ce54e303ebee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 18 Oct 2023 11:42:53 +0200
Subject: [PATCH 2/8] Increase navigation items spacing

---
 patterns/header-centered-search-pattern.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index 70bd4cf051e..c29029970d7 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -39,7 +39,7 @@
 
 	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
 	<div class="wp-block-group">
-		<!-- wp:navigation {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} /-->
+		<!-- wp:navigation {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"30px"}}} /-->
 	</div>
 	<!-- /wp:group -->
 

From 88a371697a0c77457d37dc5d70e320f9f75f6bd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 19 Oct 2023 16:44:50 +0200
Subject: [PATCH 3/8] Add site logo width

---
 patterns/header-centered-search-pattern.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index c29029970d7..a30bd12a15a 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -13,7 +13,7 @@
 	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:site-logo {"shouldSyncIcon":false} /-->
+			<!-- wp:site-logo {"width":60,"shouldSyncIcon":false} /-->
 			<!-- wp:site-title /-->
 		</div>
 		<!-- /wp:group -->

From 410a2a9e14a450b84733950e15d81f3f357894a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 23 Oct 2023 14:06:25 +0200
Subject: [PATCH 4/8] Improve search bar and title font weight

---
 patterns/header-centered-search-pattern.php | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index a30bd12a15a..a36e644acc9 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -9,21 +9,17 @@
 
 <!-- wp:group {"className":"wc-blocks-header-pattern","align":"full","layout":{"type":"constrained"}} -->
 <div class="wc-blocks-header-pattern wp-block-group alignfull">
-	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"20px","bottom":"20px","left":"20px","top":"20px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"sticky-header","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"40px","bottom":"24px","left":"40px","top":"24px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"sticky-header","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:24px;padding-right:40px;padding-bottom:24px;padding-left:40px">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 		<div class="wp-block-group">
 			<!-- wp:site-logo {"width":60,"shouldSyncIcon":false} /-->
-			<!-- wp:site-title /-->
+			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
 		</div>
 		<!-- /wp:group -->
 		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
 		<div class="wp-block-group">
-			<!-- wp:group {"style":{"border":{"top":{"width":"1px","style":"solid"},"right":{"width":"1px","style":"solid"},"bottom":{"width":"1px","style":"solid"},"left":{"width":"1px","style":"solid"}},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-			<div class="wp-block-group" style="border-top-style:solid;border-top-width:1px;border-right-style:solid;border-right-width:1px;border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-				<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search our store","width":100,"widthUnit":"%","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"},"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"width":"0px","style":"none"},"left":{"width":"0px","style":"none"}}}} /-->
-			</div>
-			<!-- /wp:group -->
+			<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search our store","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"}} /-->
 
 			<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon","style":{"spacing":{"margin":{"left":"10px"}}}} /-->
 

From 8690dce19f5cfe9149864ad5d13d04a9511f4fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 24 Oct 2023 09:18:50 +0200
Subject: [PATCH 5/8] Remove width from site logo

---
 patterns/header-centered-search-pattern.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index a36e644acc9..2a979017f51 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -13,7 +13,7 @@
 	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:24px;padding-right:40px;padding-bottom:24px;padding-left:40px">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:site-logo {"width":60,"shouldSyncIcon":false} /-->
+			<!-- wp:site-logo /-->
 			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
 		</div>
 		<!-- /wp:group -->

From d72002f12c726accee55e7e431c546cf0a7680ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 25 Oct 2023 15:23:11 +0200
Subject: [PATCH 6/8] Unify search bar

---
 patterns/header-centered-search-pattern.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index 2a979017f51..a293f2a791d 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -19,7 +19,7 @@
 		<!-- /wp:group -->
 		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
 		<div class="wp-block-group">
-			<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search our store","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"}} /-->
+			<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"},"width":100,"widthUnit":"%"} /-->
 
 			<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon","style":{"spacing":{"margin":{"left":"10px"}}}} /-->
 

From a81d22b02ce46d194c45d2db18f1518d109f09fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 31 Oct 2023 10:44:34 +0100
Subject: [PATCH 7/8] Remove search, improve margins

---
 patterns/header-centered-search-pattern.php | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index a293f2a791d..57e64080d6b 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -17,12 +17,9 @@
 			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
 		</div>
 		<!-- /wp:group -->
-		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
 		<div class="wp-block-group">
-			<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"},"width":100,"widthUnit":"%"} /-->
-
-			<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon","style":{"spacing":{"margin":{"left":"10px"}}}} /-->
-
+			<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon"} /-->
 			<!-- wp:woocommerce/mini-cart /-->
 		</div>
 		<!-- /wp:group -->

From af947b140b787551bc0d911dbbc7cbec955aa907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 31 Oct 2023 12:16:21 +0100
Subject: [PATCH 8/8] Use columns to improve the mobile view

---
 patterns/header-centered-search-pattern.php | 37 +++++++++++++--------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index 57e64080d6b..eaebf5fbee9 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -9,25 +9,34 @@
 
 <!-- wp:group {"className":"wc-blocks-header-pattern","align":"full","layout":{"type":"constrained"}} -->
 <div class="wc-blocks-header-pattern wp-block-group alignfull">
-	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"40px","bottom":"24px","left":"40px","top":"24px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"sticky-header","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignfull sticky-header" style="margin-top:0px;margin-bottom:0px;padding-top:24px;padding-right:40px;padding-bottom:24px;padding-left:40px">
-		<!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
-		<div class="wp-block-group">
-			<!-- wp:site-logo /-->
-			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+	<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false,"align":"full","style":{"spacing":{"padding":{"top":"24px","bottom":"24px","left":"40px","right":"40px"}}}} -->
+	<div class="wp-block-columns alignfull are-vertically-aligned-center is-not-stacked-on-mobile" style="padding-top:24px;padding-right:40px;padding-bottom:24px;padding-left:40px">
+		<!-- wp:column {"verticalAlignment":"center","width":"70%","layout":{"type":"default"}} -->
+		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:70%">
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
+			<div class="wp-block-group"><!-- wp:site-logo {"shouldSyncIcon":false} /-->
+				<!-- wp:site-title {"style":{"layout":{"selfStretch":"fixed","flexSize":"200px"},"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+			</div>
+			<!-- /wp:group -->
 		</div>
-		<!-- /wp:group -->
-		<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->
-		<div class="wp-block-group">
-			<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon"} /-->
-			<!-- wp:woocommerce/mini-cart /-->
+		<!-- /wp:column -->
+
+		<!-- wp:column {"verticalAlignment":"center","width":""} -->
+		<div class="wp-block-column is-vertically-aligned-center">
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+			<div class="wp-block-group">
+				<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon"} /-->
+				<!-- wp:woocommerce/mini-cart {"hasHiddenPrice":true} /-->
+			</div>
+			<!-- /wp:group -->
 		</div>
-		<!-- /wp:group -->
+		<!-- /wp:column -->
 	</div>
-	<!-- /wp:group -->
+	<!-- /wp:columns -->
 
 	<!-- wp:separator {"align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide" style="margin-top:0px;margin-bottom:0px"/>
+	<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide"
+		style="margin-top:0px;margin-bottom:0px" />
 	<!-- /wp:separator -->
 
 	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->