Allow block attribute strings to terminate in "\" character (WordPress#71291)

Fix an issue in the block editor where attributes that terminate in the \ character are
mis-encoded and cause block attributes to be lost.

This change encodes `\` characters with their Unicode escape sequence `\u005c`
instead of their escaped form `\\`. This makes the replacement of escaped double quotes
`\"` much simpler because the preceding `\` character must be the escape character for the
quote and an escaped character itself.

Escaping of `\"` was originally introduced in WordPress#6619
to address an issue where `wp_kses_stripslashes()` would replace escaped double quotes `\"`
with plain quotes `"` and break JSON syntax (`{"str":"\""}` becomes `{"str":"""}`).

There is a companion ticket for WordPress Core: https://core.trac.wordpress.org/ticket/63917
And an associated PR to apply the same updated JSON encoding:
WordPress/wordpress-develop#9558

See a related ticket about `wp_kses_stripslashes()` and its purpose today:
https://core.trac.wordpress.org/ticket/63881

---

Unlinked contributors: ehti, Alexius08.

Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: dmsnell <dmsnell@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: skorasaurus <skorasaurus@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

Author: 5 people

packages/blocks/src/api/serializer.js

@@ -281,19 +281,21 @@ export function getCommentAttributes( blockType, attributes ) {
 export function serializeAttributes( attributes ) {
 	return (
 		JSON.stringify( attributes )
+			// Replace escaped `\` characters with the unicode escape sequence.
+			.replaceAll( '\\\\', '\\u005c' )
+
 			// Don't break HTML comments.
-			.replace( /--/g, '\\u002d\\u002d' )
+			.replaceAll( '--', '\\u002d\\u002d' )
 
 			// Don't break non-standard-compliant tools.
-			.replace( /</g, '\\u003c' )
-			.replace( />/g, '\\u003e' )
-			.replace( /&/g, '\\u0026' )
-
-			// Bypass server stripslashes behavior which would unescape stringify's
-			// escaping of quotation mark.
-			//
-			// See: https://developer.wordpress.org/reference/functions/wp_kses_stripslashes/
-			.replace( /\\"/g, '\\u0022' )
+			.replaceAll( '<', '\\u003c' )
+			.replaceAll( '>', '\\u003e' )
+			.replaceAll( '&', '\\u0026' )
+
+			// Replace escaped quotes (`\"`) to prevent problems with wp_kses_stripsplashes.
+			// This simple replacement is safe because `\\` has already been replaced.
+			// `\"` is not a JSON string quote like `"\\"`.
+			.replaceAll( '\\"', '\\u0022' )
 	);
 }
 

packages/blocks/src/api/test/serializer.js

@@ -204,6 +204,18 @@ describe( 'block serializer', () => {
 				'{"a":"\\u0022 and \\u0022"}'
 			);
 		} );
+
+		it( 'should handle backslash and quote combinations', () => {
+			const orig = {
+				bs: '\\',
+				bsQuote: '\\"',
+				bsQuoteBs: '\\"\\',
+			};
+			expect( JSON.parse( serializeAttributes( orig ) ) ).toEqual( orig );
+			expect( serializeAttributes( orig ) ).toBe(
+				'{"bs":"\\u005c","bsQuote":"\\u005c\\u0022","bsQuoteBs":"\\u005c\\u0022\\u005c"}'
+			);
+		} );
 	} );
 
 	describe( 'getCommentDelimitedContent()', () => {