[RNMobile] Use UnsupportedBlockDetails component in Missing block

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

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
 
 function BlockOutline( {
 	blockCategory,

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

@@ -67,6 +67,7 @@ export {
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as UnsupportedBlockDetails } from './unsupported-block-details';
 
 export {
 	BottomSheetSettings,

packages/block-library/src/missing/edit.native.js

@@ -11,12 +11,7 @@ import {
 /**
  * WordPress dependencies
  */
-import {
-	requestUnsupportedBlockFallback,
-	sendActionButtonPressedAction,
-	actionButtons,
-} from '@wordpress/react-native-bridge';
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
@@ -25,7 +20,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { help, plugins } from '@wordpress/icons';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	UnsupportedBlockDetails,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -121,122 +119,26 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	renderSheet( blockTitle, blockName ) {
-		const {
-			getStylesFromColorScheme,
-			attributes,
-			clientId,
-			isUnsupportedBlockEditorSupported,
-			canEnableUnsupportedBlockEditor,
-			isEditableInUnsupportedBlockEditor,
-		} = this.props;
-		const infoTextStyle = getStylesFromColorScheme(
-			styles.infoText,
-			styles.infoTextDark
-		);
-		const infoTitleStyle = getStylesFromColorScheme(
-			styles.infoTitle,
-			styles.infoTitleDark
-		);
-		const infoDescriptionStyle = getStylesFromColorScheme(
-			styles.infoDescription,
-			styles.infoDescriptionDark
-		);
-		const infoSheetIconStyle = getStylesFromColorScheme(
-			styles.infoSheetIcon,
-			styles.infoSheetIconDark
-		);
-
+		const { clientId } = this.props;
+		const { showHelp } = this.state;
 		/* translators: Missing block alert title. %s: The localized block name */
 		const titleFormat = __( "'%s' is not fully-supported" );
-		const infoTitle = sprintf( titleFormat, blockTitle );
-		const missingBlockDetail = applyFilters(
+		const title = sprintf( titleFormat, blockTitle );
+		const description = applyFilters(
 			'native.missing_block_detail',
 			__( 'We are working hard to add more blocks with each release.' ),
 			blockName
 		);
-		const missingBlockActionButton = applyFilters(
-			'native.missing_block_action_button',
-			__( 'Edit using web editor' )
-		);
-
-		const actionButtonStyle = getStylesFromColorScheme(
-			styles.actionButton,
-			styles.actionButtonDark
-		);
 
 		return (
-			<BottomSheet
-				isVisible={ this.state.showHelp }
-				hideHeader
-				onClose={ this.closeSheet }
-				onModalHide={ () => {
-					if ( this.state.sendFallbackMessage ) {
-						// On iOS, onModalHide is called when the controller is still part of the hierarchy.
-						// A small delay will ensure that the controller has already been removed.
-						this.timeout = setTimeout( () => {
-							// For the Classic block, the content is kept in the `content` attribute.
-							const content =
-								blockName === 'core/freeform'
-									? attributes.content
-									: attributes.originalContent;
-							requestUnsupportedBlockFallback(
-								content,
-								clientId,
-								blockName,
-								blockTitle
-							);
-						}, 100 );
-						this.setState( { sendFallbackMessage: false } );
-					} else if ( this.state.sendButtonPressMessage ) {
-						this.timeout = setTimeout( () => {
-							sendActionButtonPressedAction(
-								actionButtons.missingBlockAlertActionButton
-							);
-						}, 100 );
-						this.setState( { sendButtonPressMessage: false } );
-					}
-				} }
-			>
-				<View style={ styles.infoContainer }>
-					<Icon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-					{ isEditableInUnsupportedBlockEditor &&
-						missingBlockDetail && (
-							<Text
-								style={ [
-									infoTextStyle,
-									infoDescriptionStyle,
-								] }
-							>
-								{ missingBlockDetail }
-							</Text>
-						) }
-				</View>
-				{ ( isUnsupportedBlockEditorSupported ||
-					canEnableUnsupportedBlockEditor ) &&
-					isEditableInUnsupportedBlockEditor && (
-						<>
-							<TextControl
-								label={ missingBlockActionButton }
-								separatorType="topFullWidth"
-								onPress={ this.requestFallback }
-								labelStyle={ actionButtonStyle }
-							/>
-							<TextControl
-								label={ __( 'Dismiss' ) }
-								separatorType="topFullWidth"
-								onPress={ this.toggleSheet }
-								labelStyle={ actionButtonStyle }
-							/>
-						</>
-					) }
-			</BottomSheet>
+			<UnsupportedBlockDetails
+				clientId={ clientId }
+				showSheet={ showHelp }
+				onCloseSheet={ this.closeSheet }
+				customBlockTitle={ blockTitle }
+				title={ title }
+				description={ description }
+			/>
 		);
 	}
 

packages/block-library/src/missing/style.native.scss

@@ -1,13 +1,3 @@
-/** @format */
-.content {
-	padding-top: 8;
-	padding-bottom: 0;
-	padding-left: 24;
-	padding-right: 24;
-	align-items: center;
-	justify-content: space-evenly;
-}
-
 .helpIconContainer {
 	position: absolute;
 	top: 0;
@@ -20,12 +10,6 @@
 	align-items: flex-end;
 }
 
-.infoContainer {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
 .infoIcon {
 	size: 36;
 	height: 36;
@@ -38,49 +22,6 @@
 	color: $dark-tertiary;
 }
 
-.infoSheetIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.infoSheetIconDark {
-	color: $gray-20;
-}
-
-.infoText {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.infoTextDark {
-	color: $white;
-}
-
-.infoTitle {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.infoTitleDark {
-	color: $white;
-}
-
-.infoDescription {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.infoDescriptionDark {
-	color: $gray-20;
-}
-
 .unsupportedBlock {
 	height: 142;
 	background-color: #e0e0e0; // $light-dim
@@ -136,11 +77,3 @@
 .unsupportedBlockSubtitleDark {
 	color: $gray-20;
 }
-
-.actionButton {
-	color: $blue-50;
-}
-
-.actionButtonDark {
-	color: $blue-30;
-}