From f4fd462218246133667dcac2b2cd522c2ac2a99b Mon Sep 17 00:00:00 2001 From: Dennis Snell Date: Tue, 13 Jun 2017 22:37:19 +0200 Subject: [PATCH] moar updates --- blocks/api/post.pegjs | 6 ++-- blocks/api/serializer.js | 68 +++++++++++++++++++++++----------------- post-content.js | 2 +- 3 files changed, 44 insertions(+), 32 deletions(-) diff --git a/blocks/api/post.pegjs b/blocks/api/post.pegjs index 79bf7d13dbd2fc..15bcce0713e8dc 100644 --- a/blocks/api/post.pegjs +++ b/blocks/api/post.pegjs @@ -45,7 +45,7 @@ WP_Block_Html } WP_Block_Start - = "" + = "" { 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 index bf05647227c7f3..93ee6c461c3400 100644 --- a/blocks/api/serializer.js +++ b/blocks/api/serializer.js @@ -75,6 +75,45 @@ 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 ``; + } + + return ( + `\n` + + + /** make more readable - @see https://github.com/WordPress/gutenberg/pull/663 */ + beautifyHtml( saveContent, { + indent_inner_html: true, + wrap_line_length: 0, + } ) + + + `\n` + ); +} + /** * Takes a block list and returns the serialized post content. * @@ -82,32 +121,5 @@ export function getCommentAttributes( allAttributes, attributesFromContent ) { * @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 ``; - } - - return [ - ``, - - /** make more readable - @see https://github.com/WordPress/gutenberg/pull/663 */ - beautifyHtml( saveContent, { - indent_inner_html: true, - wrap_line_length: 0, - } ), - - ``, - ].join( '\n' ); - } ) - .join( '\n\n' ); + return blocks.map( serializeBlock ).join( '\n\n' ); } diff --git a/post-content.js b/post-content.js index 8317d2b64ae3a6..3905a9a75b0cd9 100644 --- a/post-content.js +++ b/post-content.js @@ -7,7 +7,7 @@ window._wpGutenbergPost = { }, content: { raw: [ - '', + '', '

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—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.

', '

What you are reading now is a text block, 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...

', '',