Serializer: Capture and recover from save errors

blocks/api/parser.js

@@ -201,11 +201,12 @@ export function createBlockWithFallback( name, rawContent, attributes ) {
 
 		// Validate that the parsed block is valid, meaning that if we were to
 		// reserialize it given the assumed attributes, the markup matches the
-		// original value. Otherwise, preserve original to avoid destruction.
+		// original value.
 		block.isValid = isValidBlock( rawContent, blockType, block.attributes );
-		if ( ! block.isValid ) {
-			block.originalContent = rawContent;
-		}
+
+		// Preserve original content for future use in case the block is parsed
+		// as invalid, or future serialization attempt results in an error
+		block.originalContent = rawContent;
 
 		return block;
 	}

blocks/api/serializer.js

@@ -174,13 +174,13 @@ export function serializeBlock( block ) {
 	const blockName = block.name;
 	const blockType = getBlockType( blockName );
 
-	let saveContent;
+	// If block was parsed as invalid or encounters an error while generating
+	// save content, use original content instead to avoid content loss.
+	let saveContent = block.originalContent;
 	if ( block.isValid ) {
-		saveContent = getSaveContent( blockType, block.attributes );
-	} else {
-		// If block was parsed as invalid, skip serialization behavior and opt
-		// to use original content instead so we don't destroy user content.
-		saveContent = block.originalContent;
+		try {
+			saveContent = getSaveContent( blockType, block.attributes );
+		} catch ( error ) {}
 	}
 
 	const saveAttributes = getCommentAttributes( block.attributes, blockType.attributes );

blocks/api/test/serializer.js

@@ -333,15 +333,14 @@ describe( 'block serializer', () => {
 	} );
 
 	describe( 'serialize()', () => {
-		it( 'should serialize the post content properly', () => {
+		beforeEach( () => {
 			const blockType = {
 				attributes: {
-					foo: {
-						type: 'string',
-						default: true,
+					throw: {
+						type: 'boolean',
 					},
-					bar: {
-						type: 'string',
+					defaulted: {
+						type: 'boolean',
 						default: false,
 					},
 					content: {
@@ -353,21 +352,52 @@ describe( 'block serializer', () => {
 					},
 				},
 				save( { attributes } ) {
+					if ( attributes.throw ) {
+						throw new Error();
+					}
+
 					return <p dangerouslySetInnerHTML={ { __html: attributes.content } } />;
 				},
 				category: 'common',
 			};
 			registerBlockType( 'core/test-block', blockType );
+		} );
 
+		it( 'should serialize the post content properly', () => {
 			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 -->';
+			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( [ block ] ) ).toEqual( expectedPostContent );
 			expect( serialize( block ) ).toEqual( expectedPostContent );
 		} );
+
+		it( 'should preserve content for invalid block', () => {
+			const block = createBlock( 'core/test-block', {
+				content: 'Incorrect',
+			} );
+
+			block.isValid = false;
+			block.originalContent = 'Correct';
+
+			expect( serialize( block ) ).toEqual(
+				'<!-- wp:core/test-block -->\nCorrect\n<!-- /wp:core/test-block -->'
+			);
+		} );
+
+		it( 'should preserve content for crashing block', () => {
+			const block = createBlock( 'core/test-block', {
+				content: 'Incorrect',
+				throw: true,
+			} );
+
+			block.originalContent = 'Correct';
+
+			expect( serialize( block ) ).toEqual(
+				'<!-- wp:core/test-block {"throw":true} -->\nCorrect\n<!-- /wp:core/test-block -->'
+			);
+		} );
 	} );
 } );

blocks/api/test/validation.js

@@ -401,6 +401,21 @@ describe( 'validation', () => {
 			) ).toBe( false );
 		} );
 
+		it( 'returns false is error occurs while generating block save', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				save() {
+					throw new Error();
+				},
+			} );
+
+			expect( isValidBlock(
+				'Bananas',
+				getBlockType( 'core/test-block' ),
+				{ fruit: 'Bananas' }
+			) ).toBe( false );
+		} );
+
 		it( 'returns true is block is valid', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );
 

blocks/api/validation.js

