Add modal editor for use in product editor (#37937)

* Add modal editor for use in product editor

* Allow title of modal to be modified by consumer

* Add changelog entry

* Remove errant style imports after rebase

* Handle PR feedback

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

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add ModalEditor with nested IframeEditor for use in product description

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

@@ -11,8 +11,8 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { IframeEditor } from '../../components/iframe-editor';
 import { ContentPreview } from '../../components/content-preview';
+import { ModalEditor } from '../../components/modal-editor';
 
 /**
  * Internal dependencies
@@ -38,13 +38,14 @@ export function Edit() {
 					: __( 'Add description', 'woocommerce' ) }
 			</Button>
 			{ isModalOpen && (
-				<IframeEditor
+				<ModalEditor
 					initialBlocks={ parse( description ) }
 					onChange={ ( blocks ) => {
 						const html = serialize( blocks );
 						setDescription( html );
 					} }
 					onClose={ () => setIsModalOpen( false ) }
+					title={ __( 'Edit description', 'woocommerce' ) }
 				/>
 			) }
 			{ !! description.length && (

packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss

@@ -6,10 +6,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding: 132px 48px 48px 208px;
+    padding: 40px 48px;
     z-index: 1000;
 
     iframe {

packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { BlockInstance } from '@wordpress/blocks';
+import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	createElement,
@@ -111,6 +112,7 @@ export function IframeEditor( {
 						{ resizeObserver }
 						<BlockList className="edit-site-block-editor__block-list wp-site-blocks" />
 					</EditorCanvas>
+					<Popover.Slot />
 				</ResizableEditor>
 			</BlockTools>
 		</BlockEditorProvider>

packages/js/product-editor/src/components/modal-editor/index.ts

@@ -0,0 +1 @@
+export * from './modal-editor';

packages/js/product-editor/src/components/modal-editor/modal-editor.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { BlockInstance } from '@wordpress/blocks';
+import { createElement } from '@wordpress/element';
+import {
+	EditorSettings,
+	EditorBlockListSettings,
+} from '@wordpress/block-editor';
+import { Modal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { IframeEditor } from '../iframe-editor';
+
+type ModalEditorProps = {
+	initialBlocks?: BlockInstance[];
+	onChange: ( blocks: BlockInstance[] ) => void;
+	onClose: () => void;
+	settings?: Partial< EditorSettings & EditorBlockListSettings > | undefined;
+	title: string;
+};
+
+export function ModalEditor( {
+	initialBlocks,
+	onChange,
+	onClose,
+	title,
+}: ModalEditorProps ) {
+	return (
+		<Modal
+			className="woocommerce-modal-editor"
+			title={ title }
+			onRequestClose={ onClose }
+			shouldCloseOnClickOutside={ false }
+		>
+			<IframeEditor
+				initialBlocks={ initialBlocks }
+				onChange={ onChange }
+			/>
+		</Modal>
+	);
+}

packages/js/product-editor/src/components/modal-editor/style.scss

@@ -0,0 +1,28 @@
+$modal-editor-height: 60px;
+
+.woocommerce-modal-editor {
+    width: 100%;
+    height: 100%;
+    max-height: calc( 100% - 40px );
+    margin: 20px;
+    border-radius: 8px;
+
+    .components-modal__header {
+        height: $modal-editor-height;
+        border-bottom: 1px solid $gray-400;
+
+        .components-modal__header-heading {
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+
+    .components-modal__content {
+        margin-top: $modal-editor-height;
+        padding: 0;
+    }
+
+    .woocommerce-iframe-editor {
+        box-sizing: border-box;
+    }
+}

packages/js/product-editor/src/style.scss

@@ -16,6 +16,7 @@
 @import 'components/iframe-editor/style.scss';
 @import 'components/details-categories-field/style.scss';
 @import 'components/details-categories-field/create-category-modal.scss';
+@import 'components/modal-editor/style.scss';
 @import 'components/product-mvp-ces-footer/style.scss';
 @import 'components/product-mvp-feedback-modal/style.scss';
 @import 'components/edit-product-link-modal/style.scss';