Serializer: Remove HTML beautification, preserve whitespace (#7892)

* Serializer: Remove HTML beautification, preserve whitespace

* Testing: Verify shortcode block newlines preserved

blocks/api/serializer.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { isEmpty, reduce, isObject, castArray, startsWith } from 'lodash';
-import { html as beautifyHtml } from 'js-beautify';
 
 /**
  * WordPress dependencies
@@ -189,22 +188,6 @@ export function serializeAttributes( attributes ) {
 		.replace( /\\"/g, '\\u0022' );
 }
 
-/**
- * Returns HTML markup processed by a markup beautifier configured for use in
- * block serialization.
- *
- * @param {string} content Original HTML.
- *
- * @return {string} Beautiful HTML.
- */
-export function getBeautifulContent( content ) {
-	return beautifyHtml( content, {
-		indent_inner_html: true,
-		indent_with_tabs: true,
-		wrap_line_length: 0,
-	} );
-}
-
 /**
  * Given a block object, returns the Block's Inner HTML markup.
  *
@@ -228,7 +211,7 @@ export function getBlockContent( block ) {
 		} catch ( error ) {}
 	}
 
-	return getUnknownTypeHandlerName() === block.name || ! saveContent ? saveContent : getBeautifulContent( saveContent );
+	return saveContent;
 }
 
 /**

blocks/api/test/serializer.js

@@ -8,7 +8,6 @@ import { createElement, Component } from '@wordpress/element';
  */
 import serialize, {
 	getCommentAttributes,
-	getBeautifulContent,
 	getSaveContent,
 	serializeAttributes,
 	getCommentDelimitedContent,
@@ -36,14 +35,6 @@ describe( 'block serializer', () => {
 		} );
 	} );
 
