Add classic block modal

packages/block-library/src/freeform/edit.js

@@ -7,16 +7,17 @@ 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';
 
 /**
  * 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 } />
  ) }

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