From 9dddae93d9368121ba7f180b8140ccbe69bec547 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:59:57 +0100
Subject: [PATCH] [Store Customization] Update the Centered Header Menu with
 Search Pattern (#11304)

* Fix hidden elements on mobile and margins

* Increase navigation items spacing

* Add site logo width

* Improve search bar and title font weight

* Remove width from site logo

* Unify search bar

* Remove search, improve margins

* Use columns to improve the mobile view
---
 patterns/header-centered-search-pattern.php | 42 ++++++++++++---------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php
index 654a1998576..eaebf5fbee9 100644
--- a/patterns/header-centered-search-pattern.php
+++ b/patterns/header-centered-search-pattern.php
@@ -9,31 +9,39 @@
 
 <!-- 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 {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
-		<div class="wp-block-group">
-			<!-- wp:site-logo {"shouldSyncIcon":false} /-->
-			<!-- wp:site-title /-->
+	<!-- 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":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
-		<div class="wp-block-group">
-			<!-- wp:search {"style":{"border":{"radius":"0px"}},"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/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","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"}} -->
 	<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 -->