Parser: Apply autop to fallback block content

blocks/api/parser.js

@@ -4,6 +4,11 @@
 import { parse as hpqParse } from 'hpq';
 import { mapValues, omit } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { autop } from '@wordpress/autop';
+
 /**
  * Internal dependencies
  */
@@ -175,7 +180,16 @@ export function createBlockWithFallback( name, innerHTML, attributes ) {
 
 	// Try finding 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 ) {
+		innerHTML = autop( innerHTML ).trim();
+	}
+
 	if ( ! blockType ) {
 		// If detected as a block which is not registered, preserve comment
 		// delimiters in content of unknown type handler.
@@ -188,40 +202,41 @@ export function createBlockWithFallback( name, innerHTML, attributes ) {
 	}
 
 	// Include in set only if type were determined.
-	// TODO do we ever expect there to not be an unknown type handler?
-	if ( blockType && ( innerHTML || name !== fallbackBlock ) ) {
-		// TODO allow blocks to opt-in to receiving a tree instead of a string.
-		// Gradually convert all blocks to this new format, then remove the
-		// string serialization.
-		const block = createBlock(
-			name,
-			getBlockAttributes( blockType, innerHTML, attributes )
-		);
+	if ( ! blockType || ( ! innerHTML && name === fallbackBlock ) ) {
+		return;
+	}
+
+	const block = createBlock(
+		name,
+		getBlockAttributes( blockType, innerHTML, attributes )
+	);
 
-		// Validate that the parsed block is valid, meaning that if we were to
-		// reserialize it given the assumed attributes, the markup matches the
-		// original value.
+	// Validate that the parsed block is valid, meaning that if we were to
+	// reserialize it given the assumed attributes, the markup matches the
+	// original value.
+	if ( name !== fallbackBlock ) {
 		block.isValid = isValidBlock( innerHTML, blockType, block.attributes );
+	}
 
-		// Preserve original content for future use in case the block is parsed
-		// as invalid, or future serialization attempt results in an error
-		block.originalContent = innerHTML;
-
-		// When a block is invalid, attempt to parse it using a supplied `deprecated` definition.
-		// This allows blocks to modify their attribute and markup structure without invalidating
-		// content written in previous formats.
-		if ( ! block.isValid ) {
-			const attributesParsedWithDeprecatedVersion = getAttributesFromDeprecatedVersion(
-				blockType, innerHTML, attributes
-			);
-			if ( attributesParsedWithDeprecatedVersion ) {
-				block.isValid = true;
-				block.attributes = attributesParsedWithDeprecatedVersion;
-			}
-		}
+	// Preserve original content for future use in case the block is parsed as
+	// invalid, or future serialization attempt results in an error.
+	block.originalContent = innerHTML;
 
-		return block;
+	// When block is invalid, attempt to parse it using deprecated definition.
+	// This enables blocks to modify attribute and markup structure without
+	// invalidating content written in previous formats.
+	if ( ! block.isValid ) {
+		const attributesParsedWithDeprecatedVersion = getAttributesFromDeprecatedVersion(
+			blockType, innerHTML, attributes
+		);
+
+		if ( attributesParsedWithDeprecatedVersion ) {
+			block.isValid = true;
+			block.attributes = attributesParsedWithDeprecatedVersion;
+		}
 	}
+
+	return block;
 }
 
 /**

blocks/api/test/parser.js

@@ -267,7 +267,7 @@ describe( 'block parser', () => {
 
 			const block = createBlockWithFallback( null, 'content' );
 			expect( block.name ).toEqual( 'core/unknown-block' );
-			expect( block.attributes ).toEqual( { content: 'content' } );
+			expect( block.attributes ).toEqual( { content: '<p>content</p>' } );
 		} );
 
 		it( 'should not create a block if no unknown type handler', () => {

blocks/test/fixtures/core__4-invalid-starting-letter.json

@@ -4,8 +4,8 @@
         "name": "core/freeform",
         "isValid": true,
         "attributes": {
-            "content": "<!-- wp:core/4-invalid /-->"
+            "content": "<p><!-- wp:core/4-invalid /--></p>"
         },
-        "originalContent": "<!-- wp:core/4-invalid /-->"
+        "originalContent": "<p><!-- wp:core/4-invalid /--></p>"
     }
 ]

blocks/test/fixtures/core__4-invalid-starting-letter.serialized.html

@@ -1 +1 @@
-<!-- wp:core/4-invalid /-->
+<p><!-- wp:core/4-invalid /--></p>

blocks/test/fixtures/core__freeform.json

@@ -4,8 +4,8 @@
         "name": "core/freeform",
         "isValid": true,
         "attributes": {
-            "content": "Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
+            "content": "<p>Testing freeform block with some\n</p><div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
         },
-        "originalContent": "Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
+        "originalContent": "<p>Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
     }
 ]

blocks/test/fixtures/core__freeform.serialized.html

@@ -1,4 +1,4 @@
-Testing freeform block with some
-<div class="wp-some-class">
+<p>Testing freeform block with some
+</p><div class="wp-some-class">
 	HTML <span style="color: red;">content</span>
 </div>

blocks/test/fixtures/core__freeform__undelimited.json

@@ -4,8 +4,8 @@
         "name": "core/freeform",
         "isValid": true,
         "attributes": {
-            "content": "Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
+            "content": "<p>Testing freeform block with some\n</p><div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
         },
-        "originalContent": "Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
+        "originalContent": "<p>Testing freeform block with some\n<div class=\"wp-some-class\">\n\tHTML <span style=\"color: red;\">content</span>\n</div>"
     }
 ]

blocks/test/fixtures/core__freeform__undelimited.serialized.html

@@ -1,4 +1,4 @@
-Testing freeform block with some
-<div class="wp-some-class">
+<p>Testing freeform block with some
+</p><div class="wp-some-class">
 	HTML <span style="color: red;">content</span>
 </div>

blocks/test/fixtures/core__invalid-Capitals.json

@@ -4,8 +4,8 @@
         "name": "core/freeform",
         "isValid": true,
         "attributes": {
-            "content": "<!-- wp:core/invalid-Capitals /-->"
+            "content": "<p><!-- wp:core/invalid-Capitals /--></p>"
         },
-        "originalContent": "<!-- wp:core/invalid-Capitals /-->"
+        "originalContent": "<p><!-- wp:core/invalid-Capitals /--></p>"
     }
 ]

blocks/test/fixtures/core__invalid-Capitals.serialized.html

@@ -1 +1 @@
-<!-- wp:core/invalid-Capitals /-->
+<p><!-- wp:core/invalid-Capitals /--></p>

blocks/test/fixtures/core__invalid-special.json

@@ -4,8 +4,8 @@
         "name": "core/freeform",
         "isValid": true,
         "attributes": {
-            "content": "<!-- wp:core/invalid-$special /-->"
+            "content": "<p><!-- wp:core/invalid-$special /--></p>"
         },
-        "originalContent": "<!-- wp:core/invalid-$special /-->"
+        "originalContent": "<p><!-- wp:core/invalid-$special /--></p>"
     }
 ]

blocks/test/fixtures/core__invalid-special.serialized.html

@@ -1 +1 @@
-<!-- wp:core/invalid-$special /-->
+<p><!-- wp:core/invalid-$special /--></p>

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@wordpress/a11y": "0.1.0-beta.1",
+    "@wordpress/autop": "1.0.0",
     "@wordpress/hooks": "1.0.1",
     "@wordpress/url": "0.1.0-beta.1",
     "classnames": "2.2.5",