Refactor: form builder to use wp-scripts (#180)

* refactor: update component imports, use wp-scripts * feature: add custom categories * chore: add ts-ignores to fix build * chore: udpate since tags * refactor: label section category as layout * feature: add default block cats --------- Co-authored-by: Jon Waldstein <jonwaldstein@jons-air.mynetworksettings.com>
impress-org · May 10, 2023 · 25b01ee · 25b01ee
1 parent d26067b
commit 25b01ee
Show file tree

Hide file tree

Showing 21 changed files with 865 additions and 314 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/form-builder/package.json b/packages/form-builder/package.json
@@ -8,7 +8,7 @@
         "test": "jest"
     },
     "dependencies": {
-        "@wordpress/block-editor": "^11.2.0",
+        "@wordpress/block-editor": "^12.0.0",
         "@wordpress/block-library": "^8.2.0",
         "@wordpress/blocks": "^12.2.0",
         "@wordpress/components": "^23.2.0",

diff --git a/packages/form-builder/src/App.scss b/packages/form-builder/src/App.scss
@@ -527,3 +527,7 @@ This creates a consistent separator between the tabs and the rest of the sidebar
 .give-billing-period-control .components-radio-control__input[type='radio']:checked + label {
     border-color: black;
 }
+
+.block-editor-inserter__main-area {
+    width: 100%;
+}
diff --git a/packages/form-builder/src/blocks/fields/amount/inspector/add-button.tsx b/packages/form-builder/src/blocks/fields/amount/inspector/add-button.tsx
@@ -1,9 +1,8 @@
 import {Button} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {SVGProps} from 'react';
-import ButtonProps = Button.ButtonProps;
 
-const AddButton = (props: ButtonProps) => {
+const AddButton = (props) => {
     return (
         <Button {...props} variant={'secondary'} style={{width: '100%', justifyContent: 'center'}} icon={PlusIcon}>
             {__('Add another level', 'give')}

diff --git a/packages/form-builder/src/blocks/section/settings.tsx b/packages/form-builder/src/blocks/section/settings.tsx
@@ -5,7 +5,7 @@ import Edit from './Edit';
 
 const settings: SectionBlock['settings'] = {
     title: __('Section', 'give'),
-    category: 'layout',
+    category: 'section',
     description: __('A section groups form fields and content together.', 'give'),
     icon: () => (
         <Icon

diff --git a/packages/form-builder/src/components/forks/BlockCard.tsx b/packages/form-builder/src/components/forks/BlockCard.tsx
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {Button} from '@wordpress/components';
+import {chevronLeft, chevronRight} from '@wordpress/icons';
+import {__, isRTL} from '@wordpress/i18n';
+import {useDispatch, useSelect} from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from './BlockIcon';
+import {store as blockEditorStore} from '@wordpress/block-editor';
+
+function BlockCard({title, icon, description, className = ''}) {
+    // @ts-ignore
+    const isOffCanvasNavigationEditorEnabled = window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+    const {parentNavBlockClientId} = useSelect((select) => {
+        // @ts-ignore
+        const {getSelectedBlockClientId, getBlockParentsByBlockName} = select(blockEditorStore);
+
+        const _selectedBlockClientId = getSelectedBlockClientId();
+
+        return {
+            parentNavBlockClientId: getBlockParentsByBlockName(_selectedBlockClientId, 'core/navigation', true)[0],
+        };
+    }, []);
+
+    const {selectBlock} = useDispatch(blockEditorStore);
+
+    return (
+        <div className={classnames('block-editor-block-card', className)}>
+            {isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
+                <Button
+                    onClick={() => selectBlock(parentNavBlockClientId)}
+                    label={__('Go to parent Navigation block')}
+                    style={
+                        // TODO: This style override is also used in ToolsPanelHeader.
+                        // It should be supported out-of-the-box by Button.
+                        {minWidth: 24, padding: 0}
+                    }
+                    icon={isRTL() ? chevronRight : chevronLeft}
+                    isSmall
+                />
+            )}
+            {/*@ts-ignore*/}
+            <BlockIcon icon={icon} showColors />
+            <div className="block-editor-block-card__content">
+                <h2 className="block-editor-block-card__title">{title}</h2>
+                <span className="block-editor-block-card__description">{description}</span>
+            </div>
+        </div>
+    );
+}
+
+export default BlockCard;
diff --git a/packages/form-builder/src/components/forks/BlockIcon.tsx b/packages/form-builder/src/components/forks/BlockIcon.tsx
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {Icon} from '@wordpress/components';
+import {blockDefault} from '@wordpress/icons';
+import {memo} from '@wordpress/element';
+
+function BlockIcon({icon, showColors = false, className, context}) {
+    if (icon?.src === 'block-default') {
+        icon = {
+            src: blockDefault,
+        };
+    }
+
+    // @ts-ignore
+    const renderedIcon = <Icon icon={icon && icon.src ? icon.src : icon} context={context} />;
+    const style = showColors
+        ? {
+              backgroundColor: icon && icon.background,
+              color: icon && icon.foreground,
+          }
+        : {};
+
+    return (
+        <span
+            style={style}
+            className={classnames('block-editor-block-icon', className, {
+                'has-colors': showColors,
+            })}
+        >
+            {renderedIcon}
+        </span>
+    );
+}
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md
+ */
+export default memo( BlockIcon );
diff --git a/packages/form-builder/src/components/forks/BlockTypesList.tsx b/packages/form-builder/src/components/forks/BlockTypesList.tsx
@@ -11,8 +11,8 @@
  /**
  * Internal @wordpress dependencies
  */
-import InserterListItem from '@wordpress/block-editor/build/components/inserter-list-item';
-import {InserterListboxGroup, InserterListboxRow} from '@wordpress/block-editor/build/components/inserter-listbox';
+import InserterListItem from '@wordpress/block-editor/src/components/inserter-list-item';
+import {InserterListboxGroup, InserterListboxRow} from '@wordpress/block-editor/src/components/inserter-listbox';
 
 import {getBlockMenuDefaultClassName} from '@wordpress/blocks';
 

diff --git a/packages/form-builder/src/components/sidebar/Primary/index.tsx b/packages/form-builder/src/components/sidebar/Primary/index.tsx
@@ -13,7 +13,7 @@ import {
 import {PopoutSlot} from '../popout';
 import {useEffect} from 'react';
 import useSelectedBlocks from '../../../hooks/useSelectedBlocks';
-import BlockCard from '@wordpress/block-editor/build/components/block-card';
+import BlockCard from '../../forks/BlockCard';
 import {brush, settings} from '@wordpress/icons';
 
 const {Slot: InspectorSlot, Fill: InspectorFill} = createSlotFill('StandAloneBlockEditorSidebarInspector');

diff --git a/packages/form-builder/src/components/sidebar/Secondary.tsx b/packages/form-builder/src/components/sidebar/Secondary.tsx
@@ -1,15 +1,18 @@
 import {__} from '@wordpress/i18n';
-import FieldTypesList from './panels/FieldTypesList';
 import BlockListTree from './panels/BlockListTree';
+import {__experimentalLibrary as Library} from '@wordpress/block-editor';
+
+const BlockListInserter = () => {
+    return <Library showInserterHelpPanel={false} />;
+};
 
 type PropTypes = {
     selected: string;
 };
 
 const Sidebar = ({selected}: PropTypes) => {
-
     const panels = {
-        add: FieldTypesList,
+        add: BlockListInserter,
         list: BlockListTree,
     };
 
@@ -28,6 +31,6 @@ const Sidebar = ({selected}: PropTypes) => {
             <PanelContent />
         </div>
     );
-}
+};
 
 export default Sidebar;
diff --git a/packages/form-builder/src/components/sidebar/panels/FieldTypesList.tsx b/packages/form-builder/src/components/sidebar/panels/FieldTypesList.tsx
@@ -1,5 +1,5 @@
 import {useSelect} from '@wordpress/data';
-import {store as blockEditorStore} from '@wordpress/block-editor/build/store';
+import {store as blockEditorStore} from '@wordpress/block-editor';
 import {__} from '@wordpress/i18n';
 // @ts-ignore
 import {SearchControl} from '@wordpress/components';

diff --git a/packages/form-builder/src/components/sidebar/popout/index.tsx b/packages/form-builder/src/components/sidebar/popout/index.tsx
@@ -8,6 +8,7 @@ export default function Popout({children}) {
     );
 }
 
+// @ts-ignore
 export const PopoutSlot = () => <Slot name="InspectorPopout" />;
 
 export const PopoutContainer = ({children}) => <div

diff --git a/packages/form-builder/src/containers/BlockEditorContainer.tsx b/packages/form-builder/src/containers/BlockEditorContainer.tsx
@@ -20,13 +20,14 @@ export default function BlockEditorContainer() {
 
     return (
         <BlockEditorProvider value={blocks} onInput={dispatchFormBlocks} onChange={dispatchFormBlocks}>
-            <Onboarding/>
+            <Onboarding />
             <SlotFillProvider>
                 <Sidebar.InspectorFill>
-                    <BlockInspector/>
+                    <BlockInspector />
                 </Sidebar.InspectorFill>
-                <BlockEditorInterfaceSkeletonContainer/>
-                <Popover.Slot/>
+                <BlockEditorInterfaceSkeletonContainer />
+                {/*@ts-ignore*/}
+                <Popover.Slot />
             </SlotFillProvider>
         </BlockEditorProvider>
     );

diff --git a/packages/form-builder/src/containers/HeaderContainer.tsx b/packages/form-builder/src/containers/HeaderContainer.tsx
@@ -1,15 +1,14 @@
-import React, {useContext, useState} from 'react';
+import React, {useState} from 'react';
 import {GiveIcon} from '../components/icons';
-import {close, cog, Icon, listView, plus, moreVertical, drawerRight} from '@wordpress/icons';
+import {drawerRight, listView, moreVertical, plus} from '@wordpress/icons';
 import {setFormSettings, useFormState, useFormStateDispatch} from '../stores/form-state';
 import {RichText} from '@wordpress/block-editor';
-import {Button, ExternalLink, TextControl, Dropdown, DropdownMenu, MenuGroup, MenuItem} from '@wordpress/components';
+import {Button, Dropdown, MenuGroup, MenuItem} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {Header} from '../components';
 import {Storage} from '../common';
 import {FormSettings, FormStatus} from '@givewp/form-builder/types';
 import {setIsDirty} from '@givewp/form-builder/stores/form-state/reducer';
-import {ShepherdTourContext} from "react-shepherd";
 
 const Logo = () => (
     <div
@@ -66,10 +65,13 @@ const HeaderContainer = ({
             contentLeft={
                 <>
                     <Logo />
-                    <div id="AddBlockButtonContainer" style={{
-                        padding: 'var(--givewp-spacing-2)',
-                        margin: 'calc(var(--givewp-spacing-2) * -1)',
-                    }}>
+                    <div
+                        id="AddBlockButtonContainer"
+                        style={{
+                            padding: 'var(--givewp-spacing-2)',
+                            margin: 'calc(var(--givewp-spacing-2) * -1)',
+                        }}
+                    >
                         <Button
                             style={{width: '32px', height: '32px', minWidth: '32px'}}
                             className="rotate-icon"
@@ -106,9 +108,8 @@ const HeaderContainer = ({
                         {isSaving && 'draft' === isSaving
                             ? __('Saving...', 'give')
                             : 'draft' === formSettings.formStatus
-                                ? __('Save as Draft', 'give')
-                                : __('Switch to Draft', 'give')
-                        }
+                            ? __('Save as Draft', 'give')
+                            : __('Switch to Draft', 'give')}
                     </Button>
                     <Button
                         onClick={() => onSave('publish')}
@@ -119,31 +120,25 @@ const HeaderContainer = ({
                         {isSaving && 'publish' === isSaving
                             ? __('Updating...', 'give')
                             : 'publish' === formSettings.formStatus
-                                ? __('Update', 'give')
-                                : __('Publish', 'give')
-                        }
+                            ? __('Update', 'give')
+                            : __('Publish', 'give')}
                     </Button>
                     <Button onClick={toggleShowSidebar} isPressed={showSidebar} icon={drawerRight} />
                     <Dropdown
+                        popoverProps={{placement: 'bottom-start'}}
                         // @ts-ignore
-                        popoverProps={ { placement: 'bottom-start' } }
-                        focusOnMount={"container"}
-                        renderToggle={ ( { isOpen, onToggle } ) => (
-                            <Button
-                                onClick={onToggle}
-                                icon={moreVertical}
-                            />
-                        ) }
-                        renderContent={ ({onClose}) => (
+                        focusOnMount={'container'}
+                        renderToggle={({isOpen, onToggle}) => <Button onClick={onToggle} icon={moreVertical} />}
+                        renderContent={({onClose}) => (
                             <div style={{minWidth: '280px', maxWidth: '400px'}}>
                                 <MenuGroup label={__('Tools', 'give')}>
                                     <MenuItem
                                         onClick={() => {
                                             // @ts-ignore
-                                            if(!window.tour.isActive()) {
+                                            if (!window.tour.isActive()) {
                                                 // @ts-ignore
-                                                window.tour.start()
-                                                onClose()
+                                                window.tour.start();
+                                                onClose();
                                             }
                                         }}
                                     >

diff --git a/packages/form-builder/src/feedback/index.tsx b/packages/form-builder/src/feedback/index.tsx
@@ -21,6 +21,7 @@ const Feedback = () => {
         setHidden(!!localStorage.getItem(HIDE_FEEDBACK));
     }, []);
 
+    // @ts-ignore
     return (
         <Container>
             {!hidden && (
@@ -38,7 +39,6 @@ const Feedback = () => {
                         <div>
                             <ExternalLink
                                 href={feedbackUrl}
-                                target="_blank"
                                 rel="noopener noreferrer"
                                 onClick={closeCallback}
                                 style={{color: 'var(--givewp-primary-600)'}}

diff --git a/packages/form-builder/src/hooks/useSelectedBlocks.js b/packages/form-builder/src/hooks/useSelectedBlocks.js
@@ -1,19 +1,15 @@
-import {useSelect} from "@wordpress/data";
-import {store as blockEditorStore} from "@wordpress/block-editor/build/store";
+import {useSelect} from '@wordpress/data';
+import {store as blockEditorStore} from '@wordpress/block-editor';
 
 const useSelectedBlocks = () => {
-    const {
-        selectedBlocks,
-    } = useSelect(select => {
-        const {
-            getSelectedBlockClientIds,
-        } = select(blockEditorStore);
+    const {selectedBlocks} = useSelect((select) => {
+        const {getSelectedBlockClientIds} = select(blockEditorStore);
         return {
             selectedBlocks: getSelectedBlockClientIds(),
         };
     });
 
-    return selectedBlocks
+    return selectedBlocks;
 };
 
 export default useSelectedBlocks;