Parser: Add "void" block signature (#1134)

blocks/api/post.pegjs

@@ -15,9 +15,18 @@ WP_Block_List
   = WP_Block*
 
 WP_Block
-  = WP_Block_Balanced
+  = WP_Block_Void
+  / WP_Block_Balanced
   / WP_Block_Html
 
+WP_Block_Void
+  = "<!--" __ "wp:" blockType:WP_Block_Type attrs:HTML_Attribute_List _? "/-->"
+  { return {
+    blockType: blockType,
+    attrs: attrs,
+    rawContent: ''
+  } }
+
 WP_Block_Balanced
   = s:WP_Block_Start ts:(!WP_Block_End c:Any { return c })* e:WP_Block_End & { return s.blockType === e.blockType }
   { return {

blocks/api/serializer.js

@@ -82,17 +82,19 @@ export default function serialize( blocks ) {
 			indent_inner_html: true,
 			wrap_line_length: 0,
 		};
+		const blockAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType ) );
+
+		if ( ! saveContent ) {
+			return memo + '<!-- wp:' + blockName + ' ' + blockAttributes + '/-->\n\n';
+		}
 
 		return memo + (
 			'<!-- wp:' +
 			blockName +
 			' ' +
-			getCommentAttributes(
-				block.attributes,
-				parseBlockAttributes( saveContent, blockType )
-			) +
+			blockAttributes +
 			'-->' +
-			( saveContent ? '\n' + beautifyHtml( saveContent, beautifyOptions ) + '\n' : '' ) +
+			'\n' + beautifyHtml( saveContent, beautifyOptions ) + '\n' +
 			'<!-- /wp:' +
 			blockName +
 			' -->'

blocks/test/fixtures/core-button-center.html

@@ -1,3 +1,3 @@
 <!-- wp:core/button align="center" -->
-<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg"><span>Help build Gutenberg</span></a></div>
+<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
 <!-- /wp:core/button -->

blocks/test/fixtures/core-freeform.json

@@ -4,13 +4,13 @@
         "name": "core/freeform",
         "attributes": {
             "content": [
-                "Testing freeform block with some",
+                "Testing freeform block with some\n",
                 {
                     "attributes": {
                         "className": "wp-some-class"
                     },
                     "children": [
-                        "HTML ",
+                        "\n\tHTML ",
                         {
                             "attributes": {
                                 "style": {
@@ -19,7 +19,8 @@
                             },
                             "children": "content",
                             "type": "span"
-                        }
+                        },
+                        "\n"
                     ],
                     "type": "div"
                 }

blocks/test/fixtures/core-freeform.serialized.html

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

blocks/test/fixtures/core-latestposts.html

@@ -1,2 +1,2 @@
-<!-- wp:core/latestposts poststoshow="5" --><!-- /wp:core/latestposts -->
+<!-- wp:core/latestposts poststoshow="5" /-->
 

blocks/test/fixtures/core-latestposts.serialized.html

@@ -1,2 +1,2 @@
-<!-- wp:core/latestposts poststoshow="5" --><!-- /wp:core/latestposts -->
+<!-- wp:core/latestposts poststoshow="5" /-->
 

blocks/test/fixtures/core-text-multi-paragraph.json

@@ -15,6 +15,7 @@
                         "—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you'll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting."
                     ]
                 },
+                "\n",
                 {
                     "type": "p",
                     "children": [

blocks/test/full-content.js

@@ -10,10 +10,7 @@ import { format } from 'util';
 /**
  * Internal dependencies
  */
-import {
-	// parseWithGrammar,
-	parseWithTinyMCE,
-} from '../api/parser';
+import parse from '../api/parser';
 import serialize from '../api/serializer';
 import { getBlockTypes } from '../api/registration';
 
@@ -94,7 +91,7 @@ describe( 'full post content fixture', () => {
 		it( f, () => {
 			const content = readFixtureFile( f + '.html' );
 
-			const blocksActual = parseWithTinyMCE( content );
+			const blocksActual = parse( content );
 			const blocksActualNormalized = normalizeParsedBlocks( blocksActual );
 			let blocksExpectedString = readFixtureFile( f + '.json' );
 

post-content.js

@@ -16,6 +16,8 @@ window._wpGutenbergPost = {
 			'<p style="text-align:right;">... like this one, which is separate from the above and right aligned.</p>',
 			'<!-- /wp:core/text -->',
 
+			'<!-- wp:core/more /-->',
+
 			'<!-- wp:core/text -->',
 			'<p>Headings are separate blocks as well, which helps with the outline and organization of your content.</p>',
 			'<!-- /wp:core/text -->',