fix: block attribute type juggling

impress-org · Dec 8, 2023 · 390ccb5 · 390ccb5
1 parent 6427fc6
commit 390ccb5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx
@@ -6,23 +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(() => {
@@ -36,7 +54,7 @@ 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 === String(id));
 
         return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link];
     })();

diff --git a/...nForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/...nForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
@@ -13,6 +13,7 @@ interface DonationFormBlockControls {
 }
 
 /**
+ * @unreleased updated setAttributes ID to be a number.
  * @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
@@ -50,7 +51,7 @@ export default function DonationFormBlockControls({
                                 ...formOptions,
                             ]}
                             onChange={(newFormId) => {
-                                setAttributes({id: newFormId});
+                                setAttributes({id: Number(newFormId)});
                             }}
                         />
                     )}

diff --git a/...onForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx b/...onForms/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';

diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts
@@ -6,7 +6,7 @@ import type {Form, Option} from '../types';
 type FormOption = Form & Option;
 
 /**
- * unreleased include isLegacyForm, isLegacyFormTemplate & link.
+ * @since 3.2.0 include isLegacyForm, isLegacyFormTemplate & link.
  * @since 3.0.0
  */
 export default function useFormOptions(): {

diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/usePostState.ts b/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 {