Merge pull request #4185 from Codeinwp/feat/mobile_footer_hfg

feat: add mobile support for the footer in HFG

e2e-tests/fixtures/customizer/hfg/footer-mobile-setup.json

@@ -0,0 +1,4 @@
+{
+	"hfg_footer_layout_v2": "{\"desktop\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[{\"id\":\"footer_copyright\"}],\"c-right\":[],\"right\":[]}}, \"mobile\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[{\"id\":\"footer-menu\"}],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[{\"id\":\"footer_copyright\"}],\"c-right\":[],\"right\":[]}}}",
+	"nav_menu_locations[footer]": 177
+}

e2e-tests/specs/customizer/hfg/hfg-copyright-component.spec.ts

@@ -2,7 +2,12 @@ import { test, expect } from '@playwright/test';
 
 test('Checks the copyright in front-end', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.locator('.hfg_footer')).toHaveText(
-		'Neve | Powered by WordPress'
-	);
+	// Check that the text is present for the Desktop footer
+	await expect(
+		page.locator('.hfg_footer .footer--row[data-show-on="desktop"]')
+	).toHaveText('Neve | Powered by WordPress');
+	// Check that the text is also present for the Mobile footer
+	await expect(
+		page.locator('.hfg_footer .footer--row[data-show-on="mobile"]')
+	).toHaveText('Neve | Powered by WordPress');
 });

e2e-tests/specs/customizer/hfg/hfg-footer-menu-component.spec.ts

@@ -22,10 +22,10 @@ test.describe('Footer Menu component', function () {
 	test('Check Footer Menu Style and Hover', async () => {
 		await page.goto('/?test_name=hfgFooterMenu');
 
-		await expect(page.locator('.nav-menu-footer')).toHaveClass(/style\-border\-bottom/);
+		await expect(page.locator('.footer--row[data-show-on="desktop"] .nav-menu-footer')).toHaveClass(/style\-border\-bottom/);
 
 		const footerMenuItems = await page
-			.locator('.footer-menu.nav-ul li .wrap a')
+			.locator('.footer--row[data-show-on="desktop"] .footer-menu.nav-ul li .wrap a')
 			.all();
 
 		for (const item of footerMenuItems) {

e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect, Page } from '@playwright/test';
+import { setCustomizeSettings } from '../../../utils';
+import data from '../../../fixtures/customizer/hfg/footer-mobile-setup.json';
+
+test.describe('Different Footer for Mobile vs Desktop', function () {
+	test.beforeAll(async ({ browser, request, baseURL }) => {
+		await browser.newPage();
+		await setCustomizeSettings('hfgFooterMobile', data, {
+			request,
+			baseURL,
+		});
+	});
+
+	test('Check Desktop Footer', async ({ page }) => {
+		await page.goto('/?test_name=hfgFooterMobile');
+
+		await expect(
+			page.locator('.hfg_footer .footer--row[data-show-on="desktop"]')
+		).toHaveText('Neve | Powered by WordPress');
+
+		await expect(
+			page.locator(
+				'.hfg_footer .footer--row[data-show-on="desktop"] .nav-menu-footer'
+			)
+		).toHaveCount(0);
+
+		await expect(page.locator('.hfg_footer .nav-menu-footer')).toBeHidden();
+	});
+
+	test('Check Mobile Footer', async ({ page, browser }) => {
+		const context = await browser.newContext({
+			viewport: { width: 600, height: 900 },
+		});
+		page = await context.newPage();
+		await page.goto('/?test_name=hfgFooterMobile');
+
+		await expect(
+			page.locator(
+				'.hfg_footer .footer--row[data-show-on="mobile"] .nav-menu-footer'
+			)
+		).toHaveCount(1);
+
+		await expect(
+			page.locator('.hfg_footer .nav-menu-footer')
+		).toBeVisible();
+	});
+});

header-footer-grid/Core/Builder/Footer.php

@@ -77,7 +77,8 @@ public function init() {
 			)
 		);
 		$this->devices = [
-			'desktop' => __( 'Footer', 'neve' ),
+			'desktop' => __( 'Desktop', 'neve' ),
+			'mobile'  => __( 'Mobile', 'neve' ),
 		];
 
 		/**
@@ -101,6 +102,27 @@ function ( $params ) {
 			}
 		);
 
+		/**
+		 * Add mobile footer layout if not present using the same layout from desktop if mobile is empty.
+		 * This will apply from Neve 3.5.8 and offer backward compatibility for users that have not set a mobile footer layout.
+		 *
+		 * @since 3.5.8
+		 */
+		add_filter(
+			'theme_mod_hfg_footer_layout_v2',
+			function ( $value ) {
+				if ( is_string( $value ) ) {
+					$maybe_parse_json = json_decode( $value, true );
+					if ( ! empty( $maybe_parse_json['mobile'] ) ) {
+						return $value;
+					}
+					$maybe_parse_json['mobile'] = $maybe_parse_json['desktop'];
+					return wp_json_encode( $maybe_parse_json );
+				}
+				return $value;
+			}
+		);
+
 		add_action( 'neve_after_slot_component', [ $this, 'add_footer_component' ], 10, 3 );
 	}
 

header-footer-grid/functions-migration.php

@@ -127,6 +127,11 @@ function neve_hfg_footer_settings() {
 			'main'   => $empty_row,
 			'bottom' => $empty_row,
 		],
+		'mobile'  => [
+			'top'    => $empty_row,
+			'main'   => $empty_row,
+			'bottom' => $empty_row,
+		],
 	];
 
 	return [

header-footer-grid/templates/footer-row-wrapper.php

@@ -16,9 +16,15 @@
 $device     = current_device();
 $section_id = get_builder()->get_property( 'control_id' ) . '_' . $row_index;
 
+$row_visibility = 'hide-on-desktop';
+if ( $device === 'desktop' ) {
+	$row_visibility = 'hide-on-mobile hide-on-tablet';
+}
+
 $row_classes = [
 	'footer--row',
 	'footer-' . $row_index,
+	$row_visibility,
 ];
 
 $row_classes[] = row_setting( Abstract_Builder::LAYOUT_SETTING );

inc/compatibility/starter-content/theme-mods.php

@@ -627,7 +627,7 @@
 		'tablet'  => 'center',
 		'mobile'  => 'center',
 	),
-	'hfg_footer_layout_v2'                         => '{"desktop":{"top":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"main":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"bottom":{"left":[],"c-left":[{"id":"footer_copyright"}],"center":[],"c-right":[],"right":[]}}}',
+	'hfg_footer_layout_v2'                         => '{"desktop":{"top":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"main":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"bottom":{"left":[],"c-left":[{"id":"footer_copyright"}],"center":[],"c-right":[],"right":[]}},"mobile":{"top":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"main":{"left":[],"c-left":[],"center":[],"c-right":[],"right":[]},"bottom":{"left":[],"c-left":[{"id":"footer_copyright"}],"center":[],"c-right":[],"right":[]}}}',
 	'neve_form_fields_spacing'                     => 4,
 	'neve_form_fields_background_color'            => 'var(--nv-site-bg)',
 	'footer_copyright_component_typeface'          => array(