Make "Attempt Block Recovery" the default option of block invalidation

[kevin940726]

Description

Fix #16425.

As stated in the original issue:

"Attempt block recovery" should be prominently displayed where "Resolve" and "Convert to HTML" currently are. And those options can be moved behind the three dot menu.

This PR makes Attempt Block Recovery the default option of block invalidation.

How has this been tested?

1. Set up development environment for this project.
2. Edit a sample post here
3. Switch to Code Editor.
4. Change the heading tag below from h2 to h3

   <!-- wp:heading -->
   - <h2>The <em>Inserter</em> Tool</h2>
   + <h3>The <em>Inserter</em> Tool</h3>
   <!-- /wp:heading -->

5. Exit Code Editor.
6. The editor should display the invalidation warning like shown in the screenshot below.
7. All the buttons works the same.

Screenshots

Caveat

When opening the resolve dialog from the sub-menu of the "3-dots" menu icon, the modal dialog will be below the sub-menu itself, which looks like a bug.

I think we have 2 options to solve it:

1. Increase z-index of the modal dialog, but the sub-menu will still be open
2. Close the sub-menu when the dialog is opened, which seems to be controlled by this line:

   gutenberg/packages/components/src/dropdown/index.js

   Lines 58 to 72 in a260cda

   	/**
   	* Closes the dropdown if a focus leaves the dropdown wrapper. This is
   	* intentionally distinct from `onClose` since focus loss from the popover
   	* is expected to occur when using the Dropdown's toggle button, in which
   	* case the correct behavior is to keep the dropdown closed. The same applies
   	* in case when focus is moved to the modal dialog.
   	*/
   	function closeIfFocusOutside() {
   	if (
   	! containerRef.current.contains( document.activeElement ) &&
   	! document.activeElement.closest( '[role="dialog"]' )
   	) {
   	close();
   	}
   	}

(1) doesn't really solve the problem but can be a hacky temporary solution. I believe we should go with (2) is possible. However, I think this is outside of this PR's scope, and I'm not sure what changes should be make?

In the end, we chose to go with (1). Since it looks like we cannot do (2) because of an accessibility issue.

The solution is to decrease the z-index value for all the dropdowns under the <Warning> component. As shown below.

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[talldan]

Changes look good, thanks for working on this.

Congrats on your first merged PR 🎉

[github-actions]

Congratulations on your first merged pull request, @kevin940726! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!