Refactor: Form Block Data is now converted to Fields API (impress-org#6)

* wip: Convert form block data to fields API. * chore: Remove debugging code * chore: Remove unused class use statements * feature: add support for nested sections on front-end * feature: add crude conditional to preserve form functionality * wip: Add context provider for form settings * wip: Add form title inspector control * refactor: Rename formSettings provider as formTitle * wip: Update form builder storage for formTitle * wip: Integrate form builder with GiveWP admin * wip: Add REST API nonce * fix: Check post type before redirecting * wip: Differentiate between sections and groups * refactor: Use form ID as DonationForm node name * wip: Add todo * wip: Add placeholder Payment Details block * wip: Add payment gateways options to paymentDetails * chore: Build project and packages * wip: Correct warning * chore: Hide form builder page from the menu * fix: Set new forms as published by default * chore: Remove console logs Co-authored-by: Jon Waldstein <jonwaldstein@jons-air.mynetworksettings.com>
jonwaldstein · May 20, 2022 · a45ab7f · a45ab7f
1 parent 549113e
commit a45ab7f
Show file tree

Hide file tree

Showing 17 changed files with 303 additions and 135 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,9 +2,9 @@
     "private": true,
     "scripts": {
         "start": "npm install && npm run watch",
-        "dev": "mix",
+        "dev": "mix && npm run build --workspaces",
         "production": "mix --production",
-        "build": "mix --production",
+        "build": "mix --production && npm run build --workspaces",
         "watch": "mix watch",
         "env": "wp-env"
     },

diff --git a/packages/form-builder/src/App.js b/packages/form-builder/src/App.js
@@ -9,6 +9,7 @@ import { InterfaceSkeleton } from "@wordpress/interface";
 import Header from './components/header'
 import { Sidebar, SecondarySidebar } from './components/sidebar'
 import Content from './components/content'
+import { FormTitleProvider } from './context/formTitle'
 
 import { useToggleState } from "./hooks";
 
@@ -19,6 +20,7 @@ import './App.scss';
 
 import Storage from './components/storage'
 
+
 function App() {
 
     const {
@@ -31,47 +33,52 @@ function App() {
         toggle: toggleShowSidebar
     } = useToggleState( true )
 
-    const initialBlocks =  Storage.load();
+    const { blocks: initialBlocks, formTitle: initialFormTitle } =  Storage.load();
     if (initialBlocks instanceof Error ) {
         alert( 'Unable to load initial blocks.' )
         console.error(initialBlocks);
     }
 
+    const [formTitle, setFormTitle] = useState( initialFormTitle || 'Donation Form' )
+
     const [ blocks, updateBlocks ] = useState( initialBlocks || parse(`
         <!-- wp:custom-block-editor/donation-amount /-->
         <!-- wp:custom-block-editor/donor-info /-->
+        <!-- wp:custom-block-editor/payment-gateways /-->
     `));
 
     const saveCallback = () => {
-        return Storage.save( blocks )
+        return Storage.save( { blocks, formTitle } )
             .catch(error => alert(error.message));
     }
 
     return (
-        <ShortcutProvider>
-            <BlockEditorProvider
-                value={ blocks }
-                onInput={ ( blocks ) => updateBlocks( blocks ) }
-                onChange={ ( blocks ) => updateBlocks( blocks ) }
-            >
-                <SlotFillProvider>
-                    <Sidebar.InspectorFill>
-                        <BlockInspector />
-                    </Sidebar.InspectorFill>
-                    <InterfaceSkeleton
-                        header={ <Header
-                            saveCallback={saveCallback}
-                            toggleSecondarySidebar={toggleSecondarySidebar}
-                            toggleShowSidebar={toggleShowSidebar}
-                        /> }
-                        content={ <Content /> }
-                        sidebar={ !! showSidebar && <Sidebar /> }
-                        secondarySidebar={ !! showSecondarySidebar && <SecondarySidebar /> }
-                    />
-                    <Popover.Slot />
-                </SlotFillProvider>
-            </BlockEditorProvider>
-        </ShortcutProvider>
+        <FormTitleProvider formTitle={formTitle} setFormTitle={setFormTitle}>
+            <ShortcutProvider>
+                <BlockEditorProvider
+                    value={ blocks }
+                    onInput={ ( blocks ) => updateBlocks( blocks ) }
+                    onChange={ ( blocks ) => updateBlocks( blocks ) }
+                >
+                    <SlotFillProvider>
+                        <Sidebar.InspectorFill>
+                            <BlockInspector />
+                        </Sidebar.InspectorFill>
+                        <InterfaceSkeleton
+                            header={ <Header
+                                saveCallback={saveCallback}
+                                toggleSecondarySidebar={toggleSecondarySidebar}
+                                toggleShowSidebar={toggleShowSidebar}
+                            /> }
+                            content={ <Content /> }
+                            sidebar={ !! showSidebar && <Sidebar /> }
+                            secondarySidebar={ !! showSecondarySidebar && <SecondarySidebar /> }
+                        />
+                        <Popover.Slot />
+                    </SlotFillProvider>
+                </BlockEditorProvider>
+            </ShortcutProvider>
+        </FormTitleProvider>
     );
 }
 

diff --git a/packages/form-builder/src/blocks/section/defaults.js b/packages/form-builder/src/blocks/section/defaults.js
@@ -28,6 +28,9 @@ const defaults = {
             selector: 'p',
             default: 'Section Description',
         },
+        allowedBlocks: {
+            default: true,
+        },
     },
 
     save: function() {

diff --git a/packages/form-builder/src/blocks/section/edit.js b/packages/form-builder/src/blocks/section/edit.js
@@ -44,8 +44,9 @@ export default function Edit( props ) {
                 </header>
 
                 <InnerBlocks
+                    allowedBlocks={ props.attributes.allowedBlocks }
                     template={ props.attributes.innerBlocksTemplate }
-                    renderAppender={ !! isSelectedOrIsInnerBlockSelected && InnerBlocks.ButtonBlockAppender}
+                    renderAppender={ !! isSelectedOrIsInnerBlockSelected && InnerBlocks.ButtonBlockAppender }
                 />
 
             </div>

diff --git a/packages/form-builder/src/blocks/section/index.js b/packages/form-builder/src/blocks/section/index.js
@@ -69,3 +69,27 @@ registerBlockType( 'custom-block-editor/donation-amount', {
     },
     edit: Edit,
 } );
+
+registerBlockType( 'custom-block-editor/payment-gateways', {
+    ...Defaults,
+    title: __( 'Payment Gateways', 'custom-block-editor' ),
+    supports: {
+        multiple: false,
+    },
+    attributes: {
+        ...attributes,
+        title: {
+          default:__( 'Payment Details', 'custom-block-editor' )
+        },
+        description: {
+            default: 'PAYMENT DETAILS WILL GO HERE :)',
+        },
+        allowedBlocks: {
+            default: [],
+        },
+        innerBlocksTemplate: {
+            default: []
+        },
+    },
+    edit: Edit,
+} );
diff --git a/packages/form-builder/src/components/content/index.js b/packages/form-builder/src/components/content/index.js
@@ -1,9 +1,20 @@
-import {BlockList, BlockTools, ObserveTyping, WritingFlow, ButtonBlockAppender} from "@wordpress/block-editor";
+import React, { useContext } from 'react';
+import {BlockList, BlockTools, ObserveTyping, WritingFlow, ButtonBlockAppender, RichText } from "@wordpress/block-editor";
+import { FormTitleContext } from '../../context/formTitle'
 
 const Component = () => {
+
+    const [formTitle, setFormTitle] = useContext(FormTitleContext)
+
     return (
         <BlockTools>
             <WritingFlow>
+                <RichText
+                    tagName="h1"
+                    value={ formTitle }
+                    onChange={ setFormTitle }
+                    style={{ margin: '40px' }}
+                />
                 <ObserveTyping>
                     <BlockList
                         renderAppender={ButtonBlockAppender}

diff --git a/packages/form-builder/src/components/sidebar/primary.js b/packages/form-builder/src/components/sidebar/primary.js
@@ -1,20 +1,58 @@
-import {createSlotFill, PanelHeader} from '@wordpress/components';
+import { useContext } from 'react'
+
+import {createSlotFill, TabPanel, PanelBody, PanelRow, TextControl} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {FormTitleContext} from "../../context/formTitle";
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
     'StandAloneBlockEditorSidebarInspector'
 );
 
+const tabs = [
+    {
+        name: 'form',
+        title: __('Form'),
+        className: 'tab-form',
+        content: ({ formTitle, setFormTitle }) => (
+            <PanelBody title={ __( 'Form Settings', 'give' ) } initialOpen={true}>
+                <PanelRow>
+                    <TextControl
+                        label={__('Form Title')}
+                        value={ formTitle }
+                        onChange={ setFormTitle }
+                    />
+                </PanelRow>
+            </PanelBody>
+        )
+    },
+    {
+        name: 'block',
+        title: __('Block'),
+        className: 'tab-block',
+        content: () => (
+            <>
+                <InspectorSlot bubblesVirtually />
+            </>
+        )
+    },
+]
+
 function Sidebar() {
+    const [formTitle, setFormTitle] = useContext(FormTitleContext)
     return (
         <div
             className="givewp-next-gen-sidebar givewp-next-gen-sidebar-primary"
             role="region"
             aria-label={ __( 'Standalone Block Editor advanced settings.' ) }
             tabIndex="-1"
         >
-            <PanelHeader label={__('Settings')} />
-            <InspectorSlot bubblesVirtually />
+            <TabPanel
+                className="sidebar-panel"
+                activeClass="active-tab"
+                tabs={ tabs }
+            >
+                { ( tab ) => <tab.content formTitle={formTitle} setFormTitle={setFormTitle} /> }
+            </TabPanel>
         </div>
     );
 }

diff --git a/packages/form-builder/src/components/sidebar/styles.scss b/packages/form-builder/src/components/sidebar/styles.scss
@@ -34,3 +34,7 @@
     margin: 0;
   }
 }
+
+.sidebar-panel .active-tab {
+    border-top: 3px solid #66bb6a;
+}
diff --git a/packages/form-builder/src/components/storage/abstract.js b/packages/form-builder/src/components/storage/abstract.js
diff --git a/packages/form-builder/src/components/storage/index.js b/packages/form-builder/src/components/storage/index.js
@@ -1,16 +1,6 @@
 import LocalStorage from './local'
-import NullStorage from './null'
-import AbstractStorage from './abstract'
-import debug from '../debug'
 
-const fallbackStorage = {
-    'testing': NullStorage,
-    'development': LocalStorage,
-    'production': AbstractStorage,
-}[process.env.NODE_ENV]
-
-debug( process.env.NODE_ENV )
-debug( fallbackStorage )
+const fallbackStorage = LocalStorage
 
 const Storage = window.storage || fallbackStorage
 

diff --git a/packages/form-builder/src/components/storage/local.js b/packages/form-builder/src/components/storage/local.js
@@ -1,20 +1,20 @@
 const localStorageDriver = {
-    save: ( blocks ) => {
-        console.log( 'Saving to local storage...' )
-        console.log( blocks )
+    save: ({ blocks, formTitle } ) => {
         return new Promise((resolve, reject) => {
             setTimeout( function() {
-                localStorage.setItem('@givewp/form-builder', JSON.stringify(blocks) )
-                console.log( 'Saved to local storage!' )
+                localStorage.setItem('@givewp/form-builder.blocks', JSON.stringify(blocks) )
+                localStorage.setItem('@givewp/form-builder.formTitle', formTitle )
                 resolve()
             }, 1000)
         })
     },
     load: () => {
-        const value = localStorage.getItem('@givewp/form-builder' )
-        console.log( 'Loading from local storage...' )
-        console.log( value )
-        return JSON.parse( value )
+        const blocks = JSON.parse( localStorage.getItem('@givewp/form-builder.blocks' ) )
+        const formTitle = localStorage.getItem('@givewp/form-builder.formTitle' )
+        return {
+            blocks,
+            formTitle
+        }
     },
 }
 

diff --git a/packages/form-builder/src/context/formTitle.js b/packages/form-builder/src/context/formTitle.js
@@ -0,0 +1,12 @@
+import React, { createContext } from 'react';
+
+export const FormTitleContext = createContext();
+
+export const FormTitleProvider = ({formTitle, setFormTitle, children}) => {
+
+    return (
+        <FormTitleContext.Provider value={[formTitle, setFormTitle]}>
+            {children}
+        </FormTitleContext.Provider>
+    )
+}