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

#24263)

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

* Update docs

* Fix e2e test for invalid block

* Fix wrong contents in doc

* Fix z-index issue when opening the resolve modal along with dropdown

docs/designers-developers/developers/block-api/block-edit-save.md

@@ -390,17 +390,17 @@ When the editor loads, all blocks within post content are validated to determine
 
 If a block is detected to be invalid, the user will be prompted to choose how to handle the invalidation:
 
-![Invalid block prompt](https://user-images.githubusercontent.com/8876600/87853743-bb45db80-c947-11ea-8e61-93d948d2ba84.png)
+![Invalid block prompt](https://user-images.githubusercontent.com/7753001/88754471-4cf7e900-d191-11ea-9123-3cee20719d10.png)
 
-Clicking Resolve button will open Resolve Block dialog box with two buttons:
+Clicking **Attempt Block Recovery** button will attempt recovery action as much as possible.
 
-- **Convert to HTML**: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
-- **Convert to Blocks**: Protects the original markup from the saved post content and convert the block from its original type to the validated block type.
-
-Clicking the "3-dot" menu on the side of the block displays two options:
+Clicking the "3-dot" menu on the side of the block displays three options:
 
+- **Resolve**: Open Resolve Block dialog box with two buttons:
+  - **Convert to HTML**: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
+  - **Convert to Blocks**: Protects the original markup from the saved post content and convert the block from its original type to the validated block type.
+- **Convert to HTML**: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
 - **Convert to Classic Block**: Protects the original markup from the saved post content as correct. Since the block will be converted from its original type to the Classic block type, it will no longer be possible to edit the content using controls available for the original block type.
-- **Attempt Block Recovery**: Attempts recovery action as much as possible.
 
 ### Validation FAQ
 

packages/base-styles/_z-index.scss

@@ -111,6 +111,7 @@ $z-layers: (
 	".components-popover.edit-post-more-menu__content": 99998,
 	".components-popover.edit-site-more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
+	".components-popover.block-editor-warning__dropdown": 99998,
 
 	".components-autocomplete__results": 1000000,
 

packages/block-editor/src/components/block-list/block-invalid-warning.js

@@ -43,39 +43,31 @@ export class BlockInvalidWarning extends Component {
 		const { compare } = this.state;
 		const hiddenActions = [
 			{
-				title: __( 'Convert to Classic Block' ),
-				onClick: convertToClassic,
+				// translators: Button to fix block content
+				title: _x( 'Resolve', 'imperative verb' ),
+				onClick: this.onCompare,
+			},
+			hasHTMLBlock && {
+				title: __( 'Convert to HTML' ),
+				onClick: convertToHTML,
 			},
 			{
-				title: __( 'Attempt Block Recovery' ),
-				onClick: attemptBlockRecovery,
+				title: __( 'Convert to Classic Block' ),
+				onClick: convertToClassic,
 			},
-		];
+		].filter( Boolean );
 
 		return (
 			<>
 				<Warning
 					actions={ [
 						<Button
-							key="convert"
-							onClick={ this.onCompare }
-							isSecondary={ hasHTMLBlock }
-							isPrimary={ ! hasHTMLBlock }
+							key="recover"
+							onClick={ attemptBlockRecovery }
+							isPrimary
 						>
-							{
-								// translators: Button to fix block content
-								_x( 'Resolve', 'imperative verb' )
-							}
+							{ __( 'Attempt Block Recovery' ) }
 						</Button>,
-						hasHTMLBlock && (
-							<Button
-								key="edit"
-								onClick={ convertToHTML }
-								isPrimary
-							>
-								{ __( 'Convert to HTML' ) }
-							</Button>
-						),
 					] }
 					secondaryActions={ hiddenActions }
 				>

packages/block-editor/src/components/warning/index.js

@@ -31,6 +31,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 						{ secondaryActions && (
 							<Dropdown
 								className="block-editor-warning__secondary"
+								contentClassName="block-editor-warning__dropdown"
 								position="bottom left"
 								renderToggle={ ( { isOpen, onToggle } ) => (
 									<Button

packages/block-editor/src/components/warning/style.scss

@@ -45,3 +45,9 @@
 .block-editor-warning__secondary {
 	margin: auto 0 auto $grid-unit-10;
 }
+
+.components-popover.block-editor-warning__dropdown {
+	// Set z-index as if it's displayed on the bottom, otherwise the modal
+	// dialog popover might overlap if displayed on the bottom.
+	z-index: z-index(".components-popover.block-editor-warning__dropdown");
+}

packages/e2e-tests/specs/editor/various/invalid-block.test.js

@@ -36,8 +36,14 @@ describe( 'invalid blocks', () => {
 		expect( console ).toHaveErrored();
 		expect( console ).toHaveWarned();
 
-		// Click on the 'resolve' button
-		await page.click( '.block-editor-warning__actions button' );
+		// Click on the 'three-dots' menu toggle
+		await page.click(
+			'.block-editor-warning__actions button[aria-label="More options"]'
+		);
+
+		// Click on the 'Resolve' button
+		const [ resolveButton ] = await page.$x( '//button[text()="Resolve"]' );
+		await resolveButton.click();
 
 		// Check we get the resolve modal with the appropriate contents
 		const htmlBlockContent = await page.$eval(