Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use our modal instead of Gutenberg one

Browse Source 
[MAILPOET-2602]
This commit is contained in:
Pavel Dohnal
2020-02-06 13:16:17 +01:00
committed by Jack Kitterhing
parent 38a62850fc
commit b6c2e4554d
2 changed files with 45 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
assets/js/src/form_editor/components/editor.jsx
View File

@@ -16,6 +16,7 @@ import FormTitle from './form_title.jsx';
import Notices from './notices.jsx'; import Notices from './notices.jsx';
import UnsavedChangesNotice from './unsaved_changes_notice.jsx'; import UnsavedChangesNotice from './unsaved_changes_notice.jsx';
import FormStyles from './form_styles.jsx'; import FormStyles from './form_styles.jsx';
import Preview from './preview.jsx';
// Editor settings - see @wordpress/block-editor/src/store/defaults.js // Editor settings - see @wordpress/block-editor/src/store/defaults.js
const editorSettings = { const editorSettings = {
@@ -44,46 +45,49 @@ export default () => {
const { blocksChangedInBlockEditor } = useDispatch('mailpoet-form-editor'); const { blocksChangedInBlockEditor } = useDispatch('mailpoet-form-editor');
return ( return (
<DropZoneProvider> <>
<SlotFillProvider> <DropZoneProvider>
<div className={layoutClass}> <SlotFillProvider>
<div className="block-editor-editor-skeleton__header"> <div className={layoutClass}>
<Header /> <div className="block-editor-editor-skeleton__header">
</div> <Header />
<div className="block-editor-editor-skeleton__body"> </div>
<BlockEditorProvider <div className="block-editor-editor-skeleton__body">
value={select('mailpoet-form-editor').getFormBlocks()} <BlockEditorProvider
onInput={blocksChangedInBlockEditor} value={select('mailpoet-form-editor').getFormBlocks()}
onChange={blocksChangedInBlockEditor} onInput={blocksChangedInBlockEditor}
settings={editorSettings} onChange={blocksChangedInBlockEditor}
useSubRegistry={false} settings={editorSettings}
> useSubRegistry={false}
<div className="block-editor-editor-skeleton__content"> >
<Notices /> <div className="block-editor-editor-skeleton__content">
<Popover.Slot name="block-toolbar" /> <Notices />
<UnsavedChangesNotice /> <Popover.Slot name="block-toolbar" />
<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper"> <UnsavedChangesNotice />
<BlockEditorKeyboardShortcuts /> <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
<BlockEditorKeyboardShortcuts.Register /> <BlockEditorKeyboardShortcuts />
<WritingFlow> <BlockEditorKeyboardShortcuts.Register />
<ObserveTyping> <WritingFlow>
<FormTitle /> <ObserveTyping>
<BlockList /> <FormTitle />
</ObserveTyping> <BlockList />
</WritingFlow> </ObserveTyping>
</BlockSelectionClearer> </WritingFlow>
</div> </BlockSelectionClearer>
<div className="block-editor-editor-skeleton__sidebar">
<div>
{ sidebarOpened ? <Sidebar /> : null }
</div> </div>
</div> <div className="block-editor-editor-skeleton__sidebar">
<Popover.Slot /> <div>
</BlockEditorProvider> { sidebarOpened ? <Sidebar /> : null }
</div>
</div>
<Popover.Slot />
</BlockEditorProvider>
</div>
<FormStyles />
</div> </div>
<FormStyles /> </SlotFillProvider>
</div> </DropZoneProvider>
</SlotFillProvider> <Preview />
</DropZoneProvider> </>
); );
}; };

6
assets/js/src/form_editor/components/preview.jsx
View File

@@ -1,8 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Modal, Spinner } from '@wordpress/components'; import { Spinner } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data'; import { useDispatch, useSelect } from '@wordpress/data';
import Preview from '../../common/preview.jsx'; import Preview from '../../common/preview.jsx';
import Modal from '../../common/modal/modal.jsx';
const FormPreview = () => { const FormPreview = () => {
const [form, setForm] = useState(null); const [form, setForm] = useState(null);
@@ -27,9 +28,6 @@ const FormPreview = () => {
return ( return (
<Modal <Modal
isDismissible
shouldCloseOnEsc
shouldCloseOnClickOutside
title="Form Preview" title="Form Preview"
onRequestClose={hidePreview} onRequestClose={hidePreview}
> >