Framework: Create custom React serializer

WordPress · Dec 15, 2017 · ff695ba · ff695ba
1 parent bbf06e2
commit ff695ba
Show file tree

Hide file tree

Showing 15 changed files with 396 additions and 25 deletions.
diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -176,7 +176,7 @@ registerBlockType( 'core/audio', {
 		const { align, src, caption } = attributes;
 		return (
 			<figure className={ align ? `align${ align }` : null }>
-				<audio controls="controls" src={ src } />
+				<audio controls src={ src } />
 				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
 			</figure>
 		);

diff --git a/blocks/library/code/index.js b/blocks/library/code/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
+import { escape as escapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -75,6 +76,6 @@ registerBlockType( 'core/code', {
 	},
 
 	save( { attributes } ) {
-		return <pre><code>{ attributes.content }</code></pre>;
+		return <pre><code>{ escapeString( attributes.content ) }</code></pre>;
 	},
 } );
diff --git a/blocks/test/fixtures/core__audio.html b/blocks/test/fixtures/core__audio.html
@@ -1,5 +1,5 @@
 <!-- wp:core/audio {"align":"right"} -->
 <figure class="wp-block-audio alignright">
-    <audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio>
+    <audio controls="true" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio>
 </figure>
 <!-- /wp:core/audio -->
diff --git a/blocks/test/fixtures/core__audio.json b/blocks/test/fixtures/core__audio.json
@@ -8,6 +8,6 @@
             "align": "right",
             "caption": []
         },
-        "originalContent": "<figure class=\"wp-block-audio alignright\">\n    <audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</figure>"
+        "originalContent": "<figure class=\"wp-block-audio alignright\">\n    <audio controls=\"true\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</figure>"
     }
 ]
diff --git a/blocks/test/fixtures/core__audio.parsed.json b/blocks/test/fixtures/core__audio.parsed.json
@@ -5,7 +5,7 @@
             "align": "right"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-audio alignright\">\n    <audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-audio alignright\">\n    <audio controls=\"true\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</figure>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__audio.serialized.html b/blocks/test/fixtures/core__audio.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:audio {"align":"right"} -->
-<figure class="wp-block-audio alignright"><audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio></figure>
+<figure class="wp-block-audio alignright"><audio controls="true" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio></figure>
 <!-- /wp:audio -->
diff --git a/blocks/test/fixtures/core__image__center-caption.serialized.html b/blocks/test/fixtures/core__image__center-caption.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:image {"align":"center"} -->
 <figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" />
-    <figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption>
+    <figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption>
 </figure>
 <!-- /wp:image -->
diff --git a/blocks/test/fixtures/core__list__ul.serialized.html b/blocks/test/fixtures/core__list__ul.serialized.html
@@ -1,7 +1,7 @@
 <!-- wp:list -->
 <ul>
-    <li>Text &amp; Headings</li>
-    <li>Images &amp; Videos</li>
+    <li>Text & Headings</li>
+    <li>Images & Videos</li>
     <li>Galleries</li>
     <li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
     <li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>

diff --git a/blocks/test/fixtures/core__video.html b/blocks/test/fixtures/core__video.html
@@ -1,3 +1,3 @@
 <!-- wp:core/video -->
-<figure class="wp-block-video"><video src="https://awesome-fake.video/file.mp4" controls=""></video></figure>
+<figure class="wp-block-video"><video src="https://awesome-fake.video/file.mp4" controls="true"></video></figure>
 <!-- /wp:core/video -->
diff --git a/blocks/test/fixtures/core__video.json b/blocks/test/fixtures/core__video.json
@@ -7,6 +7,6 @@
             "src": "https://awesome-fake.video/file.mp4",
             "caption": []
         },
-        "originalContent": "<figure class=\"wp-block-video\"><video src=\"https://awesome-fake.video/file.mp4\" controls=\"\"></video></figure>"
+        "originalContent": "<figure class=\"wp-block-video\"><video src=\"https://awesome-fake.video/file.mp4\" controls=\"true\"></video></figure>"
     }
 ]
diff --git a/blocks/test/fixtures/core__video.parsed.json b/blocks/test/fixtures/core__video.parsed.json
@@ -3,7 +3,7 @@
         "blockName": "core/video",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-video\"><video src=\"https://awesome-fake.video/file.mp4\" controls=\"\"></video></figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-video\"><video src=\"https://awesome-fake.video/file.mp4\" controls=\"true\"></video></figure>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__video.serialized.html b/blocks/test/fixtures/core__video.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:video -->
-<figure class="wp-block-video"><video controls="" src="https://awesome-fake.video/file.mp4"></video></figure>
+<figure class="wp-block-video"><video controls="true" src="https://awesome-fake.video/file.mp4"></video></figure>
 <!-- /wp:video -->
diff --git a/element/index.js b/element/index.js
@@ -3,9 +3,13 @@
  */
 import { createElement, Component, cloneElement, Children } from 'react';
 import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { camelCase, flowRight, isString, upperFirst } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import serialize from './serialize';
+
 /**
  * Returns a new element of given type. Type can be either a string tag name or
  * another function which itself returns an element.
@@ -74,7 +78,7 @@ export { createPortal };
  * @param  {WPElement} element Element to render
  * @return {String}            HTML
  */
-export { renderToStaticMarkup as renderToString };
+export { serialize as renderToString };
 
 /**
  * Concatenate two or more React children objects