Blocks: Replace js-beautify with element beautification

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
@@ -117,7 +116,8 @@ export function getSaveElement( blockType, attributes, innerBlocks = [] ) {
  * @return {string} Save content.
  */
 export function getSaveContent( blockType, attributes, innerBlocks ) {
-	return renderToString( getSaveElement( blockType, attributes, innerBlocks ) );
+	const element = getSaveElement( blockType, attributes, innerBlocks );
+	return renderToString( element, { beautify: true } );
 }
 
 /**
@@ -172,22 +172,6 @@ export function serializeAttributes( attrs ) {
 		.replace( /&/g, '\\u0026' ); // ibid
 }
 
-/**
- * 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.
  *
@@ -211,7 +195,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', () => {
@@ -311,11 +302,11 @@ describe( 'block serializer', () => {
 			const block =	{
 				name: 'core/chicken',
 				attributes: {
-					content: 'chicken',
+					content: 'chicken\nribs',
 				},
 				isValid: true,
 			};
-			expect( getBlockContent( block ) ).toBe( 'chicken' );
+			expect( getBlockContent( block ) ).toBe( 'chicken\nribs' );
 		} );
 	} );
 } );

core-blocks/embed/index.js

@@ -292,7 +292,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 
 			return (
 				<figure className={ embedClassName }>
-					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
+					{ `\n\t${ url }` /* URL needs to be on its own line. */ }
 					{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
 				</figure>
 			);

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

@@ -1,3 +1,5 @@
 <!-- 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 -->

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

@@ -1,19 +1,17 @@
 <!-- wp:columns {"columns":3} -->
-<div class="wp-block-columns has-3-columns">
-	<!-- wp:paragraph {"layout":"column-1"} -->
-	<p class="layout-column-1">Column One, Paragraph One</p>
-	<!-- /wp:paragraph -->
+<div class="wp-block-columns has-3-columns"><!-- wp:paragraph {"layout":"column-1"} -->
+<p class="layout-column-1">Column One, Paragraph One</p>
+<!-- /wp:paragraph -->
 
-	<!-- wp:paragraph {"layout":"column-1"} -->
-	<p class="layout-column-1">Column One, Paragraph Two</p>
-	<!-- /wp:paragraph -->
+<!-- wp:paragraph {"layout":"column-1"} -->
+<p class="layout-column-1">Column One, Paragraph Two</p>
+<!-- /wp:paragraph -->
 
-	<!-- wp:paragraph {"layout":"column-2"} -->
-	<p class="layout-column-2">Column Two, Paragraph One</p>
-	<!-- /wp:paragraph -->
+<!-- wp:paragraph {"layout":"column-2"} -->
+<p class="layout-column-2">Column Two, Paragraph One</p>
+<!-- /wp:paragraph -->
 
-	<!-- wp:paragraph {"layout":"column-3"} -->
-	<p class="layout-column-3">Column Three, Paragraph One</p>
-	<!-- /wp:paragraph -->
-</div>
+<!-- wp:paragraph {"layout":"column-3"} -->
+<p class="layout-column-3">Column Three, Paragraph One</p>
+<!-- /wp:paragraph --></div>
 <!-- /wp:columns -->

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

@@ -1,3 +1,3 @@
 <!-- wp:preformatted -->
-<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br/>And more!</pre>
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
 <!-- /wp:preformatted -->

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

@@ -1,4 +1,5 @@
 <!-- wp:pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
-	<p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote>
+	<p>Testing pullquote block...</p><cite>...with a caption</cite>
+</blockquote>
 <!-- /wp:pullquote -->

core-blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html

@@ -1,5 +1,6 @@
 <!-- wp:pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
 	<p>Paragraph <strong>one</strong></p>
-	<p>Paragraph two</p><cite>by whomever</cite></blockquote>
+	<p>Paragraph two</p><cite>by whomever</cite>
+</blockquote>
 <!-- /wp:pullquote -->

core-blocks/test/fixtures/core__quote__style-1.serialized.html

@@ -1,4 +1,5 @@
 <!-- wp:quote -->
 <blockquote class="wp-block-quote">
-	<p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
+	<p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite>
+</blockquote>
 <!-- /wp:quote -->

core-blocks/test/fixtures/core__quote__style-2.serialized.html

@@ -1,4 +1,5 @@
 <!-- wp:quote {"style":2} -->
 <blockquote class="wp-block-quote is-large">
-	<p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
+	<p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite>
+</blockquote>
 <!-- /wp:quote -->

core-blocks/test/fixtures/core__text__converts-to-paragraph.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:paragraph -->
-<p>This is an old-style text block. Changed to <code>paragraph</code> in #2135.</p>
+<p>This is an old-style text block.  Changed to <code>paragraph</code> in #2135.</p>
 <!-- /wp:paragraph -->

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

@@ -1,3 +1,3 @@
 <!-- wp:verse -->
-<pre class="wp-block-verse">A <em>verse</em>…<br/>And more!</pre>
+<pre class="wp-block-verse">A <em>verse</em>…<br />And more!</pre>
 <!-- /wp:verse -->

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

@@ -1,3 +1,5 @@
 <!-- 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 -->

editor/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -2,11 +2,9 @@
 
 exports[`InnerBlocks should force serialize for invalid block with inner blocks 1`] = `
 "<!-- wp:test-block -->
-<p>Invalid
-	<!-- wp:test-block -->
-	<p></p>
-	<!-- /wp:test-block -->
-</p>
+<p>Invalid<!-- wp:test-block -->
+<p></p>
+<!-- /wp:test-block --></p>
 <!-- /wp:test-block -->"
 `;
 

editor/components/inner-blocks/test/index.js

@@ -9,6 +9,7 @@ import {
 	getSaveElement,
 	registerBlockType,
 	serialize,
+	parse,
 	unregisterBlockType,
 } from '@wordpress/blocks';
 import { renderToString } from '@wordpress/element';
@@ -106,6 +107,10 @@ describe( 'InnerBlocks', () => {
 		block.isValid = false;
 		block.originalContent = 'Original';
 
-		expect( serialize( block ) ).toMatchSnapshot();
+		const serialized = serialize( block );
+		expect( serialized ).toMatchSnapshot();
+		// Ensure beautification doesn't impact (trailing, leading whitespace)
+		// re-parsed content:
+		expect( parse( serialized )[ 0 ].attributes.content ).toEqual( block.attributes.content );
 	} );
 } );

package.json

@@ -33,7 +33,6 @@
 		"eslint-plugin-wordpress": "git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1",
 		"hpq": "1.2.0",
 		"jquery": "3.2.1",
-		"js-beautify": "1.6.14",
 		"lerna": "2.11.0",
 		"lodash": "4.17.5",
 		"memize": "1.0.5",