🐛 fix(navigation): navigation block delete warning double click fix.

[creador-dev]

What?

This PR addresses an issue where users could accidentally create two navigation menus by double-clicking the "Create a new menu" button in an empty block.

Why?

How?

The DeletedNavigationWarning component has been updated:

• Added a useState hook to manage the disabled state of the button.
• Updated the button to disable immediately after the first click.
• Included the accessibleWhenDisabled prop to ensure the button remains accessible when disabled.

Testing Instructions

1. Open the Editor (Post/Page editor or Site Editor) in WordPress.
2. Insert a Navigation Block into your content.
3. Delete the Navigation Custom Post Type (CPT) that the block is using.
   • This can typically be done by navigating to the Appearance > Navigation section and deleting the menu associated with the block.
4. Return to the editor, and observe that the "Create a new menu" prompt appears within the Navigation block.
5. Quickly double-click the "Create a new menu" button.
6. Verify that:
   • The button becomes disabled after the first click.
   • Only one navigation menu is created in the Appearance > Navigation section.
   • No duplicate menus are created, even with rapid double-clicking.

Testing Instructions for Keyboard

1. Follow the steps above using only the keyboard:
   • Navigate to the "Create a new menu" button using the Tab key.
   • Press Enter or Space to activate the button.
2. Confirm that the button disables after the first activation.
3. Verify that no duplicate menus are created when the button is activated repeatedly using the keyboard.

Interacted Accounts

The following accounts have interacted with this PR and/or linked issues:

• @creador-dev

[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: creador-dev <[email protected]>

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

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @creador-dev! 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.