move the Modal editor out of the block instance

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 } />
 			) }

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,11 +119,26 @@ 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 (
+		<>
+			{ ' ' }
+			{ isModalEditorOpen && (
+				<ModalEditor
+					onClose={ closeModalEditor }
+					title={ __( 'Edit description', 'woocommerce' ) }
+				/>
+			) }
 			<div className="woocommerce-product-block-editor">
 				<BlockContextProvider value={ context }>
 					<BlockEditorProvider
@@ -140,5 +163,6 @@ export function BlockEditor( {
 					</BlockEditorProvider>
 				</BlockContextProvider>
 			</div>
+		</>
 	);
 }