From 1c68e2dd9f67aabc181859df137faa7857eb74c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Tue, 5 Mar 2024 18:21:44 +0100
Subject: [PATCH] [CYS] Fix the selected pattern in footer, header and homepage
 (#45240)

* Check also the number of inner blocks before checking the attributes

* Add classes to assembler footer patterns

* Add classes to assembler header patterns

* Add changefile(s) from automation for the following project(s): woocommerce

* Mark the current homepage template as selected

* Remove unused import

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../sidebar-navigation-screen-homepage.tsx      | 17 ++++++++++++++++-
 .../assembler-hub/sidebar/utils.ts              | 10 +++++++---
 .../changelog/45240-45215-fix-selected-footer   |  4 ++++
 plugins/woocommerce/patterns/footer-large.php   |  2 +-
 .../woocommerce/patterns/footer-simple-menu.php |  2 +-
 .../patterns/footer-with-3-menus.php            |  2 +-
 .../patterns/header-centered-pattern.php        |  2 +-
 .../woocommerce/patterns/header-essential.php   |  2 +-
 plugins/woocommerce/patterns/header-large.php   |  2 +-
 plugins/woocommerce/patterns/header-minimal.php |  2 +-
 10 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/45240-45215-fix-selected-footer

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx
index 38826cbbb880..744b07968f25 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx
@@ -92,8 +92,23 @@ export const SidebarNavigationScreenHomepage = () => {
 			return;
 		}
 
-		setSelectedPattern( selectedPattern );
+		const currentSelectedPattern = homePatterns.find( ( patterns ) => {
+			//'blocks' contains all blocks in the template, including the
+			// header and footer blocks, while the 'patterns.blocks' does
+			// not. For that reason we are removing the first and last
+			// blocks from the 'blocks' to be able to compare then
+			const homeBlocks = blocks.slice( 1, blocks.length - 1 );
 
+			if ( patterns.blocks.length !== homeBlocks.length ) {
+				return false;
+			}
+
+			return homeBlocks.every(
+				( block, i ) => block.name === patterns.blocks[ i ].name
+			);
+		} );
+
+		setSelectedPattern( currentSelectedPattern );
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes
 	}, [ blocks, homePatterns ] );
 
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/utils.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/utils.ts
index 535c84d9c60e..25096c886a38 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/utils.ts
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/utils.ts
@@ -24,8 +24,12 @@ export const findPatternByBlock = (
 			''
 		);
 	}
+	return patterns.find( ( pattern ) => {
+		const patternBlocks = pattern.blocks[ 0 ];
+		if ( patternBlocks.innerBlocks.length !== block.innerBlocks.length ) {
+			return false;
+		}
 
-	return patterns.find( ( pattern ) =>
-		isEqual( pattern.blocks[ 0 ].attributes, blockAttributes )
-	);
+		return isEqual( patternBlocks.attributes, blockAttributes );
+	} );
 };
diff --git a/plugins/woocommerce/changelog/45240-45215-fix-selected-footer b/plugins/woocommerce/changelog/45240-45215-fix-selected-footer
new file mode 100644
index 000000000000..0ae0fbecfb3f
--- /dev/null
+++ b/plugins/woocommerce/changelog/45240-45215-fix-selected-footer
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS - Fix the selected pattern in footer in the assembler.
\ No newline at end of file
diff --git a/plugins/woocommerce/patterns/footer-large.php b/plugins/woocommerce/patterns/footer-large.php
index 10a495f976ab..a82fd7d62349 100644
--- a/plugins/woocommerce/patterns/footer-large.php
+++ b/plugins/woocommerce/patterns/footer-large.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"className":"wc-blocks-footer-pattern","align":"full","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"},"blockGap":"40px"}}} -->
-<div class="wc-blocks-footer-pattern wp-block-group alignfull" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
+<div class="wc-blocks-pattern-footer-large wc-blocks-footer-pattern wp-block-group alignfull" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
 	<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"32px","padding":{"right":"0px","left":"0px"}}}} -->
 	<div class="wp-block-columns alignwide" style="padding-right:0px;padding-left:0px">
 		<!-- wp:column {"width":"60%","style":{"spacing":{"padding":{"right":"50px"}}}} -->
