From 20e4f489417dc690f38ba7a40781365ca2eaf6e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Thu, 15 Dec 2022 12:30:54 +0200
Subject: [PATCH] Add classic block modal

---
 packages/block-library/src/freeform/edit.js  |  24 +---
 packages/block-library/src/freeform/modal.js | 111 +++++++++++++++++++
 2 files changed, 117 insertions(+), 18 deletions(-)
 create mode 100644 packages/block-library/src/freeform/modal.js

diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index e386d2f07b155..c41a78ca5c042 100644
--- a/packages/block-library/src/freeform/edit.js
+++ b/packages/block-library/src/freeform/edit.js
@@ -7,9 +7,9 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { debounce, useRefEffect } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { RawHTML, useEffect, useRef, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { ToolbarGroup } from '@wordpress/components';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 
@@ -17,6 +17,7 @@ import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import ConvertToBlocksButton from './convert-to-blocks-button';
+import ModalEdit from './modal';
 
 const { wp } = window;
 
@@ -37,15 +38,11 @@ function isTmceEmpty( editor ) {
 }
 
 export default function FreeformEdit( props ) {
-	const {
-		clientId,
-		attributes: { content },
-	} = props;
+	const { clientId } = props;
 	const canRemove = useSelect(
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);
-	const { toggleBlockMode } = useDispatch( blockEditorStore );
 	const [ isIframed, setIsIframed ] = useState( false );
 	const ref = useRefEffect( ( element ) => {
 		setIsIframed( element.ownerDocument !== document );
@@ -57,21 +54,12 @@ export default function FreeformEdit( props ) {
 				<BlockControls>
 					<ToolbarGroup>
 						<ConvertToBlocksButton clientId={ clientId } />
-						{ isIframed && (
-							<ToolbarButton
-								onClick={ () => {
-									toggleBlockMode( clientId );
-								} }
-							>
-								{ __( 'Edit as HTML' ) }
-							</ToolbarButton>
-						) }
 					</ToolbarGroup>
 				</BlockControls>
 			) }
 			<div { ...useBlockProps( { ref } ) }>
 				{ isIframed ? (
-					<RawHTML>{ content }</RawHTML>
+					<ModalEdit { ...props } />
 				) : (
 					<ClassicEdit { ...props } />
 				) }
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
new file mode 100644
index 0000000000000..67338be91fa86
--- /dev/null
+++ b/packages/block-library/src/freeform/modal.js
@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls, store } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Modal,
+	Button,
+} from '@wordpress/components';
+import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+function ClassicEdit( props ) {
+	const styles = useSelect(
+		( select ) => select( store ).getSettings().styles
+	);
+	useEffect( () => {
+		const { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;
+
+		window.tinymce.EditorManager.overrideDefaults( {
+			base_url: baseURL,
+			suffix,
+		} );
+
+		window.wp.oldEditor.initialize( props.id, {
+			tinymce: {
+				...settings,
+				height: 500,
+				setup( editor ) {
+					editor.on( 'init', () => {
+						const doc = editor.getDoc();
+						styles.forEach( ( { css } ) => {
+							const styleEl = doc.createElement( 'style' );
+							styleEl.innerHTML = css;
+							doc.head.appendChild( styleEl );
+						} );
+					} );
+				},
+			},
+		} );
+
+		return () => {
+			window.wp.oldEditor.remove( props.id );
+		};
+	}, [] );
+
+	return <textarea { ...props } />;
+}
+
+export default function ModalEdit( props ) {
+	const {
+		clientId,
+		attributes: { content },
+		setAttributes,
+		onReplace,
+	} = props;
+	const [ isOpen, setOpen ] = useState( false );
+	const id = `editor-${ clientId }`;
+	const label = __( 'Classic Edit' );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton onClick={ () => setOpen( true ) }>
+						{ label }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			{ content && <RawHTML>{ content }</RawHTML> }
+			{ ( isOpen || ! content ) && (
+				<Modal title={ label } __experimentalHideHeader={ true }>
+					<h2
+						style={ {
+							display: 'flex',
+							justifyContent: 'space-between',
+						} }
+					>
+						<div>{ label }</div>
+						<div>
+							<Button
+								onClick={ () =>
+									content ? setOpen( false ) : onReplace( [] )
+								}
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								isPrimary
+								onClick={ () => {
+									setAttributes( {
+										content:
+											window.wp.oldEditor.getContent(
+												id
+											),
+									} );
+									setOpen( false );
+								} }
+							>
+								{ __( 'Save' ) }
+							</Button>
+						</div>
+					</h2>
+					<ClassicEdit id={ id } defaultValue={ content } />
+				</Modal>
+			) }
+		</>
+	);
+}