Unsupported Block

package.json

@@ -74,6 +74,7 @@
     "@wordpress/autop": "^1.0.6",
     "@wordpress/compose": "^1.0.1",
     "@wordpress/deprecated": "^1.0.0-alpha.2",
+    "@wordpress/element": "^1.0.2",
     "@wordpress/hooks": "^1.2.1",
     "@wordpress/i18n": "^1.1.0",
     "@wordpress/is-shallow-equal": "^1.0.1",

src/block-management/block-holder.js

@@ -12,13 +12,14 @@ import type { BlockType } from '../store/';
 import styles from './block-holder.scss';
 
 // Gutenberg imports
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, getUnknownTypeHandlerName } from '@wordpress/blocks';
 
 type PropsType = BlockType & {
 	onChange: ( clientId: string, attributes: mixed ) => void,
 	onToolbarButtonPressed: ( button: number, clientId: string ) => void,
 	onBlockHolderPressed: ( clientId: string ) => void,
 };
+
 type StateType = {
 	selected: boolean,
 	focused: boolean,
@@ -48,33 +49,41 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 	}
 
 	getBlockForType() {
+		// Since unsupported blocks are handled in block-manager.js, at this point the block should definitely
+		// be supported.
 		const blockType = getBlockType( this.props.name );
-		if ( blockType ) {
-			const Block = blockType.edit;
+		const Block = blockType.edit;
 
-			let style;
-			if ( blockType.name === 'core/code' ) {
-				style = styles.block_code;
-			} else if ( blockType.name === 'core/paragraph' ) {
-				style = styles[ 'aztec_editor' ];
-			}
+		let style;
+		if ( blockType.name === 'core/code' ) {
+			style = styles.block_code;
+		} else if ( blockType.name === 'core/paragraph' ) {
+			style = styles[ 'aztec_editor' ];
+		}
 
-			// TODO: setAttributes needs to change the state/attributes
-			return (
-				<Block
-					attributes={ { ...this.props.attributes } }
-					// pass a curried version of onChanged with just one argument
-					setAttributes={ ( attrs ) =>
-						this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } )
-					}
-					isSelected={ this.props.focused }
-					style={ style }
-				/>
-			);
+		// TODO: setAttributes needs to change the state/attributes
+		return (
+			<Block
+				attributes={ { ...this.props.attributes } }
+				// pass a curried version of onChanged with just one argument
+				setAttributes={ ( attrs ) =>
+					this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } )
+				}
+				isSelected={ this.props.focused }
+				style={ style }
+			/>
+		);
+	}
+
+	getBlockType( blockName: String ) {
+		let blockType = getBlockType( blockName );
+
+		if ( ! blockType ) {
+			const fallbackBlockName = getUnknownTypeHandlerName();
+			blockType = getBlockType( fallbackBlockName );
 		}
 
-		// Default block placeholder
-		return <Text>{ this.props.attributes.content }</Text>;
+		return blockType;
 	}
 
 	render() {

src/block-management/block-holder.scss

@@ -21,6 +21,32 @@
 	padding-bottom: 4;
 }
 
+.unsupportedBlock {
+	background-color: #e9eff3; // grey lighten 30 
+	padding-top: 8;
+	padding-bottom: 8;
+	padding-left: 8;
+	padding-right: 8;
+}
+
+.unsupportedBlockImagePlaceholder {
+	margin: auto;
+	text-align: center;
+	background-color: #4f748e; // dark grey
+	width: 20;
+	height: 20;
+	margin-top: 24;
+	margin-bottom: 8;
+}
+
+.unsupportedBlockMessage {
+	text-align: center;
+	color: #4f748e; // grey darken 20
+	padding-top: 24;
+	padding-bottom: 24;
+	font-size: 16px;
+}
+
 .aztec_container {
 	flex: 1;
 }

src/block-management/block-manager.js