diff --git a/plugins/woocommerce/patterns/footer-simple-menu.php b/plugins/woocommerce/patterns/footer-simple-menu.php
index 8f59f7ae7a0c..49b4eedd32b2 100644
--- a/plugins/woocommerce/patterns/footer-simple-menu.php
+++ b/plugins/woocommerce/patterns/footer-simple-menu.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"40px","bottom":"40px","left":"40px","right":"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">
+<div class="wc-blocks-pattern-footer-simple-menu wp-block-group alignfull wc-blocks-footer-pattern" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
 	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
 	<div class="wp-block-group alignfull" style="padding-right:0;padding-left:0">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"24px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
diff --git a/plugins/woocommerce/patterns/footer-with-3-menus.php b/plugins/woocommerce/patterns/footer-with-3-menus.php
index 6172e15a2040..8c388b723c2e 100644
--- a/plugins/woocommerce/patterns/footer-with-3-menus.php
+++ b/plugins/woocommerce/patterns/footer-with-3-menus.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- 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">
+<div class="wc-blocks-pattern-footer-with-3-menus 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%"} -->
diff --git a/plugins/woocommerce/patterns/header-centered-pattern.php b/plugins/woocommerce/patterns/header-centered-pattern.php
index 517bc1672d4c..2b7879d30b31 100644
--- a/plugins/woocommerce/patterns/header-centered-pattern.php
+++ b/plugins/woocommerce/patterns/header-centered-pattern.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"className":"wc-blocks-header-pattern","align":"full","layout":{"type":"constrained"}} -->
-<div class="wc-blocks-header-pattern wp-block-group alignfull">
+<div class="wc-blocks-pattern-header-centered-menu wc-blocks-header-pattern wp-block-group alignfull">
 	<!-- 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"}} -->
diff --git a/plugins/woocommerce/patterns/header-essential.php b/plugins/woocommerce/patterns/header-essential.php
index 3feec5907f8f..c38a0c2afa8e 100644
--- a/plugins/woocommerce/patterns/header-essential.php
+++ b/plugins/woocommerce/patterns/header-essential.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"40px","bottom":"40px","left":"40px","right":"40px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
+<div class="wc-blocks-pattern-header-essential wp-block-group alignfull" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
 	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 	<div class="wp-block-group">
 		<!-- wp:site-logo /-->
diff --git a/plugins/woocommerce/patterns/header-large.php b/plugins/woocommerce/patterns/header-large.php
index f3f98a89b5df..9cdd4a4ca2ca 100644
--- a/plugins/woocommerce/patterns/header-large.php
+++ b/plugins/woocommerce/patterns/header-large.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"40px","left":"40px","top":"24px","bottom":"24px"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignfull" style="padding-right: 40px; padding-left: 40px; padding-top: 24px; padding-bottom: 24px">
+<div class="wc-blocks-pattern-header-large wp-block-group alignfull" style="padding-right: 40px; padding-left: 40px; padding-top: 24px; padding-bottom: 24px">
 	<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
 	<div class="wp-block-group alignfull">
 		<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false,"align":"full"} -->
diff --git a/plugins/woocommerce/patterns/header-minimal.php b/plugins/woocommerce/patterns/header-minimal.php
index 7d1e33c764ec..8d42656b8150 100644
--- a/plugins/woocommerce/patterns/header-minimal.php
+++ b/plugins/woocommerce/patterns/header-minimal.php
@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:group {"className":"wc-blocks-header-pattern","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":"nowrap","justifyContent":"space-between"}} -->
-<div class="wc-blocks-header-pattern 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">
+<div class="wc-blocks-pattern-header-minimal wc-blocks-header-pattern 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":"nowrap"}} -->
 	<div class="wp-block-group">
 		<!-- wp:site-logo {"shouldSyncIcon":false,"className":"is-style-default"} /-->