From 60972eea01aba297e1e7356179cd9758eac33496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Tue, 24 Oct 2023 13:49:49 +0200
Subject: [PATCH] [Store Customization] Update the "Footer with 3 Menus"
 (#11379)

* Fix search bar, spacing and show text in one line

* Set site log width

* Adjust margins and search bar

* Make the search bar fill space on mobile

* Update column sizes

* Remove width from site logo
---
 patterns/footer-with-3-menus.php | 64 ++++++++++++++++----------------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/patterns/footer-with-3-menus.php b/patterns/footer-with-3-menus.php
index 2488b71bad4..cd0d9ce6eb2 100644
--- a/patterns/footer-with-3-menus.php
+++ b/patterns/footer-with-3-menus.php
@@ -7,17 +7,17 @@
  */
 ?>
 
-<!-- wp:group {"className":"wc-blocks-footer-pattern","align":"full","style":{"spacing":{"blockGap":"40px","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
-<div class="wc-blocks-footer-pattern wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
-	<!-- wp:columns -->
-	<div class="wp-block-columns are-vertically-aligned-top">
-		<!-- wp:column {"verticalAlignment":"top","width":"70%"} -->
-		<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:70%">
+<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"40px","padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}},"className":"wc-blocks-footer-pattern"} -->
+<div class="wp-block-group alignfull wc-blocks-footer-pattern" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
+	<!-- wp:columns {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"className":"are-vertically-aligned-top"} -->
+	<div class="wp-block-columns are-vertically-aligned-top" style="padding-right:0;padding-left:0">
+		<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
+		<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%">
 			<!-- wp:group {"style":{"spacing":{"blockGap":"32px"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
 			<div class="wp-block-group">
-				<!-- wp:site-logo {"shouldSyncIcon":false} /-->
+				<!-- wp:site-logo /-->
 
-				<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|70","left":"var:preset|spacing|70"}}}} -->
+				<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|70","left":"var:preset|spacing|80"}}}} -->
 				<div class="wp-block-columns" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 					<!-- wp:column -->
 					<div class="wp-block-column">
@@ -43,33 +43,31 @@
 		</div>
 		<!-- /wp:column -->
 
-		<!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"60px"}},"layout":{"type":"default"}} -->
-		<div class="wp-block-column is-vertically-aligned-top">
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
-			<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-				<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"}} /-->
+		<!-- wp:column {"width":"10%"} -->
+		<div class="wp-block-column" style="flex-basis:10%"></div>
+		<!-- /wp:column -->
 
-				<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
-				<div class="wp-block-group">
-					<!-- wp:site-title /-->
+		<!-- wp:column {"verticalAlignment":"stretch","width":"30%","style":{"spacing":{"blockGap":"60px"}},"layout":{"type":"default"}} -->
+		<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:30%">
+			<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"}} /-->
 
-					<!-- wp:paragraph {"align":"right"} -->
-					<p class="has-text-align-right">
-						<?php
-						echo sprintf(
-							/* translators: Footer powered by text. %1$s being WordPress, %2$s being WooCommerce */
-							esc_html__(
-								'Powered by %1$s with %2$s',
-								'woo-gutenberg-products-block'
-							),
-							'<a href="https://wordpress.org" target="_blank" rel="noreferrer nofollow">WordPress</a>',
-							'<a href="https://woocommerce.com" target="_blank" rel="noreferrer nofollow">WooCommerce</a>'
-						);
-						?>
-					</p>
-					<!-- /wp:paragraph -->
-				</div>
-				<!-- /wp:group -->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"right":"0","left":"0"},"margin":{"top":"56px","bottom":"0"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
+			<div class="wp-block-group" style="margin-top:56px;margin-bottom:0;padding-right:0;padding-left:0">
+				<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+
+				<!-- wp:paragraph {"align":"right"} --><p class="has-text-align-right">
+					<?php
+					echo sprintf(
+					/* translators: Footer powered by text. %1$s being WordPress, %2$s being WooCommerce */
+						esc_html__(
+							'Powered by %1$s with %2$s',
+							'woo-gutenberg-products-block'
+						),
+						'<a href="https://wordpress.org" target="_blank" rel="noreferrer nofollow">WordPress</a>',
+						'<a href="https://woocommerce.com" target="_blank" rel="noreferrer nofollow">WooCommerce</a>'
+					);
+					?>
+				</p><!-- /wp:paragraph -->
 			</div>
 			<!-- /wp:group -->
 		</div>