From e59ee0eca571f494503d000e3ac4b48a66471257 Mon Sep 17 00:00:00 2001
From: Bogdan Preda <bogdan.preda@themeisle.com>
Date: Thu, 14 Mar 2024 14:20:41 +0200
Subject: [PATCH] fix: footer id unique

Solve issue with footer not having an unique ID since mobile was introduced.

Closes: #4212
---
 .../specs/customizer/hfg/hfg-footer-mobile.spec.ts   | 12 ++++++++++++
 header-footer-grid/templates/footer-row-wrapper.php  |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
index bc4945e4c7..4dce308819 100644
--- a/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
+++ b/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
@@ -44,4 +44,16 @@ test.describe('Different Footer for Mobile vs Desktop', function () {
 			page.locator('.hfg_footer .nav-menu-footer')
 		).toBeVisible();
 	});
+
+	test('Check IDs are unique', async ({ page }) => {
+		await page.goto('/?test_name=hfgFooterMobile');
+
+		await expect(page.locator('#cb-row--footer-bottom')).toHaveCount(0);
+		await expect(
+			page.locator('#cb-row--footer-desktop-bottom')
+		).toHaveCount(1);
+		await expect(page.locator('#cb-row--footer-mobile-bottom')).toHaveCount(
+			1
+		);
+	});
 });
diff --git a/header-footer-grid/templates/footer-row-wrapper.php b/header-footer-grid/templates/footer-row-wrapper.php
index b07cd019ba..44bc08d678 100644
--- a/header-footer-grid/templates/footer-row-wrapper.php
+++ b/header-footer-grid/templates/footer-row-wrapper.php
@@ -43,7 +43,7 @@
 $row_wrapper_classes = join( ' ', $row_wrapper_classes );
 ?>
 <div class="<?php echo esc_attr( join( ' ', $row_classes ) ); ?>"
-	id="cb-row--footer-<?php echo esc_attr( $row_index ); ?>"
+	id="cb-row--footer-<?php echo esc_attr( $device ); ?>-<?php echo esc_attr( $row_index ); ?>"
 	data-row-id="<?php echo esc_attr( $row_index ); ?>" data-show-on="<?php echo esc_attr( $device ); ?>">
 	<div
 		class="footer--row-inner footer-<?php echo esc_attr( $row_index ); ?>-inner footer-content-wrap">