Proposed changes

This change synchronizes the WordPress admin menu's active state with our React application's routes in the Bluehost plugin. Currently, when navigating through our React-based plugin pages, the WordPress admin menu doesn't properly highlight the active menu item, creating a disconnected user experience.

The solution implements a JavaScript-based sync mechanism that:

• Watches for route changes in our React app
• Maps these routes to corresponding WordPress admin menu items
• Applies WordPress's native menu highlighting classes
• Maintains proper parent-child menu relationships

This ensures users always have a clear visual indication of their current location within the plugin.

Type of Change

Production

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update
• Refactoring / housekeeping (changes to files not directly related to functionality)

To reproduce the original bug:

1. Navigate to Bluehost > Home in WordPress admin
2. Notice the menu item is not highlighted
3. Click through different sections (Settings, Help, etc.)
4. Observe inconsistent menu highlighting

Development

• Tests
• Dependency update
• Environment update / refactoring
• Documentation Update

Video

Checklist

• I have read the CONTRIBUTING doc
• I have viewed my change in a web-browser
• Linting and tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Pre-deployment Checklist

• Verify compatibility with WordPress 5.8+ admin menu structure
• Ensure no conflicts with other plugins modifying admin menu

Post-deployment Checklist

How can the change be verified?

• Navigate to Bluehost plugin in WordPress admin
• Click through all menu items and verify correct highlighting
• Check browser console for any JavaScript errors
• Verify submenu items highlight both child and parent menu items
• Test across different WordPress versions (5.8+)

Further comments

The implementation uses WordPress's native menu classes (current, wp-has-current-submenu, wp-menu-open) to maintain consistency with WordPress core behavior. We considered alternative approaches:

1. Using WordPress's built-in menu API - Not viable as it doesn't support hash-based routing
2. Custom CSS-based solution - Rejected to maintain compatibility with WordPress core updates
3. PHP-based solution - Would require additional server requests, impacting performance

Future improvements could include:

• Adding E2E tests for menu highlighting behavior
• Implementing route-based menu highlighting preloading
• Adding support for deep-linked submenu items