Render generic fallback block for unknown block type

blocks/index.js

@@ -7,7 +7,7 @@ import * as query from 'hpq';
 
 export { query };
 export { default as Editable } from './components/editable';
-export { default as parse } from './parser';
+export { parse } from './post.pegjs';
 
 /**
  * Block settings keyed by block slug.
@@ -79,6 +79,30 @@ export function getBlockSettings( slug ) {
 	return blocks[ slug ];
 }
 
+/**
+ * Returns the block attributes of a registered block node given its settings.
+ *
+ * @param  {Object} blockNode     Parsed block node
+ * @param  {Object} blockSettings Block settings
+ * @return {Object}               Block state, or undefined if type unknown
+ */
+export function getBlockAttributes( blockNode, blockSettings ) {
+	const { rawContent } = blockNode;
+
+	// Merge attributes from parse with block implementation
+	let { attrs } = blockNode;
+
+	// Block attributes by function
+	if ( 'function' === typeof blockSettings.attributes ) {
+		return { ...attrs, ...blockSettings.attributes( rawContent ) };
+	}
+
+	// Block attributes by hpq
+	if ( blockSettings.attributes ) {
+		return { ...attrs, ...query.parse( rawContent, blockSettings.attributes ) };
+	}
+}
+
 /**
  * Returns all registered blocks.
  *

blocks/test/index.js

@@ -12,6 +12,8 @@ import sinon from 'sinon';
 import * as blocks from '../';
 
 describe( 'blocks', () => {
+	const { text } = blocks.query;
+
 	// Reset block state before each test.
 	beforeEach( () => {
 		blocks.getBlocks().forEach( block => {
@@ -104,6 +106,61 @@ describe( 'blocks', () => {
 		} );
 	} );
 
+	describe( 'getBlockAttributes()', () => {
+		it( 'should merge attributes from function implementation', () => {
+			const blockSettings = {
+				attributes: function( rawContent ) {
+					return {
+						content: rawContent + ' & Chicken'
+					};
+				}
+			};
+
+			const blockNode = {
+				blockType: 'core/test-block',
+				attrs: {
+					align: 'left'
+				},
+				rawContent: 'Ribs'
+			};
+
+			expect( blocks.getBlockAttributes( blockNode, blockSettings ) ).to.eql( {
+				align: 'left',
+				content: 'Ribs & Chicken'
+			} );
+		} );
+
+		it( 'should merge attributes from query object implementation', () => {
+			const blockSettings = {
+				attributes: {
+					emphasis: text( 'strong' )
+				}
+			};
+
+			const blockNode = {
+				blockType: 'core/test-block',
+				attrs: {},
+				rawContent: '<span>Ribs <strong>& Chicken</strong></span>'
+			};
+
+			expect( blocks.getBlockAttributes( blockNode, blockSettings ) ).to.eql( {
+				emphasis: '& Chicken'
+			} );
+		} );
+	} );
+
+	describe( 'parse()', () => {
+		it( 'should parse the post content properly', () => {
+			const postContent = '<!-- wp:core/test-block -->Ribs<!-- /wp:core/test-block -->';
+
+			expect( blocks.parse( postContent ) ).to.eql( [ {
+				blockType: 'core/test-block',
+				attrs: {},
+				rawContent: 'Ribs'
+			} ] );
+		} );
+	} );
+
 	describe( 'getBlocks()', () => {
 		it( 'should return an empty array at first', () => {
 			expect( blocks.getBlocks() ).to.eql( [] );

editor/assets/stylesheets/main.scss

@@ -1,4 +1,5 @@
 @import '../../inserter/style';
+@import '../../blocks/generic-block/style';
 
 body.toplevel_page_gutenberg {
 	background: #fff;

editor/blocks/generic-block/_style.scss

@@ -0,0 +1,26 @@
+.generic-block {
+	position: relative;
+}
+
+.generic-block:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba( 64, 64, 64, 0.4 );
+}
+
+.generic-block:after {
+	content: 'Unknown Block';
+	position: absolute;
+	top: 50%;
+	right: 0;
+	left: 0;
+	text-align: center;
+	margin-top: -12px;
+	font-size: 24px;
+	line-height: 1;
+	color: #fff;
+}

editor/blocks/generic-block/index.js

@@ -0,0 +1,20 @@
+const { html } = wp.blocks.query;
+
+wp.blocks.registerBlock( 'wp/generic', {
+	attributes: {
+		html: html()
+	},
+
+	edit( { attributes } ) {
+		// TODO: Not `dangerouslySetInnerHTML`
+		return (
+			<div
+				dangerouslySetInnerHTML={ { __html: attributes.html } }
+				className="generic-block" />
+		);
+	},
+
+	save( { attributes } ) {
+		return attributes.html;
+	}
+} );

editor/blocks/index.js

@@ -1 +1,2 @@
+import './generic-block';
 import './text-block';

editor/editor/editor.js

@@ -9,14 +9,18 @@ const Editor = ( { state: { blocks, inserter }, toggleInserter } ) => {
 			<div contentEditable>
 				{ blocks.map( ( block, index ) => {
 					let settings = wp.blocks.getBlockSettings( block.blockType );
+					if ( ! settings ) {
+						settings = wp.blocks.getBlockSettings( 'wp/generic' );
+					}
+
 					if ( ! settings ) {
 						return;
 					}
 
 					return (
 						<settings.edit
 							key={ index }
-							attributes={ block.attributes }
+							attributes={ wp.blocks.getBlockAttributes( block, settings ) }
 							onChange={ () => {} } />
 					);
 				} ) }