-	describe( 'getBeautifulContent()', () => {
-		it( 'returns beautiful content', () => {
-			const content = getBeautifulContent( '<div><div>Beautiful</div></div>' );
-
-			expect( content ).toBe( '<div>\n\t<div>Beautiful</div>\n</div>' );
-		} );
-	} );
-
 	describe( 'getSaveContent()', () => {
 		describe( 'function save', () => {
 			it( 'should return element as string if save returns element', () => {

core-blocks/test/fixtures/core-embed__animoto.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/animoto {"url":"https://animoto.com/"} -->
 <figure class="wp-block-embed-animoto wp-block-embed">
-	https://animoto.com/
-	<figcaption>Embedded content from animoto</figcaption>
-</figure>
+https://animoto.com/
+<figcaption>Embedded content from animoto</figcaption></figure>
 <!-- /wp:core-embed/animoto -->

core-blocks/test/fixtures/core-embed__cloudup.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/cloudup {"url":"https://cloudup.com/"} -->
 <figure class="wp-block-embed-cloudup wp-block-embed">
-	https://cloudup.com/
-	<figcaption>Embedded content from cloudup</figcaption>
-</figure>
+https://cloudup.com/
+<figcaption>Embedded content from cloudup</figcaption></figure>
 <!-- /wp:core-embed/cloudup -->

core-blocks/test/fixtures/core-embed__collegehumor.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/collegehumor {"url":"https://collegehumor.com/"} -->
 <figure class="wp-block-embed-collegehumor wp-block-embed">
-	https://collegehumor.com/
-	<figcaption>Embedded content from collegehumor</figcaption>
-</figure>
+https://collegehumor.com/
+<figcaption>Embedded content from collegehumor</figcaption></figure>
 <!-- /wp:core-embed/collegehumor -->

core-blocks/test/fixtures/core-embed__dailymotion.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/dailymotion {"url":"https://dailymotion.com/"} -->
 <figure class="wp-block-embed-dailymotion wp-block-embed">
-	https://dailymotion.com/
-	<figcaption>Embedded content from dailymotion</figcaption>
-</figure>
+https://dailymotion.com/
+<figcaption>Embedded content from dailymotion</figcaption></figure>
 <!-- /wp:core-embed/dailymotion -->

core-blocks/test/fixtures/core-embed__facebook.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/facebook {"url":"https://facebook.com/"} -->
 <figure class="wp-block-embed-facebook wp-block-embed">
-	https://facebook.com/
-	<figcaption>Embedded content from facebook</figcaption>
-</figure>
+https://facebook.com/
+<figcaption>Embedded content from facebook</figcaption></figure>
 <!-- /wp:core-embed/facebook -->

core-blocks/test/fixtures/core-embed__flickr.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/flickr {"url":"https://flickr.com/"} -->
 <figure class="wp-block-embed-flickr wp-block-embed">
-	https://flickr.com/
-	<figcaption>Embedded content from flickr</figcaption>
-</figure>
+https://flickr.com/
+<figcaption>Embedded content from flickr</figcaption></figure>
 <!-- /wp:core-embed/flickr -->

core-blocks/test/fixtures/core-embed__funnyordie.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/funnyordie {"url":"https://funnyordie.com/"} -->
 <figure class="wp-block-embed-funnyordie wp-block-embed">
-	https://funnyordie.com/
-	<figcaption>Embedded content from funnyordie</figcaption>
-</figure>
+https://funnyordie.com/
+<figcaption>Embedded content from funnyordie</figcaption></figure>
 <!-- /wp:core-embed/funnyordie -->

core-blocks/test/fixtures/core-embed__hulu.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/hulu {"url":"https://hulu.com/"} -->
 <figure class="wp-block-embed-hulu wp-block-embed">
-	https://hulu.com/
-	<figcaption>Embedded content from hulu</figcaption>
-</figure>
+https://hulu.com/
+<figcaption>Embedded content from hulu</figcaption></figure>
 <!-- /wp:core-embed/hulu -->

core-blocks/test/fixtures/core-embed__imgur.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/imgur {"url":"https://imgur.com/"} -->
 <figure class="wp-block-embed-imgur wp-block-embed">
-	https://imgur.com/
-	<figcaption>Embedded content from imgur</figcaption>
-</figure>
+https://imgur.com/
+<figcaption>Embedded content from imgur</figcaption></figure>
 <!-- /wp:core-embed/imgur -->

core-blocks/test/fixtures/core-embed__instagram.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/instagram {"url":"https://instagram.com/"} -->
 <figure class="wp-block-embed-instagram wp-block-embed">
-	https://instagram.com/
-	<figcaption>Embedded content from instagram</figcaption>
-</figure>
+https://instagram.com/
+<figcaption>Embedded content from instagram</figcaption></figure>
 <!-- /wp:core-embed/instagram -->

core-blocks/test/fixtures/core-embed__issuu.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/issuu {"url":"https://issuu.com/"} -->
 <figure class="wp-block-embed-issuu wp-block-embed">
-	https://issuu.com/
-	<figcaption>Embedded content from issuu</figcaption>
-</figure>
+https://issuu.com/
+<figcaption>Embedded content from issuu</figcaption></figure>
 <!-- /wp:core-embed/issuu -->

core-blocks/test/fixtures/core-embed__kickstarter.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/kickstarter {"url":"https://kickstarter.com/"} -->
 <figure class="wp-block-embed-kickstarter wp-block-embed">
-	https://kickstarter.com/
-	<figcaption>Embedded content from kickstarter</figcaption>
-</figure>
+https://kickstarter.com/
+<figcaption>Embedded content from kickstarter</figcaption></figure>
 <!-- /wp:core-embed/kickstarter -->

core-blocks/test/fixtures/core-embed__meetup-com.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/meetup-com {"url":"https://meetup.com/"} -->
 <figure class="wp-block-embed-meetup-com wp-block-embed">
-	https://meetup.com/
-	<figcaption>Embedded content from meetup-com</figcaption>
-</figure>
+https://meetup.com/
+<figcaption>Embedded content from meetup-com</figcaption></figure>
 <!-- /wp:core-embed/meetup-com -->

core-blocks/test/fixtures/core-embed__mixcloud.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/mixcloud {"url":"https://mixcloud.com/"} -->
 <figure class="wp-block-embed-mixcloud wp-block-embed">
-	https://mixcloud.com/
-	<figcaption>Embedded content from mixcloud</figcaption>
-</figure>
+https://mixcloud.com/
+<figcaption>Embedded content from mixcloud</figcaption></figure>
 <!-- /wp:core-embed/mixcloud -->

core-blocks/test/fixtures/core-embed__photobucket.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/photobucket {"url":"https://photobucket.com/"} -->
 <figure class="wp-block-embed-photobucket wp-block-embed">
-	https://photobucket.com/
-	<figcaption>Embedded content from photobucket</figcaption>
-</figure>
+https://photobucket.com/
+<figcaption>Embedded content from photobucket</figcaption></figure>
 <!-- /wp:core-embed/photobucket -->

core-blocks/test/fixtures/core-embed__polldaddy.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/polldaddy {"url":"https://polldaddy.com/"} -->
 <figure class="wp-block-embed-polldaddy wp-block-embed">
-	https://polldaddy.com/
-	<figcaption>Embedded content from polldaddy</figcaption>
-</figure>
+https://polldaddy.com/
+<figcaption>Embedded content from polldaddy</figcaption></figure>
 <!-- /wp:core-embed/polldaddy -->

core-blocks/test/fixtures/core-embed__reddit.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/reddit {"url":"https://reddit.com/"} -->
 <figure class="wp-block-embed-reddit wp-block-embed">
-	https://reddit.com/
-	<figcaption>Embedded content from reddit</figcaption>
-</figure>
+https://reddit.com/
+<figcaption>Embedded content from reddit</figcaption></figure>
 <!-- /wp:core-embed/reddit -->

core-blocks/test/fixtures/core-embed__reverbnation.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/reverbnation {"url":"https://reverbnation.com/"} -->
 <figure class="wp-block-embed-reverbnation wp-block-embed">
-	https://reverbnation.com/
-	<figcaption>Embedded content from reverbnation</figcaption>
-</figure>
+https://reverbnation.com/
+<figcaption>Embedded content from reverbnation</figcaption></figure>
 <!-- /wp:core-embed/reverbnation -->

core-blocks/test/fixtures/core-embed__screencast.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/screencast {"url":"https://screencast.com/"} -->
 <figure class="wp-block-embed-screencast wp-block-embed">
-	https://screencast.com/
-	<figcaption>Embedded content from screencast</figcaption>
-</figure>
+https://screencast.com/
+<figcaption>Embedded content from screencast</figcaption></figure>
 <!-- /wp:core-embed/screencast -->

core-blocks/test/fixtures/core-embed__scribd.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/scribd {"url":"https://scribd.com/"} -->
 <figure class="wp-block-embed-scribd wp-block-embed">
-	https://scribd.com/
-	<figcaption>Embedded content from scribd</figcaption>
-</figure>
+https://scribd.com/
+<figcaption>Embedded content from scribd</figcaption></figure>
 <!-- /wp:core-embed/scribd -->

core-blocks/test/fixtures/core-embed__slideshare.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/slideshare {"url":"https://slideshare.com/"} -->
 <figure class="wp-block-embed-slideshare wp-block-embed">
-	https://slideshare.com/
-	<figcaption>Embedded content from slideshare</figcaption>
-</figure>
+https://slideshare.com/
+<figcaption>Embedded content from slideshare</figcaption></figure>
 <!-- /wp:core-embed/slideshare -->

core-blocks/test/fixtures/core-embed__smugmug.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/smugmug {"url":"https://smugmug.com/"} -->
 <figure class="wp-block-embed-smugmug wp-block-embed">
-	https://smugmug.com/
-	<figcaption>Embedded content from smugmug</figcaption>
-</figure>
+https://smugmug.com/
+<figcaption>Embedded content from smugmug</figcaption></figure>
 <!-- /wp:core-embed/smugmug -->

core-blocks/test/fixtures/core-embed__soundcloud.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/soundcloud {"url":"https://soundcloud.com/"} -->
 <figure class="wp-block-embed-soundcloud wp-block-embed">
-	https://soundcloud.com/
-	<figcaption>Embedded content from soundcloud</figcaption>
-</figure>
+https://soundcloud.com/
+<figcaption>Embedded content from soundcloud</figcaption></figure>
 <!-- /wp:core-embed/soundcloud -->

core-blocks/test/fixtures/core-embed__speaker.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/speaker {"url":"https://speaker.com/"} -->
 <figure class="wp-block-embed-speaker wp-block-embed">
-	https://speaker.com/
-	<figcaption>Embedded content from speaker</figcaption>
-</figure>
+https://speaker.com/
+<figcaption>Embedded content from speaker</figcaption></figure>
 <!-- /wp:core-embed/speaker -->

core-blocks/test/fixtures/core-embed__spotify.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/spotify {"url":"https://spotify.com/"} -->
 <figure class="wp-block-embed-spotify wp-block-embed">
-	https://spotify.com/
-	<figcaption>Embedded content from spotify</figcaption>
-</figure>
+https://spotify.com/
+<figcaption>Embedded content from spotify</figcaption></figure>
 <!-- /wp:core-embed/spotify -->

core-blocks/test/fixtures/core-embed__ted.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/ted {"url":"https://ted.com/"} -->
 <figure class="wp-block-embed-ted wp-block-embed">
-	https://ted.com/
-	<figcaption>Embedded content from ted</figcaption>
-</figure>
+https://ted.com/
+<figcaption>Embedded content from ted</figcaption></figure>
 <!-- /wp:core-embed/ted -->

core-blocks/test/fixtures/core-embed__tumblr.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/tumblr {"url":"https://tumblr.com/"} -->
 <figure class="wp-block-embed-tumblr wp-block-embed">
-	https://tumblr.com/
-	<figcaption>Embedded content from tumblr</figcaption>
-</figure>
+https://tumblr.com/
+<figcaption>Embedded content from tumblr</figcaption></figure>
 <!-- /wp:core-embed/tumblr -->

core-blocks/test/fixtures/core-embed__twitter.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/twitter {"url":"https://twitter.com/automattic"} -->
 <figure class="wp-block-embed-twitter wp-block-embed">
-	https://twitter.com/automattic
-	<figcaption>We are Automattic</figcaption>
-</figure>
+https://twitter.com/automattic
+<figcaption>We are Automattic</figcaption></figure>
 <!-- /wp:core-embed/twitter -->

core-blocks/test/fixtures/core-embed__videopress.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/videopress {"url":"https://videopress.com/"} -->
 <figure class="wp-block-embed-videopress wp-block-embed">
-	https://videopress.com/
-	<figcaption>Embedded content from videopress</figcaption>
-</figure>
+https://videopress.com/
+<figcaption>Embedded content from videopress</figcaption></figure>
 <!-- /wp:core-embed/videopress -->

core-blocks/test/fixtures/core-embed__vimeo.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/vimeo {"url":"https://vimeo.com/"} -->
 <figure class="wp-block-embed-vimeo wp-block-embed">
-	https://vimeo.com/
-	<figcaption>Embedded content from vimeo</figcaption>
-</figure>
+https://vimeo.com/
+<figcaption>Embedded content from vimeo</figcaption></figure>
 <!-- /wp:core-embed/vimeo -->

core-blocks/test/fixtures/core-embed__wordpress-tv.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/wordpress-tv {"url":"https://wordpress.tv/"} -->
 <figure class="wp-block-embed-wordpress-tv wp-block-embed">
-	https://wordpress.tv/
-	<figcaption>Embedded content from wordpress-tv</figcaption>
-</figure>
+https://wordpress.tv/
+<figcaption>Embedded content from wordpress-tv</figcaption></figure>
 <!-- /wp:core-embed/wordpress-tv -->

core-blocks/test/fixtures/core-embed__wordpress.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/wordpress {"url":"https://wordpress.com/"} -->
 <figure class="wp-block-embed-wordpress wp-block-embed">
-	https://wordpress.com/
-	<figcaption>Embedded content from WordPress</figcaption>
-</figure>
+https://wordpress.com/
+<figcaption>Embedded content from WordPress</figcaption></figure>
 <!-- /wp:core-embed/wordpress -->

core-blocks/test/fixtures/core-embed__youtube.serialized.html

@@ -1,6 +1,5 @@
 <!-- wp:core-embed/youtube {"url":"https://youtube.com/"} -->
 <figure class="wp-block-embed-youtube wp-block-embed">
-	https://youtube.com/
-	<figcaption>Embedded content from youtube</figcaption>
-</figure>
+https://youtube.com/
+<figcaption>Embedded content from youtube</figcaption></figure>
 <!-- /wp:core-embed/youtube -->

core-blocks/test/fixtures/core__column.serialized.html

@@ -1,11 +1,9 @@
 <!-- wp:column -->
-<div class="wp-block-column">
-	<!-- wp:paragraph -->
-	<p>Column One, Paragraph One</p>
-	<!-- /wp:paragraph -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column One, Paragraph One</p>
+<!-- /wp:paragraph -->
 
-	<!-- wp:paragraph -->
-	<p>Column One, Paragraph Two</p>
-	<!-- /wp:paragraph -->
-</div>
+<!-- wp:paragraph -->
+<p>Column One, Paragraph Two</p>
+<!-- /wp:paragraph --></div>
 <!-- /wp:column -->