Fix: prevent donation form block from causing error on edit page load.

src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx

@@ -6,21 +6,41 @@ import DonationFormSelector from './components/DonationFormSelector';
 import useFormOptions from './hooks/useFormOptions';
 import DonationFormBlockControls from './components/DonationFormBlockControls';
 import DonationFormBlockPreview from './components/DonationFormBlockPreview';
+import type {BlockPreviewProps} from './components/DonationFormBlockPreview';
 
 import './styles/index.scss';
+import { __ } from '@wordpress/i18n';
 
 /**
+ * @unreleased
+ *
+ * @see 'class-give-block-donation-form.php'
+ */
+type DonationFormBlockAttributes = {
+    id: number;
+    prevId: number;
+    blockId: string;
+    displayStyle: BlockPreviewProps['formFormat'];
+    continueButtonTitle: string;
+    showTitle: boolean;
+    showGoal: boolean;
+    showContent: boolean;
+    contentDisplay: string;
+}
+
+/**
+ * @unreleased added isResolving loading state to prevent forms from prematurely being rendered.
  * @since 3.2.0 updated to handle v2 forms.
  * @since 3.0.0
  */
 export default function Edit({attributes, isSelected, setAttributes, className, clientId}: BlockEditProps<any>) {
-    const {id, blockId, displayStyle, continueButtonTitle} = attributes;
+    const {id, blockId, displayStyle, continueButtonTitle} = attributes as DonationFormBlockAttributes;
     const {formOptions, isResolving} = useFormOptions();
     const [showPreview, setShowPreview] = useState<boolean>(!!id);
 
     const handleSelect = (id) => {
-        setShowPreview(true);
         setAttributes({id});
+        setShowPreview(true);
     };
 
     useEffect(() => {
@@ -34,11 +54,17 @@ export default function Edit({attributes, isSelected, setAttributes, className,
     }, []);
 
     const [isLegacyForm, isLegacyTemplate, link] = (() => {
-        const form = formOptions.find((form) => form.value == id);
+        const form = formOptions.find((form) => form.value === id);
 
         return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link];
     })();
 
+    if (isResolving !== false) {
+        return <div {...useBlockProps()}>
+            <p>{__('Loading...', 'give')}</p>
+        </div>
+    }
+
     return (
         <div {...useBlockProps()}>
             {id && showPreview ? (

src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx

@@ -1,18 +1,19 @@
 import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {InspectorControls} from '@wordpress/block-editor';
-import {Option} from '../types';
+import type {FormOption} from '../hooks/useFormOptions';
 
 interface DonationFormBlockControls {
     attributes: Readonly<any>;
     setAttributes: (newAttributes: Record<string, any>) => void;
-    formOptions: Option[];
+    formOptions: FormOption[];
     isResolving: boolean;
     isLegacyTemplate: boolean;
     isLegacyForm: boolean;
 }
 
 /**
+ * @unreleased updated setAttributes ID to be a number and formOptions to return select options.
  * @since 3.2.0
  */
 export default function DonationFormBlockControls({
@@ -38,7 +39,7 @@ export default function DonationFormBlockControls({
         <InspectorControls>
             <PanelBody title={__('Form Settings', 'give')} initialOpen={true}>
                 <PanelRow>
-                    {!isResolving && formOptions.length === 0 ? (
+                    {isResolving === false && formOptions.length === 0 ? (
                         <p>{__('No forms were found using the GiveWP form builder.', 'give')}</p>
                     ) : (
                         <SelectControl
@@ -47,10 +48,10 @@ export default function DonationFormBlockControls({
                             options={[
                                 // add a disabled selector manually
                                 ...[{value: '', label: __('Select...', 'give'), disabled: true}],
-                                ...formOptions,
+                                ...formOptions.map((form) => ({label: form.label, value: String(form.value)})),
                             ]}
                             onChange={(newFormId) => {
-                                setAttributes({id: newFormId});
+                                setAttributes({id: Number(newFormId)});
                             }}
                         />
                     )}

src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx

@@ -4,7 +4,7 @@ import {useSelect} from '@wordpress/data';
 
 import '../styles/index.scss';
 
-interface BlockPreviewProps {
+export interface BlockPreviewProps {
     formId: number;
     clientId: string;
     formFormat: 'fullForm' | 'modal' | 'newTab' | 'reveal';

src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx

@@ -7,16 +7,26 @@ import {reactSelectStyles, reactSelectThemeStyles} from '../styles/reactSelectSt
 import logo from '../images/givewp-logo.svg';
 
 import '../styles/index.scss';
+import type {FormOption} from '../hooks/useFormOptions';
 
 // @ts-ignore
 const savePost = () => dispatch('core/editor').savePost();
 
+/**
+ * @unreleased
+ */
+type DonationFormSelectorProps = {
+    formOptions: FormOption[];
+    isResolving: boolean;
+    handleSelect: (id: number) => void;
+}
+
 /**
  * @since 3.2.0
  */
-export default function DonationFormSelector({formOptions, isResolving, handleSelect}) {
-    const [selectedForm, setSelectedForm] = useState(null);
-    const form = formOptions.find(form => form.value == selectedForm);
+export default function DonationFormSelector({formOptions, isResolving, handleSelect}: DonationFormSelectorProps) {
+    const [selectedForm, setSelectedForm] = useState<number>(null);
+    const form = formOptions.find(form => form.value === selectedForm);
     const {isSaving, isDisabled} = usePostState();
 
     return (

src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts

@@ -1,12 +1,18 @@
 import {__} from '@wordpress/i18n';
 import {useSelect} from '@wordpress/data';
 import type {Post} from '@wordpress/core-data/src/entity-types';
-import type {Form, Option} from '../types';
+import type {Form} from '../types';
 
-type FormOption = Form & Option;
+/**
+ * @unreleased
+ */
+export interface FormOption extends Form {
+    label: string;
+    value: number;
+}
 
 /**
- * unreleased include isLegacyForm, isLegacyFormTemplate & link.
+ * @since 3.2.0 include isLegacyForm, isLegacyFormTemplate & link.
  * @since 3.0.0
  */
 export default function useFormOptions(): {

src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/usePostState.ts

@@ -1,6 +1,7 @@
 import {useSelect} from '@wordpress/data';
 
 /**
+ * @unreleased updated isDisabled to use isEditedPostSaveable
  * @since 3.0.0
  */
 export default function usePostState(): { isSaving: boolean, isDisabled: boolean } {
@@ -11,7 +12,7 @@ export default function usePostState(): { isSaving: boolean, isDisabled: boolean
 
     const isDisabled = useSelect((select) => {
         // @ts-ignore
-        return !select('core/editor').isEditedPostPublishable();
+        return !select('core/editor').isEditedPostSaveable();
     }, []);
 
     return {