Fix deletion of custom block classes

If you add a custom class to a block and then remove that custom class it would flag the block as invalid. The reason is that the custom class became part of the blocks ‘default’ attributes, and it would then add it back and this then the expected HTML wouldn’t match the current HTML.

This change ensures the block contains the default class names + whatever classes are currently in the HTML, ignoring any custom ones in the block itself.

The unit tests have been beefed up to cope with several edge case situations

editor/hooks/custom-class-name.js

@@ -136,13 +136,14 @@ export function addParsedDifference( blockAttributes, blockType, innerHTML ) {
 		// To determine difference, serialize block given the known set of
 		// attributes. If there are classes which are mismatched with the
 		// incoming HTML of the block, add to filtered result.
-		const serialized = getSaveContent( blockType, blockAttributes );
+		// If existing classes have been removed then ensure they don't appear in the output
+		const serialized = getSaveContent( blockType, { ... blockAttributes, className: '' } );
 		const classes = getHTMLRootElementClasses( serialized );
 		const parsedClasses = getHTMLRootElementClasses( innerHTML );
 		const customClasses = difference( parsedClasses, classes );
 
 		const filteredClassName = compact( [
-			blockAttributes.className,
+			...classes,
 			...customClasses,
 		] ).join( ' ' );
 

editor/hooks/test/custom-class-name.js

@@ -110,5 +110,45 @@ describe( 'custom className', () => {
 
 			expect( attributes.className ).toBeUndefined();
 		} );
+
+		it( 'should add a custom class name to an element without a class', () => {
+			const attributes = addParsedDifference(
+				{},
+				blockSettings,
+				'<div class="foo"></div>'
+			);
+
+			expect( attributes.className ).toBe( 'foo' );
+		} );
+
+		it( 'should remove the custom class and retain default class', () => {
+			const attributes = addParsedDifference(
+				{ className: 'default custom' },
+				blockSettings,
+				'<div class="default"></div>'
+			);
+
+			expect( attributes.className ).toBe( 'default' );
+		} );
+
+		it( 'should remove the custom class from an element originally without a class', () => {
+			const attributes = addParsedDifference(
+				{ className: 'foo' },
+				blockSettings,
+				'<div></div>'
+			);
+
+			expect( attributes.className ).toBeUndefined();
+		} );
+
+		it( 'should remove the custom classes and retain default and other custom class', () => {
+			const attributes = addParsedDifference(
+				{ className: 'default custom1 custom2 custom3' },
+				blockSettings,
+				'<div class="default custom1 custom3"></div>'
+			);
+
+			expect( attributes.className ).toBe( 'default custom1 custom3' );
+		} );
 	} );
 } );