Add UI for unregistered block types

docs/data/data-core-blocks.md

@@ -59,6 +59,30 @@ Returns the name of the fallback block name.
 
 Fallback block name.
 
+### getFreeformFallbackBlockName
+
+Returns the name of the block for handling non-block content.
+
+*Parameters*
+
+ * state: Data state.
+
+*Returns*
+
+Name of the block for handling non-block content.
+
+### getUnregisteredFallbackBlockName
+
+Returns the name of the block for handling unregistered blocks.
+
+*Parameters*
+
+ * state: Data state.
+
+*Returns*
+
+Name of the block for handling unregistered blocks.
+
 ### getChildBlockNames
 
 Returns an array with the child blocks of a given block.
@@ -159,7 +183,26 @@ Returns an action object used to set the default block name.
 
 ### setFallbackBlockName
 
-Returns an action object used to set the fallback block name.
+Returns an action object used to set the name of the block used as a fallback
+for non-block content.
+
+*Parameters*
+
+ * name: Block name.
+
+### setFreeformFallbackBlockName
+
+Returns an action object used to set the name of the block used as a fallback
+for non-block content.
+
+*Parameters*
+
+ * name: Block name.
+
+### setUnregisteredFallbackBlockName
+
+Returns an action object used to set the name of the block used as a fallback
+for unregistered blocks.
 
 *Parameters*
 

docs/reference/deprecated.md

@@ -13,6 +13,8 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 - Attribute type coercion has been removed. Omit the source to preserve type via serialized comment demarcation.
 - `mediaDetails` in object passed to `onFileChange` callback of `wp.editor.mediaUpload`. Please use `media_details` property instead.
 - `wp.components.CodeEditor` has been removed. Used `wp.codeEditor` directly instead.
+- `wp.blocks.setUnknownTypeHandlerName` has been removed. Please use `setFreeformContentHandlerName` and `setUnregisteredTypeHandlerName` instead.
+- `wp.blocks.getUnknownTypeHandlerName` has been removed. Please use `getFreeformContentHandlerName` and `getUnregisteredTypeHandlerName` instead.
 
 ## 4.1.0
 

packages/block-library/src/index.js

