From 6427fc6894ea6aaae836ffccb38b0d2cc2ad123b Mon Sep 17 00:00:00 2001 From: Jon Waldstein Date: Thu, 7 Dec 2023 15:06:08 -0500 Subject: [PATCH 1/4] fix: add extra isResolving loading step --- .../Blocks/DonationFormBlock/resources/editor/Edit.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx index 51f7295207..87e4341665 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx @@ -8,8 +8,10 @@ import DonationFormBlockControls from './components/DonationFormBlockControls'; import DonationFormBlockPreview from './components/DonationFormBlockPreview'; import './styles/index.scss'; +import { __ } from '@wordpress/i18n'; /** + * @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 */ @@ -39,6 +41,12 @@ export default function Edit({attributes, isSelected, setAttributes, className, return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link]; })(); + if (isResolving !== false) { + return
+

{__('Loading...', 'give')}

+
+ } + return (
{id && showPreview ? ( From 390ccb572fc69aebfb3eaa78c4a00b38d39c76f0 Mon Sep 17 00:00:00 2001 From: Jon Waldstein Date: Fri, 8 Dec 2023 12:53:22 -0500 Subject: [PATCH 2/4] fix: block attribute type juggling --- .../resources/editor/Edit.tsx | 24 ++++++++++++++++--- .../components/DonationFormBlockControls.tsx | 5 ++-- .../components/DonationFormBlockPreview.tsx | 2 +- .../resources/editor/hooks/useFormOptions.ts | 2 +- .../resources/editor/hooks/usePostState.ts | 3 ++- 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx index 87e4341665..eeb677cdbe 100644 --- 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) { - const {id, blockId, displayStyle, continueButtonTitle} = attributes; + const {id, blockId, displayStyle, continueButtonTitle} = attributes as DonationFormBlockAttributes; const {formOptions, isResolving} = useFormOptions(); const [showPreview, setShowPreview] = useState(!!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/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx index 2376aea0b7..1e53107c8d 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx +++ b/src/DonationForms/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({ - {!isResolving && formOptions.length === 0 ? ( + {isResolving === false && formOptions.length === 0 ? (

{__('No forms were found using the GiveWP form builder.', 'give')}

) : ( { - setAttributes({id: newFormId}); + setAttributes({id: Number(newFormId)}); }} /> )} diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx index 3d5f7cf8d2..4dcb48226a 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx +++ b/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'; diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts index 3bbca96eba..64a53d8f0f 100644 --- 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 index 73cef541af..517027d948 100644 --- 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 { From 4cee85e046f5468e6acea29d30feaccfcda11eec Mon Sep 17 00:00:00 2001 From: Jon Waldstein Date: Fri, 8 Dec 2023 14:23:19 -0500 Subject: [PATCH 3/4] fix: more type juggling and comparison problems --- .../DonationFormBlock/resources/editor/Edit.tsx | 2 +- .../editor/components/DonationFormBlockControls.tsx | 8 ++++---- .../editor/components/DonationFormSelector.tsx | 13 ++++++++++--- .../resources/editor/hooks/useFormOptions.ts | 10 ++++++++-- 4 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx index eeb677cdbe..3bb16ba17c 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx @@ -54,7 +54,7 @@ export default function Edit({attributes, isSelected, setAttributes, className, }, []); const [isLegacyForm, isLegacyTemplate, link] = (() => { - const form = formOptions.find((form) => form.value === String(id)); + const form = formOptions.find((form) => form.value === id); return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link]; })(); diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx index 1e53107c8d..d238704252 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx @@ -1,19 +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 {FormOption} from '../hooks/useFormOptions'; interface DonationFormBlockControls { attributes: Readonly; setAttributes: (newAttributes: Record) => void; - formOptions: Option[]; + formOptions: FormOption[]; isResolving: boolean; isLegacyTemplate: boolean; isLegacyForm: boolean; } /** - * @unreleased updated setAttributes ID to be a number. + * @unreleased updated setAttributes ID to be a number and formOptions to return select options. * @since 3.2.0 */ export default function DonationFormBlockControls({ @@ -48,7 +48,7 @@ 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: Number(newFormId)}); diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx index 3765715582..38a89e0bbd 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx @@ -7,16 +7,23 @@ import {reactSelectStyles, reactSelectThemeStyles} from '../styles/reactSelectSt import logo from '../images/givewp-logo.svg'; import '../styles/index.scss'; +import {FormOption} from '../hooks/useFormOptions'; // @ts-ignore const savePost = () => dispatch('core/editor').savePost(); +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(null); + const form = formOptions.find(form => form.value === selectedForm); const {isSaving, isDisabled} = usePostState(); return ( diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts index 64a53d8f0f..96a66d9ddc 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts @@ -1,9 +1,15 @@ 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; +} /** * @since 3.2.0 include isLegacyForm, isLegacyFormTemplate & link. From 5bda9e50e5220a26d73e0431d69abbec02af762b Mon Sep 17 00:00:00 2001 From: Jon Waldstein Date: Fri, 8 Dec 2023 14:24:39 -0500 Subject: [PATCH 4/4] chore: update docs --- .../editor/components/DonationFormBlockControls.tsx | 2 +- .../resources/editor/components/DonationFormSelector.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx index d238704252..aa3edf6f87 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx @@ -1,7 +1,7 @@ import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components'; import {__} from '@wordpress/i18n'; import {InspectorControls} from '@wordpress/block-editor'; -import {FormOption} from '../hooks/useFormOptions'; +import type {FormOption} from '../hooks/useFormOptions'; interface DonationFormBlockControls { attributes: Readonly; diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx index 38a89e0bbd..38411643a7 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx @@ -7,11 +7,14 @@ import {reactSelectStyles, reactSelectThemeStyles} from '../styles/reactSelectSt import logo from '../images/givewp-logo.svg'; import '../styles/index.scss'; -import {FormOption} from '../hooks/useFormOptions'; +import type {FormOption} from '../hooks/useFormOptions'; // @ts-ignore const savePost = () => dispatch('core/editor').savePost(); +/** + * @unreleased + */ type DonationFormSelectorProps = { formOptions: FormOption[]; isResolving: boolean;