Merge pull request #1910 from WordPress/fix/omit-serializing-default-…

…attributes

Omit serializing block attributes that match any default attribute values

blocks/api/serializer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, reduce, isObject } from 'lodash';
+import { isEmpty, reduce, isObject, isEqual, pickBy } from 'lodash';
 import { html as beautifyHtml } from 'js-beautify';
 import classnames from 'classnames';
 
@@ -138,7 +138,12 @@ export function serializeBlock( block ) {
 		saveContent = block.originalContent;
 	}
 
-	const saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType.attributes ) );
+	let saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType.attributes ) );
+
+	// Remove attributes that are the same as the defaults.
+	if ( blockType.defaultAttributes ) {
+		saveAttributes = pickBy( saveAttributes, ( value, key ) => ! isEqual( value, blockType.defaultAttributes[ key ] ) );
+	}
 
 	if ( 'core/more' === blockName ) {
 		return `<!--more${ saveAttributes.text ? ` ${ saveAttributes.text }` : '' }-->${ saveAttributes.noTeaser ? '\n<!--noteaser-->' : '' }`;

blocks/api/test/serializer.js

@@ -13,6 +13,7 @@ import serialize, {
 	serializeAttributes,
 } from '../serializer';
 import { getBlockTypes, registerBlockType, unregisterBlockType } from '../registration';
+import { createBlock } from '../';
 
 describe( 'block serializer', () => {
 	afterEach( () => {
@@ -181,6 +182,10 @@ describe( 'block serializer', () => {
 	describe( 'serialize()', () => {
 		it( 'should serialize the post content properly', () => {
 			const blockType = {
+				defaultAttributes: {
+					foo: true,
+					bar: false,
+				},
 				attributes: ( rawContent ) => {
 					return {
 						content: rawContent,
@@ -191,19 +196,15 @@ describe( 'block serializer', () => {
 				},
 			};
 			registerBlockType( 'core/test-block', blockType );
-			const blockList = [
-				{
-					name: 'core/test-block',
-					attributes: {
-						content: 'Ribs & Chicken',
-						stuff: 'left & right -- but <not>',
-					},
-					isValid: true,
-				},
-			];
-			const expectedPostContent = '<!-- wp:core/test-block {"stuff":"left \\u0026 right \\u002d\\u002d but \\u003cnot\\u003e"} -->\n<p class="wp-block-test-block">Ribs & Chicken</p>\n<!-- /wp:core/test-block -->';
 
-			expect( serialize( blockList ) ).toEqual( expectedPostContent );
+			const block = createBlock( 'core/test-block', {
+				foo: false,
+				content: 'Ribs & Chicken',
+				stuff: 'left & right -- but <not>',
+			} );
+			const expectedPostContent = '<!-- wp:core/test-block {"foo":false,"stuff":"left \\u0026 right \\u002d\\u002d but \\u003cnot\\u003e"} -->\n<p class="wp-block-test-block">Ribs & Chicken</p>\n<!-- /wp:core/test-block -->';
+
+			expect( serialize( [ block ] ) ).toEqual( expectedPostContent );
 		} );
 	} );
 } );

blocks/library/text/index.js

@@ -25,6 +25,10 @@ registerBlockType( 'core/text', {
 
 	category: 'common',
 
+	defaultAttributes: {
+		dropCap: false,
+	},
+
 	className: false,
 
 	attributes: {
@@ -109,7 +113,7 @@ registerBlockType( 'core/text', {
 
 	save( { attributes } ) {
 		const { align, content, dropCap } = attributes;
-		const className = dropCap && 'has-drop-cap';
+		const className = dropCap ? 'has-drop-cap' : null;
 
 		if ( ! align ) {
 			return <p className={ className }>{ content }</p>;

blocks/test/fixtures/core__cover-image.serialized.html

@@ -1,4 +1,4 @@
-<!-- wp:core/cover-image {"hasBackgroundDim":true,"url":"https://cldup.com/uuUqE_dXzy.jpg"} -->
+<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg"} -->
 <section class="wp-block-cover-image has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
     <h2>Guten Berg!</h2>
 </section>

blocks/test/fixtures/core__latest-posts.html

@@ -1 +1 @@
-<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false} /-->
+<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":true} /-->

blocks/test/fixtures/core__latest-posts.json

@@ -6,7 +6,7 @@
         "attributes": {
             "columns": 3,
             "postsToShow": 5,
-            "displayPostDate": false,
+            "displayPostDate": true,
             "layout": "list"
         }
     }

blocks/test/fixtures/core__latest-posts.parsed.json

@@ -3,7 +3,7 @@
         "blockName": "core/latest-posts",
         "attrs": {
             "postsToShow": 5,
-            "displayPostDate": false
+            "displayPostDate": true
         },
         "rawContent": ""
     },

blocks/test/fixtures/core__latest-posts.serialized.html

@@ -1 +1 @@
-<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false,"layout":"list","columns":3} /-->
+<!-- wp:core/latest-posts {"displayPostDate":true} /-->

blocks/test/fixtures/core__text__align-right.json

@@ -9,7 +9,8 @@
                 [
                     "... like this one, which is separate from the above and right aligned."
                 ]
-            ]
+            ],
+            "dropCap": false
         }
     }
 ]