diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 4e2e1078000..c53bc3e840f 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createElement } from '@wordpress/element';
+import { createElement, useEffect } from '@wordpress/element';
 import {
 	BlockAttributes,
 	BlockInstance,
@@ -19,7 +19,6 @@ import { useEntityProp } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { ContentPreview } from '../../../components/content-preview';
-import { ModalEditor } from '../../../components/modal-editor';
 import { ProductEditorBlockEditProps } from '../../../types';
 import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
 import { store as productEditorUiStore } from '../../../store/product-editor-ui';
@@ -58,14 +57,41 @@ export function DescriptionBlockEdit( {
 		'description'
 	);
 
-	// Check if the Modal editor is open from the store.
-	const isModalEditorOpen = useSelect( ( select ) => {
-		return select( productEditorUiStore ).isModalEditorOpen();
+	// Pick Modal editor data from the store.
+	const { isModalEditorOpen, blocks } = useSelect( ( select ) => {
+		return {
+			isModalEditorOpen:
+				select( productEditorUiStore ).isModalEditorOpen(),
+			blocks: select( productEditorUiStore ).getModalEditorBlocks(),
+		};
 	}, [] );
 
-	const { openModalEditor, closeModalEditor } =
+	const { openModalEditor, setModalEditorBlocks } =
 		useDispatch( productEditorUiStore );
 
+	/*
+	 * Populate the modal editor with the description blocks,
+	 * in the first render only if the description is not empty.
+	 */
+	useEffect( () => {
+		if ( ! description ) {
+			return;
+		}
+
+		setModalEditorBlocks( parse( description ) );
+	}, [] ); // eslint-disable-line
+
+	// Update the description when the blocks change.
+	useEffect( () => {
+		if ( ! blocks?.length ) {
+			setDescription( '' );
+		}
+
+		const html = serialize( clearDescriptionIfEmpty( blocks ) );
+
+		setDescription( html );
+	}, [ blocks, setDescription ] );
+
 	return (
 		<div { ...blockProps }>
 			<Button
@@ -80,20 +106,6 @@ export function DescriptionBlockEdit( {
 					: __( 'Add description', 'woocommerce' ) }
 			</Button>
 
-			{ isModalEditorOpen && (
-				<ModalEditor
-					initialBlocks={ parse( description ) }
-					onChange={ ( blocks ) => {
-						const html = serialize(
-							clearDescriptionIfEmpty( blocks )
-						);
-						setDescription( html );
-					} }
-					onClose={ closeModalEditor }
-					title={ __( 'Edit description', 'woocommerce' ) }
-				/>
-			) }
-
 			{ !! description.length && (
 				<ContentPreview content={ description } />
 			) }
diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
index 0fe3684dea6..5004556314b 100644
--- a/packages/js/product-editor/src/components/block-editor/block-editor.tsx
+++ b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
@@ -2,10 +2,16 @@
  * External dependencies
  */
 import { synchronizeBlocksWithTemplate, Template } from '@wordpress/blocks';
-import { createElement, useMemo, useLayoutEffect } from '@wordpress/element';
+import {
+	createElement,
+	useMemo,
+	useLayoutEffect,
+	Fragment,
+} from '@wordpress/element';
 import { useDispatch, useSelect, select as WPSelect } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 import { PluginArea } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
 import {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore No types for this exist yet.
@@ -34,6 +40,8 @@ import {
 import { useConfirmUnsavedProductChanges } from '../../hooks/use-confirm-unsaved-product-changes';
 import { ProductEditorContext } from '../../types';
 import { PostTypeContext } from '../../contexts/post-type-context';
+import { ModalEditor } from '../modal-editor';
+import { store as productEditorUiStore } from '../../store/product-editor-ui';
 
 type BlockEditorSettings = Partial<
 	EditorSettings & EditorBlockListSettings
@@ -111,34 +119,50 @@ export function BlockEditor( {
 		updateEditorSettings( settings ?? {} );
 	}, [ productType, productId ] );
 
+	// Check if the Modal editor is open from the store.
+	const isModalEditorOpen = useSelect( ( select ) => {
+		return select( productEditorUiStore ).isModalEditorOpen();
+	}, [] );
+
+	const { closeModalEditor } = useDispatch( productEditorUiStore );
+
 	if ( ! blocks ) {
 		return null;
 	}
 
 	return (
-		<div className="woocommerce-product-block-editor">
-			<BlockContextProvider value={ context }>
-				<BlockEditorProvider
-					value={ blocks }
-					onInput={ onInput }
-					onChange={ onChange }
-					settings={ settings }
-				>
-					{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
-					{ /* @ts-ignore No types for this exist yet. */ }
-					<BlockEditorKeyboardShortcuts.Register />
-					<BlockTools>
-						<ObserveTyping>
-							<BlockList className="woocommerce-product-block-editor__block-list" />
-						</ObserveTyping>
-					</BlockTools>
-					{ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
-					<PostTypeContext.Provider value={ context.postType! }>
-						{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
-						<PluginArea scope="woocommerce-product-block-editor" />
-					</PostTypeContext.Provider>
-				</BlockEditorProvider>
-			</BlockContextProvider>
-		</div>
+		<>
+			{ ' ' }
+			{ isModalEditorOpen && (
+				<ModalEditor
+					onClose={ closeModalEditor }
+					title={ __( 'Edit description', 'woocommerce' ) }
+				/>
+			) }
+			<div className="woocommerce-product-block-editor">
+				<BlockContextProvider value={ context }>
+					<BlockEditorProvider
+						value={ blocks }
+						onInput={ onInput }
+						onChange={ onChange }
+						settings={ settings }
+					>
+						{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
+						{ /* @ts-ignore No types for this exist yet. */ }
+						<BlockEditorKeyboardShortcuts.Register />
+						<BlockTools>
+							<ObserveTyping>
+								<BlockList className="woocommerce-product-block-editor__block-list" />
+							</ObserveTyping>
+						</BlockTools>
+						{ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
+						<PostTypeContext.Provider value={ context.postType! }>
+							{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
+							<PluginArea scope="woocommerce-product-block-editor" />
+						</PostTypeContext.Provider>
+					</BlockEditorProvider>
+				</BlockContextProvider>
+			</div>
+		</>
 	);
 }