Parser: Allow escaped quotes in attribute strings (#1130)

* Parser: Accept JSON-encoded attributes

Previously the parser would fail handling attributes with escaped quotes
in them. For example, 'data="a\"a"' would fail because the parser
attempted to grab only `a\` instead of `a\"a`.

This has been fixed by indicating that a valid value is _either_ an
escaped quote _or_ any character other than a quote.

blocks/api/post.pegjs

@@ -1,3 +1,13 @@
+{
+
+function keyValue( key, value ) {
+  const o = {};
+  o[ key ] = value;
+  return o;
+}
+
+}
+
 Document
   = WP_Block_List
 
@@ -43,14 +53,7 @@ WP_Block_Type
 
 HTML_Attribute_List
   = as:(_+ a:HTML_Attribute_Item { return a })*
-  { return as.reduce( function( attrs, currentAttribute ) {
-			var currentAttrs = {};
-			currentAttrs[ currentAttribute[ 0 ] ] = currentAttribute[ 1 ];
-			return Object.assign(
-				attrs,
-				currentAttrs
-			);
-	}, {} ) }
+  { return as.reduce( function( attrs, attr ) { return Object.assign( attrs, attr ) }, {} ) }
 
 HTML_Attribute_Item
   = HTML_Attribute_Quoted
@@ -59,17 +62,17 @@ HTML_Attribute_Item
 
 HTML_Attribute_Empty
   = name:HTML_Attribute_Name
-  { return [ name, true ] }
+  { return keyValue( name, true ) }
 
 HTML_Attribute_Unquoted
   = name:HTML_Attribute_Name _* "=" _* value:$([a-zA-Z0-9]+)
-  { return [ name, value ] }
+  { return keyValue( name, value ) }
 
 HTML_Attribute_Quoted
-  = name:HTML_Attribute_Name _* "=" _* '"' value:$((!'"' .)*) '"'
-  { return [ name, value ] }
-  / name:HTML_Attribute_Name _* "=" _* "'" value:$((!"'" .)*) "'"
-  { return [ name, value ] }
+  = name:HTML_Attribute_Name _* "=" _* '"' value:$(('\\"' . / !'"' .)*) '"'
+  { return keyValue( name, value ) }
+  / name:HTML_Attribute_Name _* "=" _* "'" value:$(("\\'" . / !"'" .)*) "'"
+  { return keyValue( name, value ) }
 
 HTML_Attribute_Name
   = $([a-zA-Z0-9:.]+)

blocks/api/test/parser.js

@@ -156,7 +156,7 @@ describe( 'block parser', () => {
 					} );
 
 					const parsed = parse(
-						'<!-- wp:core/test-block smoked="yes" url="http://google.com" chicken="ribs & \'wings\'" checked -->' +
+						'<!-- wp:core/test-block smoked="yes" url="http://google.com" chicken="ribs & \'wings\'" -->' +
 						'Brisket' +
 						'<!-- /wp:core/test-block -->'
 					);
@@ -168,7 +168,6 @@ describe( 'block parser', () => {
 						smoked: 'yes',
 						url: 'http://google.com',
 						chicken: 'ribs & \'wings\'',
-						checked: true,
 					} );
 					expect( parsed[ 0 ].uid ).to.be.a( 'string' );
 				} );

post-content.js

@@ -7,7 +7,7 @@ window._wpGutenbergPost = {
 	},
 	content: {
 		raw: [
-			'<!-- wp:core/text -->',
+			'<!-- wp:core/text data="{\\"projectName\\":\\"gutenberg\\",\\"isAwesome\\":true}"-->',
 			'<p>The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—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.</p>',
 			'<p>What you are reading now is a <strong>text block</strong>, the most basic block of all. A text block can have multiple paragraphs, if that\'s how you prefer to write your posts. But you can also split it by hitting enter twice. Once blocks are split they get their own controls to be moved freely around the post...</p>',
 			'<!-- /wp:core/text -->',