[RNMobile] UI for invalid block content

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+
+export default function BlockInvalidWarning( { blockTitle, icon } ) {
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
+
+	return (
+		<Warning
+			title={ blockTitle }
+			message={ __( 'Problem displaying block' ) }
+			icon={ icon }
+			accessible={ true }
+			accessibilityLabel={ accessibilityLabel }
+		/>
+	);
+}

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

@@ -16,6 +16,7 @@ export {
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload';
 export { default as URLInput } from './url-input';
+export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 
 // Content Related Components
 export { default as DefaultBlockAppender } from './default-block-appender';

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { normalizeIconObject } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function Warning( { title, message, icon, iconClass, ...viewProps } ) {
+	icon = icon && normalizeIconObject( icon );
+	return (
+		<View
+			style={ styles.container }
+			{ ...viewProps }
+		>
+			{ icon && (
+				<View style={ styles.icon }>
+					<Icon
+						className={ iconClass || 'warning-icon' }
+						icon={ icon && icon.src ? icon.src : icon }
+					/>
+				</View>
+			) }
+			{ title && (
+				<Text style={ styles.title }>{ title }</Text>
+			) }
+			{ message && (
+				<Text style={ styles.message }>{ message }</Text>
+			) }
+		</View>
+	);
+}
+
+export default Warning;

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

@@ -0,0 +1,31 @@
+/** @format */
+
+.container {
+	background-color: $gray-lighten-30;
+	padding-top: 24;
+	padding-bottom: 24;
+	padding-left: 8;
+	padding-right: 8;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon {
+	width: 24px;
+	height: 24px;
+	margin-bottom: 4;
+	fill: $gray-dark;
+}
+
+.title {
+	text-align: center;
+	margin-bottom: 6;
+	font-size: 14;
+	color: $gray-dark;
+}
+
+.message {
+	text-align: center;
+	color: $gray-text-min;
+	font-size: 12;
+}

packages/components/src/primitives/svg/style.native.scss

@@ -17,3 +17,8 @@
 	color: $gray-dark;
 	fill: currentColor;
 }
+
+.warning-icon {
+	color: $gray-dark;
+	fill: currentColor;
+}