@@ -5,7 +5,8 @@ import '@wordpress/core-data';
 import {
 	registerBlockType,
 	setDefaultBlockName,
-	setUnknownTypeHandlerName,
+	setFreeformContentHandlerName,
+	setUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
 
 /**
@@ -30,6 +31,7 @@ import * as html from './html';
 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';
@@ -76,6 +78,7 @@ export const registerCoreBlocks = () => {
 		html,
 		latestComments,
 		latestPosts,
+		missing,
 		more,
 		nextpage,
 		preformatted,
@@ -99,6 +102,7 @@ export const registerCoreBlocks = () => {
 
 	setDefaultBlockName( paragraph.name );
 	if ( window.wp && window.wp.oldEditor ) {
-		setUnknownTypeHandlerName( classic.name );
+		setFreeformContentHandlerName( classic.name );
 	}
+	setUnregisteredTypeHandlerName( missing.name );
 };

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

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { RawHTML, Fragment } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { getBlockType, createBlock } from '@wordpress/blocks';
+import { withDispatch } from '@wordpress/data';
+import { Warning } from '@wordpress/editor';
+
+function MissingBlockWarning( { attributes, convertToHTML } ) {
+	const { originalName, originalUndelimitedContent } = attributes;
+	const hasContent = !! originalUndelimitedContent;
+	const hasHTMLBlock = getBlockType( 'core/html' );
+
+	const actions = [];
+	let messageHTML;
+	if ( hasContent && hasHTMLBlock ) {
+		messageHTML = sprintf(
+			__( 'Your site doesn\'t include support for the <code>%s</code> block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.' ),
+			originalName
+		);
+		actions.push(
+			<Button key="convert" onClick={ convertToHTML } isLarge isPrimary>
+				{ __( 'Keep as HTML' ) }
+			</Button>
+		);
+	} else {
+		messageHTML = sprintf(
+			__( 'Your site doesn\'t include support for the <code>%s</code> block. You can leave this block intact or remove it entirely.' ),
+			originalName
+		);
+	}
+
+	return (
+		<Fragment>
+			<Warning actions={ actions }>
+				<span dangerouslySetInnerHTML={ { __html: messageHTML } } />
+			</Warning>
+			<div>
+				<RawHTML>{ originalUndelimitedContent }</RawHTML>
+			</div>
+		</Fragment>
+	);
+}
+
+const edit = withDispatch( ( dispatch, { clientId, attributes } ) => {
+	const { replaceBlock } = dispatch( 'core/editor' );
+	return {
+		convertToHTML() {
+			replaceBlock( clientId, createBlock( 'core/html', {
+				content: attributes.originalUndelimitedContent,
+			} ) );
+		},
+	};
+} )( MissingBlockWarning );
+
+export const name = 'core/missing';
+
+export const settings = {
+	name,
+	category: 'common',
+	title: __( 'Unrecognized Block' ),
+	description: __( 'Your site doesn\'t include support for this block.' ),
+
+	supports: {
+		className: false,
+		customClassName: false,
+		inserter: false,
+		html: false,
+	},
+
+	attributes: {
+		originalName: {
+			type: 'string',
+		},
+		originalUndelimitedContent: {
+			type: 'string',
+		},
+		originalContent: {
+			type: 'string',
+			source: 'html',
+		},
+	},
+
+	edit,
+	save( { attributes } ) {
+		// Preserve the missing block's content.
+		return <RawHTML>{ attributes.originalContent }</RawHTML>;
+	},
+};

packages/blocks/src/api/index.js

@@ -30,6 +30,10 @@ export {
 	unregisterBlockType,
 	setUnknownTypeHandlerName,
 	getUnknownTypeHandlerName,
+	setFreeformContentHandlerName,
+	getFreeformContentHandlerName,
+	setUnregisteredTypeHandlerName,
+	getUnregisteredTypeHandlerName,
 	setDefaultBlockName,
 	getDefaultBlockName,
 	getBlockType,

packages/blocks/src/api/parser.js

@@ -15,7 +15,11 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { getBlockType, getUnknownTypeHandlerName } from './registration';
+import {
+	getBlockType,
+	getFreeformContentHandlerName,
+	getUnregisteredTypeHandlerName,
+} from './registration';
 import { createBlock } from './factory';
 import { isValidBlock } from './validation';
 import { getCommentDelimitedContent } from './serializer';
@@ -394,54 +398,61 @@ export function getMigratedBlock( block ) {
  * @return {?Object} An initialized block object (if possible).
  */
 export function createBlockWithFallback( blockNode ) {
+	const { blockName: originalName } = blockNode;
 	let {
-		blockName: name,
 		attrs: attributes,
 		innerBlocks = [],
 		innerHTML,
 	} = blockNode;
+	const freeformContentFallbackBlock = getFreeformContentHandlerName();
+	const unregisteredFallbackBlock = getUnregisteredTypeHandlerName() || freeformContentFallbackBlock;
 
 	attributes = attributes || {};
 
 	// Trim content to avoid creation of intermediary freeform segments.
-	innerHTML = innerHTML.trim();
+	const originalUndelimitedContent = innerHTML = innerHTML.trim();
 
-	// Use type from block content, otherwise find unknown handler.
-	name = name || getUnknownTypeHandlerName();
+	// Use type from block content if available. Otherwise, default to the
+	// freeform content fallback.
+	let name = originalName || freeformContentFallbackBlock;
 
 	// Convert 'core/text' blocks in existing content to 'core/paragraph'.
 	if ( 'core/text' === name || 'core/cover-text' === name ) {
 		name = 'core/paragraph';
 	}
 
-	// Try finding the type for known block name, else fall back again.
-	let blockType = getBlockType( name );
-
-	const fallbackBlock = getUnknownTypeHandlerName();
-
 	// Fallback content may be upgraded from classic editor expecting implicit
 	// automatic paragraphs, so preserve them. Assumes wpautop is idempotent,
 	// meaning there are no negative consequences to repeated autop calls.
-	if ( name === fallbackBlock ) {
+	if ( name === freeformContentFallbackBlock ) {
 		innerHTML = autop( innerHTML ).trim();
 	}
 
+	// Try finding the type for known block name, else fall back again.
+	let blockType = getBlockType( name );
+
 	if ( ! blockType ) {
 		// If detected as a block which is not registered, preserve comment
-		// delimiters in content of unknown type handler.
+		// delimiters in content of unregistered type handler.
 		if ( name ) {
 			innerHTML = getCommentDelimitedContent( name, attributes, innerHTML );
 		}
 
-		name = fallbackBlock;
+		name = unregisteredFallbackBlock;
+		attributes = { originalName, originalUndelimitedContent };
 		blockType = getBlockType( name );
 	}
 
 	// Coerce inner blocks from parsed form to canonical form.
 	innerBlocks = innerBlocks.map( createBlockWithFallback );
 
-	// Include in set only if type were determined.
-	if ( ! blockType || ( ! innerHTML && name === fallbackBlock ) ) {
+	const isFallbackBlock = (
+		name === freeformContentFallbackBlock ||
+		name === unregisteredFallbackBlock
+	);
+
+	// Include in set only if type was determined.
+	if ( ! blockType || ( ! innerHTML && isFallbackBlock ) ) {
 		return;
 	}
 
@@ -455,7 +466,7 @@ export function createBlockWithFallback( blockNode ) {
 	// provided there are no changes in attributes. The validation procedure thus compares the
 	// provided source value with the serialized output before there are any modifications to
 	// the block. When both match, the block is marked as valid.
-	if ( name !== fallbackBlock ) {
+	if ( ! isFallbackBlock ) {
 		block.isValid = isValidBlock( innerHTML, blockType, block.attributes );
 	}
 

packages/blocks/src/api/registration.js

@@ -10,6 +10,7 @@ import { get, isFunction, some } from 'lodash';
  */
 import { applyFilters, addFilter } from '@wordpress/hooks';
 import { select, dispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -177,7 +178,12 @@ export function unregisterBlockType( name ) {
  * @param {string} name Block name.
  */
 export function setUnknownTypeHandlerName( name ) {
-	dispatch( 'core/blocks' ).setFallbackBlockName( name );
+	deprecated( 'setUnknownTypeHandlerName', {
+		plugin: 'Gutenberg',
+		version: '4.2',
+		alternative: 'setFreeformContentHandlerName and setUnregisteredTypeHandlerName',
+	} );
+	setFreeformContentHandlerName( name );
 }
 
 /**
@@ -187,7 +193,50 @@ export function setUnknownTypeHandlerName( name ) {
  * @return {?string} Blog name.
  */
 export function getUnknownTypeHandlerName() {
-	return select( 'core/blocks' ).getFallbackBlockName();
+	deprecated( 'getUnknownTypeHandlerName', {
+		plugin: 'Gutenberg',
+		version: '4.2',
+		alternative: 'getFreeformContentHandlerName and getUnregisteredTypeHandlerName',
+	} );
+	return getFreeformContentHandlerName();
+}
+
+/**
+ * Assigns name of block for handling non-block content.
+ *
+ * @param {string} name Block name.
+ */
+export function setFreeformContentHandlerName( name ) {
+	dispatch( 'core/blocks' ).setFreeformFallbackBlockName( name );
+}
+
+/**
+ * Retrieves name of block handling non-block content, or undefined if no
+ * handler has been defined.
+ *
+ * @return {?string} Blog name.
+ */
+export function getFreeformContentHandlerName() {
+	return select( 'core/blocks' ).getFreeformFallbackBlockName();
+}
+
+/**
+ * Assigns name of block handling unregistered block types.
+ *
+ * @param {string} name Block name.
+ */
+export function setUnregisteredTypeHandlerName( name ) {
+	dispatch( 'core/blocks' ).setUnregisteredFallbackBlockName( name );
+}
+
+/**
+ * Retrieves name of block handling unregistered block types, or undefined if no
+ * handler has been defined.
+ *
+ * @return {?string} Blog name.
+ */
+export function getUnregisteredTypeHandlerName() {
+	return select( 'core/blocks' ).getUnregisteredFallbackBlockName();
 }
 
 /**