Allow the user to delete the description (#39229)

packages/js/product-editor/changelog/add-38853

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Allow the user to delete the description

packages/js/product-editor/src/blocks/description/edit.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createElement, useState } from '@wordpress/element';
-import { parse, serialize } from '@wordpress/blocks';
+import { BlockInstance, parse, serialize } from '@wordpress/blocks';
 import { Button } from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -19,6 +19,26 @@ import { ModalEditor } from '../../components/modal-editor';
  * Internal dependencies
  */
 
+/**
+ * By default the blocks variable always contains one paragraph
+ * block with empty content, that causes the desciption to never
+ * be empty. This function removes the default block to keep
+ * the description empty.
+ *
+ * @param blocks The block list
+ * @return Empty array if there is only one block with empty content
+ * in the list. The same block list otherwise.
+ */
+function clearDescriptionIfEmpty( blocks: BlockInstance[] ) {
+	if ( blocks.length === 1 ) {
+		const { content } = blocks[ 0 ].attributes;
+		if ( ! content || ! content.trim() ) {
+			return [];
+		}
+	}
+	return blocks;
+}
+
 export function Edit() {
 	const blockProps = useBlockProps();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -45,7 +65,9 @@ export function Edit() {
 				<ModalEditor
 					initialBlocks={ parse( description ) }
 					onChange={ ( blocks ) => {
-						const html = serialize( blocks );
+						const html = serialize(
+							clearDescriptionIfEmpty( blocks )
+						);
 						setDescription( html );
 					} }
 					onClose={ () => setIsModalOpen( false ) }