- {formId && showPreview ? (
-
- ) : (
-
-
+ return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link];
+ })();
-
-
+ return (
+
+ {id && showPreview ? (
+ <>
+
-
{
- if (option) {
- setAttributes({formId: option.value});
- }
- }}
- noOptionsMessage={() => (
- {__('No forms were found using the GiveWP form builder.', 'give')}
- )}
- options={formOptions}
- loadingMessage={() => <>{__('Loading Donation Forms...', 'give')}}
- isLoading={isResolving}
- theme={(theme) => ({
- ...theme,
- colors: {
- ...theme.colors,
- primary: '#27ae60',
- },
- })}
- styles={{
- input: (provided, state) => ({
- ...provided,
- height: '3rem',
- }),
- option: (provided, state) => ({
- ...provided,
- paddingTop: '0.8rem',
- paddingBottom: '0.8rem',
- fontSize: '1rem',
- }),
- control: (provided, state) => ({
- ...provided,
- fontSize: '1rem',
- }),
- }}
- />
+ {isLegacyForm ? (
+
+
-
- setShowPreview(true)} />
-
- )}
-
-
+ ) : (
+
+ )}
+
+ ) : (
+
+ )}
+
);
}
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ConfirmButton.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ConfirmButton.tsx
deleted file mode 100644
index 356d58d718..0000000000
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ConfirmButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {__} from '@wordpress/i18n';
-import usePostState from '../hooks/usePostState';
-import {dispatch} from '@wordpress/data';
-
-// @ts-ignore
-const savePost = () => dispatch('core/editor').savePost();
-
-export default function ConfirmButton({formId, enablePreview}) {
- const {isSaving, isDisabled} = usePostState();
-
- return (
-
-
-
- );
-}
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
new file mode 100644
index 0000000000..5d8bc05e53
--- /dev/null
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
@@ -0,0 +1,178 @@
+import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+import {InspectorControls} from '@wordpress/block-editor';
+import {Option} from '../types';
+
+interface DonationFormBlockControls {
+ attributes: Readonly
;
+ setAttributes: (newAttributes: Record) => void;
+ formOptions: Option[];
+ isResolving: boolean;
+ isLegacyTemplate: boolean;
+ isLegacyForm: boolean;
+}
+
+/**
+ * @unreleased
+ */
+export default function DonationFormBlockControls({
+ attributes,
+ setAttributes,
+ formOptions,
+ isResolving,
+ isLegacyTemplate,
+ isLegacyForm,
+}: DonationFormBlockControls) {
+ const {id, displayStyle, continueButtonTitle, showTitle, contentDisplay, showGoal, showContent} = attributes;
+ const hasFormFormat = isLegacyTemplate || !isLegacyForm;
+ const showOpenFormButton = hasFormFormat && ['newTab', 'modal', 'reveal', 'button'].includes(displayStyle);
+
+ const displayStyleOptions = (
+ options: {label: string; value: string}[],
+ legacy: {label: string; value: string}[],
+ v3: {label: string; value: string}[]
+ ) => {
+ return isLegacyTemplate ? options.concat(legacy) : options.concat(v3);
+ };
+ return (
+
+
+
+ {!isResolving && formOptions.length === 0 ? (
+ {__('No forms were found using the GiveWP form builder.', 'give')}
+ ) : (
+ {
+ setAttributes({id: newFormId});
+ }}
+ />
+ )}
+
+ {hasFormFormat && (
+
+ {
+ setAttributes({displayStyle: value});
+ }}
+ />
+
+ )}
+
+ {showOpenFormButton && (
+
+ {
+ setAttributes({continueButtonTitle: value});
+ }}
+ />
+
+ )}
+
+ {isLegacyTemplate && (
+ <>
+
+ {
+ setAttributes({showTitle: value});
+ }}
+ />
+
+
+ {
+ setAttributes({showGoal: value});
+ }}
+ />
+
+
+ {
+ setAttributes({contentDisplay: value});
+ }}
+ />
+
+
+ {contentDisplay && (
+
+ {
+ setAttributes({showContent: value});
+ }}
+ />
+
+ )}
+
+ )}
+
+ {id && (
+
+
+ {__('Edit donation form', 'give')}
+
+
+ )}
+
+
+ );
+}
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/BlockPreview.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx
similarity index 59%
rename from src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/BlockPreview.tsx
rename to src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx
index 8604f2e35b..41c501d516 100644
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/BlockPreview.tsx
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx
@@ -1,32 +1,43 @@
import ModalPreview from './ModalPreview';
-import RevealPreview from './RevealPreview';
import IframeResizer from 'iframe-resizer-react';
import {useSelect} from '@wordpress/data';
+import '../styles/index.scss';
+
interface BlockPreviewProps {
formId: number;
clientId: string;
- formFormat: string;
+ formFormat: 'fullForm' | 'modal' | 'newTab' | 'reveal';
openFormButton: string;
+ link: string;
}
/**
+ * @unreleased replace reveal for newTab display.
* @since 3.0.0
*/
-export default function BlockPreview({clientId, formId, formFormat, openFormButton}: BlockPreviewProps) {
+export default function DonationFormBlockPreview({
+ clientId,
+ formId,
+ formFormat,
+ openFormButton,
+ link,
+}: BlockPreviewProps) {
// @ts-ignore
const selectedBlock = useSelect((select) => select('core/block-editor').getSelectedBlock(), []);
const isBlockSelected = selectedBlock?.clientId === clientId;
const enableIframe = isBlockSelected ? 'auto' : 'none';
- const isModalDisplay = formFormat === 'modal';
- const isRevealDisplay = formFormat === 'reveal';
+ const isModalDisplay = formFormat === 'modal' || formFormat === 'reveal';
+ const isNewTabDisplay = formFormat === 'newTab';
- return isModalDisplay ? (
+ return isNewTabDisplay ? (
+
+ {openFormButton}
+
+ ) : isModalDisplay ? (
- ) : isRevealDisplay ? (
-
) : (
dispatch('core/editor').savePost();
+
+/**
+ * @unreleased
+ */
+export default function DonationFormSelector({formOptions, isResolving, handleSelect}) {
+ const [selectedForm, setSelectedForm] = useState(null);
+ const form = formOptions.find(form => form.value == selectedForm);
+ const {isSaving, isDisabled} = usePostState();
+
+ return (
+
+
+
+
+
+
{
+ if (option) {
+ setSelectedForm(option.value);
+ }
+ }}
+ noOptionsMessage={() => {__('No forms were found using the GiveWP form builder.', 'give')}
}
+ options={formOptions}
+ loadingMessage={() => <>{__('Loading Donation Forms...', 'give')}}
+ isLoading={isResolving}
+ theme={reactSelectThemeStyles}
+ styles={reactSelectStyles}
+ />
+
+
+
+
-
-