Framework: Create custom React serializer

blocks/api/raw-handling/test/integration/evernote-out.html

@@ -56,5 +56,5 @@
 <!-- /wp:table -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="" alt="" /></figure>
+<figure class="wp-block-image"><img/></figure>
 <!-- /wp:image -->

blocks/api/raw-handling/test/integration/google-docs-out.html

@@ -60,6 +60,6 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" alt="" /></figure>
+<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" /></figure>
 <!-- /wp:image -->
 

blocks/api/raw-handling/test/integration/ms-word-online-out.html

@@ -50,5 +50,5 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="" alt="" /></figure>
+<figure class="wp-block-image"><img/></figure>
 <!-- /wp:image -->

blocks/api/raw-handling/test/integration/ms-word-out.html

@@ -85,5 +85,5 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="" alt="" /></figure>
+<figure class="wp-block-image"><img/></figure>
 <!-- /wp:image -->

blocks/api/raw-handling/test/integration/one-image-out.html

@@ -1,3 +1,3 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" /></figure>
 <!-- /wp:image -->

blocks/api/raw-handling/test/integration/two-images-out.html

@@ -1,7 +1,7 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" /></figure>
 <!-- /wp:image -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" /></figure>
 <!-- /wp:image -->

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 src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio></figure>
 <!-- /wp:audio -->

blocks/test/fixtures/core__code.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:code -->
 <pre class="wp-block-code"><code>export default function MyButton() {
-	return &lt;Button&gt;Click Me!&lt;/Button&gt;;
+	return &lt;Button>Click Me!&lt;/Button>;
 }</code></pre>
 <!-- /wp:code -->

blocks/test/fixtures/core__image.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></figure>
+<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" /></figure>
 <!-- /wp:image -->

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" alt="" />
-    <figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption>
+<figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" />
+    <figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption>
 </figure>
 <!-- /wp:image -->

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 src="https://awesome-fake.video/file.mp4"></video></figure>
 <!-- /wp:video -->

element/index.js

@@ -3,7 +3,6 @@
  */
 import { createElement, Component, cloneElement, Children, Fragment } from 'react';
 import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
-import { renderToStaticMarkup } from 'react-dom/server';
 import {
 	camelCase,
 	flowRight,
@@ -12,6 +11,11 @@ import {
 	isEmpty,
 } 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.
@@ -89,7 +93,7 @@ export { createPortal };
  * @return {string} HTML.
  */
 export function renderToString( element ) {
-	let rendered = renderToStaticMarkup( element );
+	let rendered = serialize( element );
 
 	// Drop raw HTML wrappers (support dangerous inner HTML without wrapper)
 	rendered = rendered.replace( /<\/?wp-raw-html>/g, '' );