Merge pull request #4200 from Codeinwp/fix/menu_item_description

fix: description visible in regular menu

e2e-tests/specs/customizer/hfg/hfg-menu-item-description.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+import { setCustomizeSettings } from '../../../utils';
+import data from '../../../fixtures/customizer/hfg/menu-item-alignment-setup.json';
+
+test.describe('Menu item description', function () {
+	test.beforeAll(async ({ browser, request, baseURL }) => {
+		await setCustomizeSettings('hfgMenuItemAlignment', data, {
+			request,
+			baseURL,
+		});
+
+		const context = await browser.newContext();
+		const page = await context.newPage();
+
+		await page.goto('/wp-admin/edit-tags.php?taxonomy=category');
+		await page.getByRole('textbox', { name: 'Name' }).click();
+		await page
+			.getByRole('textbox', { name: 'Name' })
+			.fill('ADescriptionCat');
+		await page.getByRole('textbox', { name: 'Slug' }).click();
+		await page
+			.getByRole('textbox', { name: 'Slug' })
+			.fill('adescriptioncat');
+		await page.getByRole('textbox', { name: 'Description' }).click();
+		await page
+			.getByRole('textbox', { name: 'Description' })
+			.fill('Some Description for the category');
+		await page.getByRole('button', { name: 'Add New Category' }).click();
+		await page.goto('wp-admin/nav-menus.php');
+
+		await page
+			.getByRole('heading', {
+				name: 'Categories Press return or enter to open this section ',
+			})
+			.click();
+		await page
+			.locator('#taxonomy-category-tabs')
+			.getByRole('link', { name: 'View All' })
+			.click();
+		await page.getByLabel('ADescriptionCat').check();
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes('wp-admin/admin-ajax.php') &&
+					res.status() === 200
+			),
+			page.getByRole('button', { name: 'Add to Menu' }).click(),
+		]);
+
+		await page.keyboard.press('End');
+		await page.waitForTimeout(500);
+
+		await expect(
+			page.locator('#menu-to-edit li.menu-item:last-child a.item-edit')
+		).toBeVisible();
+		await page
+			.locator('#menu-to-edit li.menu-item:last-child a.item-edit')
+			.click({ force: true });
+		await page.waitForTimeout(500);
+		await page
+			.locator(
+				'#menu-to-edit li.menu-item:last-child .menu-item-settings button.menus-move-right'
+			)
+			.click({ force: true });
+		await page.getByRole('button', { name: 'Save Menu' }).click();
+	});
+
+	test.afterAll(async ({ browser, request, baseURL }) => {
+		const context = await browser.newContext();
+		const page = await context.newPage();
+
+		await page.goto('/wp-admin/edit-tags.php?taxonomy=category');
+
+		await page.getByLabel('Select ADescriptionCat').check();
+		await page.locator('#bulk-action-selector-top').selectOption('delete');
+		await page.locator('#doaction').click();
+	});
+
+	test('Checks up item alignment', async ({ page }) => {
+		await page.goto('/?test_data=hfgMenuItemAlignment');
+
+		await page
+			.locator(
+				'.primary-menu-ul.nav-ul.menu-desktop li.menu-item.menu-item-has-children:last-child'
+			)
+			.hover();
+		await expect(page.locator('.neve-mm-description')).toHaveCount(0);
+	});
+});

inc/views/nav_walker.php

@@ -238,6 +238,17 @@ public function get_sidebar_and_accessibility_style() {
 		return Dynamic_Css::minify_css( $sidebar_animation_css . $accessibility_caret_css );
 	}
 
+	/**
+	 * Check if item uses the Mega Menu.
+	 *
+	 * @param \WP_Post $item Item.
+	 *
+	 * @return bool
+	 */
+	private function uses_mega_menu( $item ) {
+		return isset( $item->classes ) && in_array( 'neve-mega-menu', $item->classes );
+	}
+
 	/**
 	 * Start_el
 	 *
@@ -260,7 +271,7 @@ public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
 			$this->enqueue_accessibility_menu_js();
 		}
 
-		if ( ! self::$mega_menu_enqueued && isset( $item->classes ) && in_array( 'neve-mega-menu', $item->classes ) ) {
+		if ( ! self::$mega_menu_enqueued && $this->uses_mega_menu( $item ) ) {
 			$this->enqueue_mega_menu_style();
 		}
 
@@ -306,7 +317,9 @@ public function end_el( &$output, $item, $depth = 0, $args = null ) {
 				if ( ! self::$mega_menu_enqueued ) {
 					$this->enqueue_mega_menu_style();
 				}
-				$output .= '<div class="neve-mm-description">' . esc_html( $item->description ) . '</div>';
+				if ( strpos( $output, 'neve-mega-menu' ) !== false ) {
+					$output .= '<div class="neve-mm-description">' . esc_html( $item->description ) . '</div>';
+				}
 			}
 		}
 		$output .= "</li>{$n}";