Add more information to unsupported blocks on native (#14577)

* Expose required methods for better unsupported blocks

* Show unsupported block title/icon when possible

* Remove native variant of editor package

* Refactor mobile blocks to fix circle dependencies

* Fix styles for unsupported block

* Remove UnsupportedBlock in favor of core/missing

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

@@ -20,3 +20,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 
 // State Related Components
 export { default as BlockEditorProvider } from './provider';
+
+// Mobile Editor Related Components
+export { default as BottomSheet } from './mobile/bottom-sheet';
+export { default as Picker } from './mobile/picker';

packages/editor/src/components/mobile/picker/index.android.js → packages/block-editor/src/components/mobile/picker/index.android.js

@@ -9,7 +9,7 @@ import { View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { BottomSheet } from '@wordpress/editor';
+import { BottomSheet } from '@wordpress/block-editor';
 
 export default class Picker extends Component {
 	constructor() {

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

@@ -27,11 +27,9 @@ import {
 	RichText,
 	BlockControls,
 	InspectorControls,
-} from '@wordpress/block-editor';
-import {
 	BottomSheet,
 	Picker,
-} from '@wordpress/editor';
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';

packages/block-library/src/index.native.js

@@ -4,23 +4,109 @@
 import {
 	registerBlockType,
 	setDefaultBlockName,
+	setUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import * as code from './code';
-import * as heading from './heading';
-import * as more from './more';
 import * as paragraph from './paragraph';
 import * as image from './image';
+import * as heading from './heading';
+import * as quote from './quote';
+import * as gallery from './gallery';
+import * as archives from './archives';
+import * as audio from './audio';
+import * as button from './button';
+import * as calendar from './calendar';
+import * as categories from './categories';
+import * as code from './code';
+import * as columns from './columns';
+import * as column from './columns/column';
+import * as cover from './cover';
+import * as embed from './embed';
+import * as file from './file';
+import * as html from './html';
+import * as mediaText from './media-text';
+import * as latestComments from './latest-comments';
+import * as latestPosts from './latest-posts';
+import * as list from './list';
+import * as missing from './missing';
+import * as more from './more';
 import * as nextpage from './nextpage';
+import * as preformatted from './preformatted';
+import * as pullquote from './pullquote';
+import * as reusableBlock from './block';
+import * as rss from './rss';
+import * as search from './search';
+import * as separator from './separator';
+import * as shortcode from './shortcode';
+import * as spacer from './spacer';
+import * as subhead from './subhead';
+import * as table from './table';
+import * as template from './template';
+import * as textColumns from './text-columns';
+import * as verse from './verse';
+import * as video from './video';
+import * as tagCloud from './tag-cloud';
+
+export const coreBlocks = [
+	// Common blocks are grouped at the top to prioritize their display
+	// in various contexts — like the inserter and auto-complete components.
+	paragraph,
+	image,
+	heading,
+	gallery,
+	list,
+	quote,
+
+	// Register all remaining core blocks.
+	shortcode,
+	archives,
+	audio,
+	button,
+	calendar,
+	categories,
+	code,
+	columns,
+	column,
+	cover,
+	embed,
+	...embed.common,
+	...embed.others,
+	file,
+	html,
+	mediaText,
+	latestComments,
+	latestPosts,
+	missing,
+	more,
+	nextpage,
+	preformatted,
+	pullquote,
+	rss,
+	search,
+	separator,
+	reusableBlock,
+	spacer,
+	subhead,
+	table,
+	tagCloud,
+	template,
+	textColumns,
+	verse,
+	video,
+].reduce( ( memo, block ) => {
+	memo[ block.name ] = block;
+	return memo;
+}, {} );
 
 export const registerCoreBlocks = () => {
 	[
 		paragraph,
 		heading,
 		code,
+		missing,
 		more,
 		image,
 		nextpage,
@@ -30,3 +116,4 @@ export const registerCoreBlocks = () => {
 };
 
 setDefaultBlockName( paragraph.name );
+setUnregisteredTypeHandlerName( missing.name );

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { coreBlocks } from '@wordpress/block-library';
+import { normalizeIconObject } from '@wordpress/blocks';
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export default class UnsupportedBlockEdit extends Component {
+	render() {
+		const { originalName } = this.props.attributes;
+		const blockType = coreBlocks[ originalName ];
+		const title = blockType ? blockType.settings.title : __( 'Unsupported' );
+		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
+
+		return (
+			<View style={ styles.unsupportedBlock }>
+				<Icon className="unsupported-icon" icon={ icon && icon.src ? icon.src : icon } />
+				<Text style={ styles.unsupportedBlockMessage }>{ title }</Text>
+			</View>
+		);
+	}
+}

packages/editor/src/components/mobile/unsupported-block/style.scss → packages/block-library/src/missing/style.native.scss

@@ -2,17 +2,21 @@
 
 .unsupportedBlock {
 	background-color: #e9eff3; // grey lighten 30
-	padding-top: 8;
-	padding-bottom: 8;
+	padding-top: 24;
+	padding-bottom: 24;
 	padding-left: 8;
 	padding-right: 8;
+	align-items: center;
+	justify-content: center;
+}
+
+.unsupportedBlockIcon {
+	color: $gray-dark;
 }
 
 .unsupportedBlockMessage {
+	margin-top: 2;
 	text-align: center;
-	color: #4f748e; // grey darken 20
-	padding-top: 24;
-	padding-bottom: 24;
-	font-size: 16px;
-	font-family: $default-regular-font;
+	color: $gray-dark;
+	font-size: 14;
 }

packages/blocks/src/api/index.native.js

@@ -28,6 +28,7 @@ export {
 } from './registration';
 export {
 	isUnmodifiedDefaultBlock,
+	normalizeIconObject,
 } from './utils';
 export { pasteHandler, getPhrasingContentSchema } from './raw-handling';
 export { default as children } from './children';

packages/components/src/index.native.js

@@ -3,13 +3,18 @@ export * from './primitives';
 export { default as Dashicon } from './dashicon';
 export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
-export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { default as Icon } from './icon';
 export { default as IconButton } from './icon-button';
 export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
 
 // Higher-Order Components
+export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
+export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
+export { default as withFocusReturn } from './higher-order/with-focus-return';
+export { default as withNotices } from './higher-order/with-notices';
+export { default as withSpokenMessages } from './higher-order/with-spoken-messages';

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

@@ -12,3 +12,8 @@
 	color: #87a6bc;
 	fill: currentColor;
 }
+
+.unsupported-icon {
+	color: $gray-dark;
+	fill: currentColor;
+}

packages/edit-post/src/index.native.js

@@ -2,11 +2,9 @@
  * WordPress dependencies
  */
 import '@wordpress/core-data';
-import '@wordpress/block-editor';
-import { UnsupportedBlock } from '@wordpress/editor';
 import '@wordpress/notices';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { registerBlockType, setUnregisteredTypeHandlerName, unregisterBlockType } from '@wordpress/blocks';
+import { unregisterBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -19,8 +17,6 @@ import './store';
 export function initializeEditor() {
 	// register and setup blocks
 	registerCoreBlocks();
-	registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings );
-	setUnregisteredTypeHandlerName( UnsupportedBlock.name );
 
 	// disable Code and More blocks for the release
 	// eslint-disable-next-line no-undef

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

@@ -1,16 +1,7 @@
-/**
- * Internal dependencies
- */
-import * as UnsupportedBlock from './mobile/unsupported-block';
 
 // Post Related Components
 export { default as PostTitle } from './post-title';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
-export { default as BottomSheet } from './mobile/bottom-sheet';
-export { default as Picker } from './mobile/picker';
-
-// Mobile Editor Related Components
-export { UnsupportedBlock };
 
 export * from './deprecated';

packages/editor/src/index.native.js

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
+import '@wordpress/block-editor';
 import '@wordpress/blocks';
 import '@wordpress/core-data';
+import '@wordpress/rich-text';
 
 /**
  * Internal dependencies

packages/format-library/src/link/modal.native.js

@@ -9,7 +9,7 @@ import { Switch, Platform } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { BottomSheet } from '@wordpress/editor';
+import { BottomSheet } from '@wordpress/block-editor';
 import { prependHTTP } from '@wordpress/url';
 import {
 	withSpokenMessages,