Navigation Sub Menu: Bugs in color handling and block context

[yogeshbhutkar]

Description

Here are the issues identified while interacting with the Navigation Submenu component:

1. Color Panel Behavior:
   The color panel for the Navigation Submenu component allows setting text and background colors. However, these colors only work with predefined values sourced from template/theme.json. Custom values are not applied successfully.

2. Color Application Discrepancy:
   When text and background colors are set for the submenu component, they correctly apply to the submenu itself, leaving the overlay text and background settings unaffected in the editor (as intended). However, on the front end, these colors are mistakenly applied to the submenu container instead of the submenu parent, overriding the overlay settings and causing inconsistency between the Editor and the Front End.

I'm unsure if these issues are a regression resulting from recent changes to the component.

Step-by-step reproduction instructions

1. Navigate to a Post/Page edit screen.
2. Create a Navigation Block.
3. Try setting up different permutations for text and background properties along with custom colors.
4. Notice the discrepancies stated above.

Screenshots, screen recording, code snippet

Corresponding screenshots and recordings are provided in the issue description.

Environment info

• Gutenberg Plugin: Trunk (5af740f)
• WordPress Version: 6.8-alpha-59361
• OS: macOS Sequoia

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure