Text Editor: Adding new lines between blocks and inside block content (…

…#663)

* Text Editor: Adding new lines between blocks and inside block content
* Text Editor: Beautify the HTML output

blocks/api/parser.js

@@ -73,20 +73,21 @@ export function createBlockWithFallback( blockType, rawContent, attributes ) {
 
 	// Try finding settings for known block type, else again fall back
 	let blockSettings = getBlockSettings( blockType );
+	const fallbackBlockType = getUnknownTypeHandler();
 	if ( ! blockSettings ) {
-		blockType = getUnknownTypeHandler();
+		blockType = fallbackBlockType;
 		blockSettings = getBlockSettings( blockType );
 	}
 
 	// Include in set only if settings were determined
 	// TODO do we ever expect there to not be an unknown type handler?
-	if ( blockSettings ) {
+	if ( blockSettings && ( rawContent.trim() || blockType !== fallbackBlockType ) ) {
 		// 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(
 			blockType,
-			getBlockAttributes( blockSettings, rawContent, attributes )
+			getBlockAttributes( blockSettings, rawContent.trim(), attributes )
 		);
 		return block;
 	}

blocks/api/serializer.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { difference } from 'lodash';
+import { html as beautifyHtml } from 'js-beautify';
 
 /**
  * Internal dependencies
@@ -73,6 +74,10 @@ export default function serialize( blocks ) {
 		const blockType = block.blockType;
 		const settings = getBlockSettings( blockType );
 		const saveContent = getSaveContent( settings.save, block.attributes );
+		const beautifyOptions = {
+			indent_inner_html: true,
+			wrap_line_length: 0
+		};
 
 		return memo + (
 			'<!-- wp:' +
@@ -83,10 +88,10 @@ export default function serialize( blocks ) {
 				parseBlockAttributes( saveContent, settings )
 			) +
 			'-->' +
-			saveContent +
+			( saveContent ? '\n' + beautifyHtml( saveContent, beautifyOptions ) + '\n' : '' ) +
 			'<!-- /wp:' +
 			blockType +
 			' -->'
-		);
+		) + '\n\n';
 	}, '' );
 }

blocks/api/test/parser.js

@@ -183,7 +183,7 @@ describe( 'block parser', () => {
 					} );
 
 					const parsed = parse(
-						'<!-- wp:core/test-block -->Ribs<!-- /wp:core/test-block -->' +
+						'<!-- wp:core/test-block -->\nRibs\n<!-- /wp:core/test-block -->' +
 						'<p>Broccoli</p>' +
 						'<!-- wp:core/unknown-block -->Ribs<!-- /wp:core/unknown-block -->'
 					);
@@ -232,7 +232,7 @@ describe( 'block parser', () => {
 					const parsed = parse(
 						'<p>Cauliflower</p>' +
 						'<!-- wp:core/test-block -->Ribs<!-- /wp:core/test-block -->' +
-						'<p>Broccoli</p>' +
+						'\n<p>Broccoli</p>\n' +
 						'<!-- wp:core/test-block -->Ribs<!-- /wp:core/test-block -->' +
 						'<p>Romanesco</p>'
 					);

blocks/api/test/serializer.js

@@ -109,7 +109,7 @@ describe( 'block serializer', () => {
 					}
 				}
 			];
-			const expectedPostContent = '<!-- wp:core/test-block align:left --><p>Ribs & Chicken</p><!-- /wp:core/test-block -->';
+			const expectedPostContent = '<!-- wp:core/test-block align:left -->\n<p>Ribs & Chicken</p>\n<!-- /wp:core/test-block -->\n\n';
 
 			expect( serialize( blockList ) ).to.eql( expectedPostContent );
 		} );

package.json

@@ -64,6 +64,7 @@
     "element-closest": "^2.0.2",
     "hpq": "^1.2.0",
     "jed": "^1.1.1",
+    "js-beautify": "^1.6.12",
     "lodash": "^4.17.4",
     "react": "^15.5.4",
     "react-autosize-textarea": "^0.4.2",