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.