@@ -11,8 +11,12 @@ import { ToolbarButton } from './constants';
 import type { BlockType } from '../store/';
 import styles from './block-manager.scss';
 import BlockPicker from './block-picker';
+
 // Gutenberg imports
-import { getBlockType, serialize, createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	serialize,
+} from '@wordpress/blocks';
 
 export type BlockListType = {
 	onChange: ( clientId: string, attributes: mixed ) => void,
@@ -135,14 +139,11 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	serializeToHtml() {
 		return this.props.blocks
 			.map( ( block ) => {
-				const blockType = getBlockType( block.name );
-				if ( blockType ) {
-					return serialize( [ block ] ) + '\n\n';
-				} else if ( block.name === 'aztec' ) {
+				if ( block.name === 'aztec' ) {
 					return '<aztec>' + block.attributes.content + '</aztec>\n\n';
 				}
 
-				return '<span>' + block.attributes.content + '</span>\n\n';
+				return serialize( [ block ] ) + '\n\n';
 			} )
 			.reduce( ( prevVal, value ) => {
 				return prevVal + value;

src/block-management/block-picker.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import { FlatList, Text, TouchableHighlight, View } from 'react-native';
 import Modal from 'react-native-modal';
 import styles from './block-picker.scss';
+import { name as unsupportedBlockName } from '../block-types/unsupported-block';
 // Gutenberg imports
 import { getBlockTypes } from '@wordpress/blocks';
 
@@ -22,7 +23,7 @@ type StateType = {
 };
 
 export default class BlockPicker extends Component<PropsType, StateType> {
-	availableBlockTypes = getBlockTypes();
+	availableBlockTypes = getBlockTypes().filter( ( { name } ) => name !== unsupportedBlockName );
 
 	constructor( props: PropsType ) {
 		super( props );

src/block-types/unsupported-block/edit.js

@@ -0,0 +1,32 @@
+/**
+ * @format
+ * @flow
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { BlockType } from '../../store/';
+
+type PropsType = BlockType & {
+	onChange: ( clientId: string, attributes: mixed ) => void,
+	onToolbarButtonPressed: ( button: number, clientId: string ) => void,
+	onBlockHolderPressed: ( clientId: string ) => void,
+};
+
+type StateType = {
+	selected: boolean,
+	focused: boolean,
+};
+
+// Styles
+import styles from '../../block-management/block-holder.scss';
+
+export default class UnsupportedBlockEdit extends React.Component<PropsType, StateType> {
+	render() {
+		return (
+			<View style={ styles.unsupportedBlock }>
+				<Text style={ styles.unsupportedBlockMessage }>Unsupported</Text>
+			</View>
+		);
+	}
+}

src/block-types/unsupported-block/index.js

@@ -0,0 +1,49 @@
+/**
+ * @format
+ * @flow
+ */
+
+import React from 'react';
+
+// Gutenberg imports
+import { __ } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
+
+import edit from './edit';
+
+type Attributes = {
+	content: String
+}
+
+export const name = 'gmobile/unsupported';
+
+export const settings = {
+	title: __( 'Unsupported Block' ),
+
+	description: __( 'Unsupported block type.' ),
+
+	icon: 'editor-code',
+
+	category: 'formatting',
+
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+		},
+	},
+
+	supports: {
+		className: false,
+		customClassName: false,
+	},
+
+	transforms: {
+	},
+
+	edit,
+
+	save( { attributes }: { attributes: Attributes } ) {
+		return <RawHTML>{ attributes.content }</RawHTML>;
+	},
+};

src/store/index.js

@@ -5,11 +5,17 @@
 
 // Gutenberg imports
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { parse } from '@wordpress/blocks';
+import {
+	parse,
+	registerBlockType,
+	setUnknownTypeHandlerName,
+} from '@wordpress/blocks';
 
 import { createStore } from 'redux';
 import { reducer } from './reducers';
 
+import * as UnsupportedBlock from '../block-types/unsupported-block/';
+
 export type BlockType = {
 	clientId: string,
 	name: string,
@@ -25,67 +31,50 @@ export type StateType = {
 };
 
 registerCoreBlocks();
+registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings );
+setUnknownTypeHandlerName( UnsupportedBlock.name );
+
+const initialHtml = `
+<!-- wp:title -->
+Hello World
+<!-- /wp:title -->
+
+<!-- wp:heading {"level": 2} -->
+<h2>Welcome to Gutenberg</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><b>Hello</b> World!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"dropCap":true,"backgroundColor":"vivid-red","fontSize":"large","className":"custom-class-1 custom-class-2"} -->
+<p class="has-background has-drop-cap has-large-font-size has-vivid-red-background-color custom-class-1 custom-class-2">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<!-- /wp:paragraph -->
+
 
-const initialCodeBlockHtml = `
 <!-- wp:code -->
 <pre class="wp-block-code"><code>if name == "World":
     return "Hello World"
 else:
     return "Hello Pony"</code></pre>
 <!-- /wp:code -->
-`;
 
-const initialMoreBlockHtml = `
 <!-- wp:more -->
 <!--more-->
 <!-- /wp:more -->
-`;
 
-const initialHeadingBlockHtml =
-	'<!-- wp:heading {"level": 2} --><h2>Welcome to Gutenberg</h2><!-- /wp:heading -->';
-const initialParagraphBlockHtml =
-	'<!-- wp:paragraph --><p><b>Hello</b> World!</p><!-- /wp:paragraph -->';
-const initialParagraphBlockHtml2 = `<!-- wp:paragraph {"dropCap":true,"backgroundColor":"vivid-red","fontSize":"large","className":"custom-class-1 custom-class-2"} -->
-<p class="has-background has-drop-cap has-large-font-size has-vivid-red-background-color custom-class-1 custom-class-2">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><!-- /wp:paragraph -->`;
+<!-- wp:p4ragraph -->
+Лорем ипсум долор сит амет, адиписци трацтатос еа еум. Меа аудиам малуиссет те, хас меис либрис елеифенд ин. Нец ех тота деленит сусципит. Яуас порро инструцтиор но нец.
+<!-- /wp:p4ragraph -->
+`;
 
-const codeBlockInstance = parse( initialCodeBlockHtml )[ 0 ];
-const moreBlockInstance = parse( initialMoreBlockHtml )[ 0 ];
-const headingBlockInstance = parse( initialHeadingBlockHtml )[ 0 ];
-const paragraphBlockInstance = parse( initialParagraphBlockHtml )[ 0 ];
-const paragraphBlockInstance2 = parse( initialParagraphBlockHtml2 )[ 0 ];
+const initialBlocks = parse( initialHtml );
 
 export const initialState: StateType = {
 	// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
 	// If not it should be created from a string parsing (commented HTML to json).
-	blocks: [
-		{
-			clientId: '1',
-			name: 'title',
-			isValid: true,
-			attributes: {
-				content: 'Hello World',
-			},
-			innerBlocks: [],
-			focused: false,
-		},
-		{ ...headingBlockInstance, focused: false },
-		{ ...paragraphBlockInstance, focused: false },
-		{ ...paragraphBlockInstance2, focused: false },
-		{ ...codeBlockInstance, focused: false },
-		{ ...moreBlockInstance, focused: false },
-		{
-			clientId: '5',
-			name: 'paragraph',
-			isValid: true,
-			attributes: {
-				content:
-					'Лорем ипсум долор сит амет, адиписци трацтатос еа еум. Меа аудиам малуиссет те, хас меис либрис елеифенд ин. Нец ех тота деленит сусципит. Яуас порро инструцтиор но нец.',
-			},
-			innerBlocks: [],
-			focused: false,
-		},
-	],
+	blocks: initialBlocks.map( ( block ) => ( { ...block, focused: false } ) ),
 	refresh: false,
 };