diff --git a/packages/js/product-editor/changelog/add-38853 b/packages/js/product-editor/changelog/add-38853 new file mode 100644 index 00000000000..1f282328dfb --- /dev/null +++ b/packages/js/product-editor/changelog/add-38853 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Allow the user to delete the description diff --git a/packages/js/product-editor/src/blocks/description/edit.tsx b/packages/js/product-editor/src/blocks/description/edit.tsx index 90924b46386..b7c5f58a683 100644 --- a/packages/js/product-editor/src/blocks/description/edit.tsx +++ b/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() { { - const html = serialize( blocks ); + const html = serialize( + clearDescriptionIfEmpty( blocks ) + ); setDescription( html ); } } onClose={ () => setIsModalOpen( false ) }