feat: Add More Collapsed Navigation Icon Options for Navigation Block

[Ta5r]

What?

Closes #61755

Why?

This PR introduces additional icon options for the collapsed state of the Navigation block. It expands beyond the current two icons by allowing block users to choose from a broader set of icons, offering more flexibility in design and user interface customization.

How?

• Added new SVG icons inside edit/overlay-menu-icon.js, expanding the visual choices for the collapsed navigation menu.

• Updated overlay-menu-preview.js to include additional ToggleGroupControlOption entries for each new icon, allowing users to select them via the block editor UI.

• Modified index.php to render the correct icon on the front end based on the selected option, ensuring consistency between the editor preview and the published content.

Testing Instructions

1. Open the block editor on any post or page.
2. Insert a Navigation block (or select an existing one).
3. In the block settings sidebar, enable the "Enable overlay menu on mobile" option to trigger the collapsed menu behavior.
4. Scroll to the "Overlay Menu Icon" section.
5. You should now see multiple icon options presented as toggle buttons.
6. Select each icon and verify:
   • The correct icon displays in the editor preview.
   • The icon reflects your selection when viewing the front end (after saving/publishing the page).
7. Save and preview the post/page. Confirm that the selected icon renders correctly on mobile (or when simulating a small screen).
8. Test switching between icons multiple times to ensure there are no regressions or persistence issues.

Testing Instructions for Keyboard

1. Navigate to the Navigation block using the Tab key.
2. Use Tab to focus on the Overlay Menu Icon toggle group.
3. Use Arrow keys (←/→) to move between the icon choices.
4. Press Enter or Space to select an icon.
5. Ensure the icon updates visually in the editor as expected.
6. Save the page and verify that the chosen icon is used on the front end, confirming that keyboard selection changes persist.

Screenshots or screencast

https://www.loom.com/share/6d076126729144e492b85480debbe666?sid=0ccf0a44-13d3-4d20-b583-7b74770e3b74

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Ta5r <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Ta5r! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.