@@ -380,8 +380,12 @@ export function isEquivalentHTML( a, b ) {
  * @return {Boolean}            Whether block is valid
  */
 export function isValidBlock( rawContent, blockType, attributes ) {
-	return isEquivalentHTML(
-		rawContent,
-		getSaveContent( blockType, attributes )
-	);
+	let saveContent;
+	try {
+		saveContent = getSaveContent( blockType, attributes );
+	} catch ( error ) {
+		return false;
+	}
+
+	return isEquivalentHTML( rawContent, saveContent );
 }

blocks/test/fixtures/core-embed__animoto.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from animoto"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-animoto\">\n    https://animoto.com/\n    <figcaption>Embedded content from animoto</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__cloudup.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from cloudup"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-cloudup\">\n    https://cloudup.com/\n    <figcaption>Embedded content from cloudup</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__collegehumor.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from collegehumor"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-collegehumor\">\n    https://collegehumor.com/\n    <figcaption>Embedded content from collegehumor</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__dailymotion.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from dailymotion"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-dailymotion\">\n    https://dailymotion.com/\n    <figcaption>Embedded content from dailymotion</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__facebook.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from facebook"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-facebook\">\n    https://facebook.com/\n    <figcaption>Embedded content from facebook</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__flickr.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from flickr"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-flickr\">\n    https://flickr.com/\n    <figcaption>Embedded content from flickr</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__funnyordie.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from funnyordie"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-funnyordie\">\n    https://funnyordie.com/\n    <figcaption>Embedded content from funnyordie</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__hulu.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from hulu"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-hulu\">\n    https://hulu.com/\n    <figcaption>Embedded content from hulu</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__imgur.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from imgur"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-imgur\">\n    https://imgur.com/\n    <figcaption>Embedded content from imgur</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__instagram.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from instagram"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-instagram\">\n    https://instagram.com/\n    <figcaption>Embedded content from instagram</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__issuu.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from issuu"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-issuu\">\n    https://issuu.com/\n    <figcaption>Embedded content from issuu</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__kickstarter.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from kickstarter"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-kickstarter\">\n    https://kickstarter.com/\n    <figcaption>Embedded content from kickstarter</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__meetup-com.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from meetup-com"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-meetup-com\">\n    https://meetup.com/\n    <figcaption>Embedded content from meetup-com</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__mixcloud.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from mixcloud"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-mixcloud\">\n    https://mixcloud.com/\n    <figcaption>Embedded content from mixcloud</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__photobucket.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from photobucket"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-photobucket\">\n    https://photobucket.com/\n    <figcaption>Embedded content from photobucket</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__polldaddy.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from polldaddy"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-polldaddy\">\n    https://polldaddy.com/\n    <figcaption>Embedded content from polldaddy</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__reddit.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from reddit"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-reddit\">\n    https://reddit.com/\n    <figcaption>Embedded content from reddit</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__reverbnation.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from reverbnation"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-reverbnation\">\n    https://reverbnation.com/\n    <figcaption>Embedded content from reverbnation</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__screencast.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from screencast"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-screencast\">\n    https://screencast.com/\n    <figcaption>Embedded content from screencast</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__scribd.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from scribd"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-scribd\">\n    https://scribd.com/\n    <figcaption>Embedded content from scribd</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__slideshare.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from slideshare"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-slideshare\">\n    https://slideshare.com/\n    <figcaption>Embedded content from slideshare</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__smugmug.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from smugmug"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-smugmug\">\n    https://smugmug.com/\n    <figcaption>Embedded content from smugmug</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__soundcloud.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from soundcloud"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-soundcloud\">\n    https://soundcloud.com/\n    <figcaption>Embedded content from soundcloud</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__speaker.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from speaker"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-speaker\">\n    https://speaker.com/\n    <figcaption>Embedded content from speaker</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__spotify.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from spotify"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-spotify\">\n    https://spotify.com/\n    <figcaption>Embedded content from spotify</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__ted.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from ted"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-ted\">\n    https://ted.com/\n    <figcaption>Embedded content from ted</figcaption>\n</figure>"
     }
 ]

blocks/test/fixtures/core-embed__tumblr.json

@@ -8,6 +8,7 @@
             "caption": [
                 "Embedded content from tumblr"
             ]
-        }
+        },
+        "originalContent": "<figure class=\"wp-block-embed-tumblr\">\n    https://tumblr.com/\n    <figcaption>Embedded content from tumblr</figcaption>\n</figure>"
     }
 ]