moar updates

WordPress · Jun 14, 2017 · f4fd462 · f4fd462
1 parent 278ca5e
commit f4fd462
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/blocks/api/post.pegjs b/blocks/api/post.pegjs
@@ -45,7 +45,7 @@ WP_Block_Html
   }
 
 WP_Block_Start
-  = "<!--" __ "wp:" blockName:WP_Block_Name attrs:HTML_Attribute_List _? "-->"
+  = "<!--" __ "wp:" blockName:WP_Block_Name attrs:HTML_Attribute_List __ "-->"
   { return {
     blockName: blockName,
     attrs: attrs
@@ -78,9 +78,9 @@ HTML_Attribute_Unquoted
   { return keyValue( name, value ) }
 
 HTML_Attribute_Quoted
-  = name:HTML_Attribute_Name _* "=" _* '"' value:$(("\\" '"' . / !'"' .)*) '"'
+  = name:HTML_Attribute_Name _* "=" _* '"' value:$(('\\"' . / !'"' .)*) '"'
   { return keyValue( name, value ) }
-  / name:HTML_Attribute_Name _* "=" _* "'" value:$(("\\" "'" . / !"'" .)*) "'"
+  / name:HTML_Attribute_Name _* "=" _* "'" value:$(("\\'" . / !"'" .)*) "'"
   { return keyValue( name, value ) }
 
 HTML_Attribute_Name

diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js
@@ -75,39 +75,51 @@ export function getCommentAttributes( allAttributes, attributesFromContent ) {
 	);
 }
 
+/**
+ * Lodash iterator which transforms a key: value
+ * pair into a string of `key="value"`
+ *
+ * @param {*}        value value to be stringified
+ * @param {String}   key   name of value
+ * @returns {string}       stringified equality pair
+ */
+function asNameValuePair( value, key ) {
+	return `${ key }="${ value }`;
+}
+
+export function serializeBlock( block ) {
+	const blockName = block.name;
+	const blockType = getBlockType( blockName );
+	const saveContent = getSaveContent( blockType.save, block.attributes );
+	const saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType ) );
+
+	const serializedAttributes = ! isEmpty( saveAttributes )
+		? map( saveAttributes, asNameValuePair ).join( ' ' ) + ' '
+		: '';
+
+	if ( ! saveContent ) {
+		return `<!-- wp:${ blockName } ${ serializedAttributes }--><!-- /wp:${ blockName } -->`;
+	}
+
+	return (
+		`<!-- wp:${ blockName } ${ serializedAttributes }-->\n` +
+
+		/** make more readable - @see https://github.com/WordPress/gutenberg/pull/663 */
+		beautifyHtml( saveContent, {
+			indent_inner_html: true,
+			wrap_line_length: 0,
+		} ) +
+
+		`\n<!-- /wp:${ blockName } -->`
+	);
+}
+
 /**
  * Takes a block list and returns the serialized post content.
  *
  * @param  {Array}  blocks Block list
  * @return {String}        The post content
  */
 export default function serialize( blocks ) {
-	return blocks
-		.map( block => {
-			const blockName = block.name;
-			const blockType = getBlockType( blockName );
-			const saveContent = getSaveContent( blockType.save, block.attributes );
-			const saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType ) );
-
-			const serializedAttributes = ! isEmpty( saveAttributes )
-				? map( saveAttributes, ( value, key ) => `${ key }="${ value }"` ).join( ' ' ) + ' '
-				: '';
-
-			if ( ! saveContent ) {
-				return `<!-- wp:${ blockName } ${ serializedAttributes }--><!-- /wp:${ blockName } -->`;
-			}
-
-			return [
-				`<!-- wp:${ blockName } ${ serializedAttributes }-->`,
-
-				/** make more readable - @see https://github.com/WordPress/gutenberg/pull/663 */
-				beautifyHtml( saveContent, {
-					indent_inner_html: true,
-					wrap_line_length: 0,
-				} ),
-
-				`<!-- /wp:${ blockName } -->`,
-			].join( '\n' );
-		} )
-		.join( '\n\n' );
+	return blocks.map( serializeBlock ).join( '\n\n' );
 }
diff --git a/post-content.js b/post-content.js
@@ -7,7 +7,7 @@ window._wpGutenbergPost = {
 	},
 	content: {
 		raw: [
-			'<!-- wp:core/text data="{\\"projectName\\":\\"gutenberg\\",\\"isAwesome\\":true}"-->',
+			'<!-- 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 -->',