Blocks: Preserve unknown block comment delimiters

WordPress · Aug 23, 2017 · 0591ae9 · 0591ae9
1 parent df1b993
commit 0591ae9
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 16 deletions.
diff --git a/blocks/api/parser.js b/blocks/api/parser.js
@@ -11,6 +11,7 @@ import { parse as grammarParse } from './post.pegjs';
 import { getBlockType, getUnknownTypeHandlerName } from './registration';
 import { createBlock } from './factory';
 import { isValidBlock } from './validation';
+import { getCommentDelimitedContent } from './serializer';
 
 /**
  * Returns true if the provided function is a valid attribute source, or false
@@ -177,6 +178,12 @@ export function createBlockWithFallback( name, rawContent, attributes ) {
 	let blockType = getBlockType( name );
 	const fallbackBlock = getUnknownTypeHandlerName();
 	if ( ! blockType ) {
+		// If detected as a block which is not registered, preserve comment
+		// delimiters in content of uknown type handler.
+		if ( name ) {
+			rawContent = getCommentDelimitedContent( name, attributes, rawContent );
+		}
+
 		name = fallbackBlock;
 		blockType = getBlockType( name );
 	}

diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js
@@ -139,6 +139,30 @@ export function getBeautifulContent( content ) {
 	} );
 }
 
+/**
+ * Returns the content of a block, including comment delimiters.
+ *
+ * @param  {String} blockName  Block name
+ * @param  {Object} attributes Block attributes
+ * @param  {String} content    Block save content
+ * @return {String}            Comment-delimited block content
+ */
+export function getCommentDelimitedContent( blockName, attributes, content ) {
+	const serializedAttributes = ! isEmpty( attributes )
+		? serializeAttributes( attributes ) + ' '
+		: '';
+
+	if ( ! content ) {
+		return `<!-- wp:${ blockName } ${ serializedAttributes }/-->`;
+	}
+
+	return (
+		`<!-- wp:${ blockName } ${ serializedAttributes }-->\n` +
+		getBeautifulContent( content ) +
+		`\n<!-- /wp:${ blockName } -->`
+	);
+}
+
 export function serializeBlock( block ) {
 	const blockName = block.name;
 	const blockType = getBlockType( blockName );
@@ -158,19 +182,7 @@ export function serializeBlock( block ) {
 		return `<!--more${ saveAttributes.text ? ` ${ saveAttributes.text }` : '' }-->${ saveAttributes.noTeaser ? '\n<!--noteaser-->' : '' }`;
 	}
 
-	const serializedAttributes = ! isEmpty( saveAttributes )
-		? serializeAttributes( saveAttributes ) + ' '
-		: '';
-
-	if ( ! saveContent ) {
-		return `<!-- wp:${ blockName } ${ serializedAttributes }/-->`;
-	}
-
-	return (
-		`<!-- wp:${ blockName } ${ serializedAttributes }-->\n` +
-		getBeautifulContent( saveContent ) +
-		`\n<!-- /wp:${ blockName } -->`
-	);
+	return getCommentDelimitedContent( blockName, saveAttributes, saveContent );
 }
 
 /**

diff --git a/blocks/api/test/parser.js b/blocks/api/test/parser.js
@@ -199,16 +199,29 @@ describe( 'block parser', () => {
 		} );
 
 		it( 'should fall back to the unknown type handler for unknown blocks if present', () => {
-			registerBlockType( 'core/unknown-block', defaultBlockSettings );
+			registerBlockType( 'core/unknown-block', {
+				category: 'common',
+				attributes: {
+					content: {
+						type: 'string',
+						source: html(),
+					},
+					fruit: {
+						type: 'string',
+					},
+				},
+				save: ( { attributes } ) => attributes.content,
+			} );
 			setUnknownTypeHandlerName( 'core/unknown-block' );
 
 			const block = createBlockWithFallback(
 				'core/test-block',
 				'content',
 				{ fruit: 'Bananas' }
 			);
-			expect( block.name ).toEqual( 'core/unknown-block' );
-			expect( block.attributes ).toEqual( { fruit: 'Bananas' } );
+			expect( block.name ).toBe( 'core/unknown-block' );
+			expect( block.attributes.fruit ).toBe( 'Bananas' );
+			expect( block.attributes.content ).toContain( 'core/test-block' );
 		} );
 
 		it( 'should fall back to the unknown type handler if block type not specified', () => {

diff --git a/blocks/api/test/serializer.js b/blocks/api/test/serializer.js
@@ -12,6 +12,7 @@ import serialize, {
 	getBeautifulContent,
 	getSaveContent,
 	serializeAttributes,
+	getCommentDelimitedContent,
 } from '../serializer';
 import { getBlockTypes, registerBlockType, unregisterBlockType } from '../registration';
 import { createBlock } from '../';
@@ -210,6 +211,52 @@ describe( 'block serializer', () => {
 		} );
 	} );
 
+	describe( 'getCommentDelimitedContent()', () => {
+		it( 'should generate empty attributes void', () => {
+			const content = getCommentDelimitedContent(
+				'core/test-block',
+				{},
+				''
+			);
+
+			expect( content ).toBe( '<!-- wp:core/test-block /-->' );
+		} );
+
+		it( 'should generate empty attributes non-void', () => {
+			const content = getCommentDelimitedContent(
+				'core/test-block',
+				{},
+				'Delicious'
+			);
+
+			expect( content ).toBe( '<!-- wp:core/test-block -->\nDelicious\n<!-- /wp:core/test-block -->' );
+		} );
+
+		it( 'should generate non-empty attributes void', () => {
+			const content = getCommentDelimitedContent(
+				'core/test-block',
+				{ fruit: 'Banana' },
+				''
+			);
+
+			expect( content ).toBe(
+				'<!-- wp:core/test-block {"fruit":"Banana"} /-->'
+			);
+		} );
+
+		it( 'should generate non-empty attributes non-void', () => {
+			const content = getCommentDelimitedContent(
+				'core/test-block',
+				{ fruit: 'Banana' },
+				'Delicious'
+			);
+
+			expect( content ).toBe(
+				'<!-- wp:core/test-block {"fruit":"Banana"} -->\nDelicious\n<!-- /wp:core/test-block -->'
+			);
+		} );
+	} );
+
 	describe( 'serialize()', () => {
 		it( 'should serialize the post content properly', () => {
 			const blockType = {