[RNMobile] Implement recovery option for invalid blocks (#41988)

If a block's validation fails within the mobile app, users are shown an error but not provided with any options for recovering the block. This PR introduces an option for users to attempt block recovery. They'll be prompted to tap on a block if they wish to attempt recovery.

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

@@ -1,27 +1,62 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback } from 'react-native';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
+import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon } ) {
+export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
 	const accessibilityLabel = sprintf(
 		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
 		__( '%s block. This block has invalid content' ),
 		blockTitle
 	);
 
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+		return {
+			block,
+		};
+	};
+
+	const { block } = useSelect( selector, [ clientId ] );
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+		createBlock( name, attributes, innerBlocks );
+
+	const attemptBlockRecovery = () => {
+		replaceBlock( block.clientId, recoverBlock( block ) );
+	};
+
 	return (
-		<Warning
-			title={ blockTitle }
-			message={ __( 'Problem displaying block' ) }
-			icon={ icon }
+		<TouchableWithoutFeedback
+			onPress={ attemptBlockRecovery }
 			accessible={ true }
-			accessibilityLabel={ accessibilityLabel }
-		/>
+			accessibilityRole={ 'button' }
+		>
+			<Warning
+				title={ blockTitle }
+				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+				message={ __(
+					'Problem displaying block. \nTap to attempt block recovery.'
+				) }
+				icon={ icon }
+				accessibilityLabel={ accessibilityLabel }
+			/>
+		</TouchableWithoutFeedback>
 	);
 }

packages/block-editor/src/components/block-list/block.native.js

@@ -272,6 +272,7 @@ class BlockListBlock extends Component {
 									<BlockInvalidWarning
 										blockTitle={ title }
 										icon={ icon }
+										clientId={ clientId }
 									/>
 								)
 							}

packages/react-native-editor/CHANGELOG.md

@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [*] Add 'Insert from URL' option to Video block [#41493]
 -   [*] Image block copies the alt text from the media library when selecting an item [#41839]
+-   [*] Introduce "block recovery" option for invalid blocks [#41988]
 
 ## 1.78.1